You want to build a website, but don’t know where to start?
It seems the typical web development training ground is also the most expensive: buy a domain, host server, WordPress account, theme, etc. But what if you’re not a small business owner or trying to build a brand? What if you’re just trying to learn web development, sans clutter?
Read on to learn how to host your own website, which you can create either from scratch or with pre-made templates, on your computer, and for free. Oh, that includes hosting your own WordPress account as well!
XAMPP: An Introduction
Bitnami’s XAMPP is “an Apache distribution containing PHP and Perl.” For our purposes, we only need to understand that XAMPP is a free, simple program which allows users to host websites on their PCs.
While setting up a local server using XAMPP is somewhat technical, the process is also fairly easy and straight forward. Once everything has been set up, you’ll find that managing and editing websites is a breeze.
Then there’s the matter of quick and complete control. Using XAMPP to create and edit websites, you will be able to change as much or as little of a website as you’d like. That said, with great power comes great responsibility. You are more susceptible to losing your sites as well, especially if you do not create backups.
Head to the XAMPP website and download the package. Follow the default setup process. Once you’ve downloaded XAMPP, your XAMPP control panel should open automatically. If not, you can locate the XAMPP program as you would any other (through Start Menu search).
In your XAMPP control panel window, you should see a simple layout of which XAMPP processes are running. For our purposes, we will focus on the first two options: Apache and MySQL.
Apache — The main crux of XAMPP, the Apache option creates an Apache server on your PC. This is what will allow you to run and edit websites on your PC through web browsers, much like one would a website. Except, of course, this website is running on your PC, as opposed to a server connected to the internet.
MySQL — SQL allows for communication between databases and websites, allowing users to test and store emails, passwords, and any other data inputs. We will use this for your local WordPress account.
Press the Start button in your XAMPP control panel under Actions for both Apache and MySQL. Wait until both Apache and MySQL are highlighted green under your module section. Once enabled, you’re free to use XAMPP.
Localhost and phpMyAdmin
To ensure everything is in working order, open a web browser, enter http://localhost/ into your address bar and hit Enter. You should be redirected to http://localhost/dashboard/, which is the default XAMPP page.
Next, click on the phpMyAdmin button on the top navigation menu. You’ll be directed to your default phpMyAdmin page.
Leave these alone for now, but if both are working you’re ready to start creating websites!
Creating Websites Using XAMPP
Now comes the fun part. Head to the XAMPP folder located in your root drive directory (C:\xampp by default). Then, head to htdocs. This will be the main website repository you will use in order to view websites.
Before we create and edit a website, you’ll need a text editor. While you can use a default text editor like Notepad, it’s typically best to download a third-party editor made specifically for code and markup. Sublime Text is one of the best around, so head to their website and download the software to get started.
Now you can begin downloading and installing websites into XAMPP. I will use the Roadtrip template, but you can use whichever template you’d like. Download the website’s zip file, and keep it in a location you will remember. Next, create a folder within XAMPP’s htdocs folder for your website. I’ve named mine roadtrip — try to keep your name simple. Then, unzip and extract the contents of your zip file to this htdocs folder.
Once you’ve extracted the files, head to your website repository within htdocs to ensure they’ve been extracted correctly.
Finally, head to your webpage in your web browser. Your website, so to speak, will be reachable using the previously mentioned localhost along with the name of the folder holding your page files. This is because websites are essentially files contained in folders, all under a single domain — or root — name. You’re learning already!
Our previously created folder was named roadtrip, so the full site address is http://localhost/roadtrip.
You’re done! Now you can begin editing the website locally.
Open up Sublime Text. Head to File and select Open Folder. Find and select your web folder within the XAMPP folder. You will now be able to edit multiple pages of the same website within your Sublime Text editor.
Sublime Text also provides a great interface for you to see every file and folder of your website. To create changes on your website, edit your website’s code, save (using the keyboard command Ctrl + S), and refresh your website within the browser.
The process is simple and direct: edit the webpage, then check to see if your code works. As you progress in your web development, you’ll attempt to ingrain more complicated features into your web page. No matter the skill level, though, the basic format to edit pages remains the same.
Use WordPress With XAMPP
If you don’t want to edit raw code, or would rather use a more familiar content management system (CMS), WordPress provides its fantastic web design resource in an easy to use ZIP file as well! To install WordPress on XAMPP, head to the WordPress website and download the official application.
Use the same format to create a website as you did previously, with your extracted WordPress folder present in the htdoc directory within the folder wordpress. Maintain the folder name for the sake of clarity.
Since WordPress requires that you create login information, you’ll need to create an entry in your PHP directory for the web page. Head to your phpMyAdmin page — http://localhost/phpmyadmin/ by default — to get started.
From this page, click on Databases. Under the Create database parameter, enter wordpress and then hit Create. You should see a popup telling you the database was created. Next, close this browser window and enter your WordPress folder within the XAMPP htdocs directory. This folder should possess the contents of your unzipped WordPress files.
We need to configure the actual WordPress website so you can log in and use the site. This is done through WordPress’ main PHP configuration file. Within your WordPress folder, find the file labeled wp-config-sample.php, right-click the file, select Edit (or Open with for a separate text editor). Notepad should work just fine.
Here’s the code we’ll focus on:
// ** MySQL settings - You can get this info from your web host ** // /** The name of the database for WordPress */ define('DB_NAME', 'database_name_here'); /** MySQL database username */ define('DB_USER', 'username_here'); /** MySQL database password */ define('DB_PASSWORD', 'password_here');
You will have to make three changes to the code above within the quotation mark.
database_name_here — Change this parameter to wordpress. The website will then use the previously created database in phpMyAdmin labeled as such.
username_here — Change this to root. The root username possesses the proper administrator privileges by default, so it will be allowed through phpMyAdmin. Other usernames will not work unless granted the appropriate permissions.
password_here — Change this to an easily identifiable password. If you would rather not use a password, delete the parameter.
Save this file as wp-config.php — as opposed to the previous wp-config-sample.php — and exit. Then, head to the following localhost address: http://localhost/wordpress.
Proceed with the installation, including the creation of your WordPress Username and Password. You can enter whichever values you’d prefer. Once you’ve finished entering your values, click on the Install WordPress button to finish the process. Once that’s done, log into your local WordPress using the username and password given on the previous page.
You’re done! Now, you can spend your heart’s content editing, modifying, and creating web pages both from scratch and through WordPress, offline, and for free!
Web Development Starts With a Single Page
Before, you were just starting your web development journey. Now, you’ve created a local server on your PC through which you can create, modify, and adapt web pages at a whim. Best of all, you’re completely in control. The only thing that’s left is to start your experimentation, so get going!
What software do you use for web development? Do you have any advice for up and coming developers? Let us know in the comments below!
Image Credits: Dmitry Tishchenko/Shutterstock