In this guide we’re going to cover installing a program called XAMPP which is a preconfigured webserver out of the box and makes this whole process much easier. If you are more confident with this type of process you can install all of the required services as standalone applications but to keep this guide less intimidating for the novice users we’re going for the all in one solution.
Once we’ve set our webserver up and tested everything we’re then going to install WordPress to prove that the system works as it should. Obviously you’re not forced to use WordPress after you’ve completed this tutorial but it will give you a good idea of what you can achieve with your new webserver.
Before we start this guide I feel it necessary to firstly ensure that you have a basic understanding of what we’re going to achieve and what our achievement enables you to do also if there are any risks involved and if so what they may be.
Let’s look at how websites work to better understand the process that’s involved.
When you type in a web address (known as a domain name) such as www.example.com into your web browser, your computer will contact that domain name’s name server to find out which IP address that domain name should be pointing to. Once the name server replies with the IP address of the websites webserver your web browser will connect and then display the webpage for www.example.com.
Now what we’re going to be setting up in this guide is a webserver and the website itself, so you’re still going to need to get your own domain name which you will point to your IP address which we’ll discuss later on in part 2 of this series.
Firstly, we need to know if your ISP (Internet Service Provider) prohibits you from hosting a website from home. Most ISPs don’t actually mind you hosting your own website from home, however some do specifically prohibit that action. The best way to find out other than reading through your terms and conditions is to test if port 80 is open for inbound connections. Port 80 is used for web traffic so if your ISP doesn’t want you to host a website from home they will generally block your ability to receive traffic via port 80.
Once we’ve confirmed that we’re not going to be breaching any of the terms and conditions for our internet connection we’re going to need to know if we’ve got a Static IP or a Dynamic IP. Your IP address is like your unique address on the internet and it’s how the world wide web is going to contact our website. With most home internet connections the IP address will be Dynamic meaning that it will change each time our router releases and renews the connection to the internet which happens every few days, which is a big problem for anybody hosting a website. Because your domain name (i.e. your .co.uk or .com) will be set to point to your webservers IP, it can take up to 48 hours for the domain name to register any change in IP address which means every time your IP address changes your website will be inaccessible until it has been manually updated by yourself and then it has to update on all of the DNS servers around the world. To avoid this we’re going to need a Dynamic Domain Name Service (DDNS for short).
To summarise how a DDNS works would be to say that it sits between your domain name and your webserver. So instead of your domain name talking to your webserver directly (which it can’t do if your IP address is changing every few days), it will talk to the DDNS which keeps it informed of your webservers current IP in real time. Which updates in seconds as oppose to days, so even when your home IP address changes your domain should never fail to be directed to the correct address.
I’ll talk you through setting up a free DDNS service with a free subdomain in part 2 of the series, but before we overcomplicate everything – let’s get our website working locally on our computer before we worry about the rest of the world finding it.
I’m going to assume in this guide that prior to putting your computer to use as a webserver you’ve reinstalled Windows so we’re working with a fresh install.
The first thing we’re going to need to do now then is download everything we’re going to need for this guide:
WordPress can be found here
XAMPP can be found here
Step One: Installing and Configuring XAMPP
Once you’ve downloaded XAMPP simply double click the executable file to start the installation, the installation itself is quite easy to follow and requires little input.
However to help keep things organised I’m going to suggest that we change the installation directory to C:\webserver\xampp during the installation as pictured above, this helps keep everything organised and easier to know where we need to navigate later on in the article.
After XAMPP has finished installing, it will give you an option to launch the XAMPP control panel(as seen in the picture above); which we are going to want to do to finish configuring and more importantly securing our XAMPP server.
When the control panel opens we’re shown a list of modules that we can start for our website, the only modules we require are Apache and MySQL, click on the start button next to each of these to start the services. Once we’ve started the servers we need to launch the XAMPP configuration page by opening up your web browser and typing http://localhost into it and pressing return.
With the XAMPP page open it should look like the image above. On the right hand side, we see an orange menu with different options and links, the one we are interested in is the third one down titled Security, if you click on that it should open a new window that looks like the one below.
On the screen above XAMPP is informing us that it’s not correctly configured and is currently un-secure, luckily however the guys over at XAMPP have given us a wizard to quickly fix these problems. If you click the link a little further down the page ( http://localhost/security/xamppsecurity.php ) we can configure the server correctly and ensure it’s secure.
The first thing the security guide asks us is to set a password for MySQL (Our database server) as default the username for this will be root but you need to assign a memorable yet secure password to this by typing it in the text boxes, then click the button that says ‘Password changing’.
The second option we have here is to restrict access to the XAMPP directory using a .htaccess file, type in a memorable yet secure username and password into the fields and then click ‘Make safe the XAMPP directory’.
If you now navigate to http://localhost in your web browser it should now prompt you for a username and password, this is the same username and password that we just defined for the .htaccess file, type in your details and press OK.
Now that we’ve got XAMPP installed and configured we’re ready to install WordPress.
Step Two Installing and Configuring WordPress
Before we copy over the WordPress installation files we’re going to need to prepare our XAMPP folder by moving the default XAMPP website. To do this simply navigate to the folder that we installed XAMPP to (if you followed my example that is C:\webserver\xampp\htdocs), in the htdocs folder you’ll see we already have files in there that we don’t want to delete as we may need them in future. However we do want to move them to a different folder, so in the htdocs directory create a new folder called ‘xampp-backup’ and move all of the files and folders in htdocs into this newly created folder.
We then need to unzip the WordPress file we downloaded, in the newly unzipped file we’ll find a folder called WordPress, we need to copy everything that is inside the WordPress folder into our htdocs folder.
Once we’ve copied those files over we’re ready to configure and install WordPress, the first thing we need to do is create a MySQL database for WordPress to use, to do this we’ll be using a web based application installed by XAMPP as default called phpMyAdmin. You can access this web tool by opening your web browser and typing in http://localhost/phpmyadmin and pressing return.
When you access phpMyAdmin it will ask you to login, we’ll be using the MySQL details that we created earlier which means the username is root and the password is what you defined previously when configuring XAMPP.
Once logged in we’re presented with a screen as shown above. We’re now going to create an SQL database for WordPress to use. So on the menu at the top of the page click the button that says Databases.
This will take us to the database screen shown above, here we’re going to create the database for WordPress by typing in a database name in the text field at the top of the page. In this example I’m going to call the database ‘wordpress_blog’ obviously you can name it whatever you want however you’re going to need to remember the name when we edit the WordPress configuration file. Once you’ve typed in your name click the create button to create the database, phpMyAdmin will confirm this action and inform us that the database was successfully created.
We can now close phpMyAdmin and edit the WordPress configuration file.
We now need to navigate back to our htdocs folder in our XAMPP directory and locate a file called ‘wp-config-sample.php’ (left) we’re going to rename this file to ‘wp-config.php’ (right), once we’ve renamed the configuration file we’re then going to need to edit the file.
To do this simply open up Wordpad (Start>All Programs>Accessories>Wordpad) and we’re then going to need to open our wp-config.php file (which if you followed my example is located in C:\webserver\xampp\wp-config.php).
So within Wordpad click File>Open and then browse to your htdocs folder location, we’re then going to need to set the Files of Type in the bottom dropbox on the Open window to ‘All documents (*.*). Once we’ve done this you should see the wp-config.php file listed, simply double click on this to open the file within WordPad.
After opening the wp-config.php file we should have a screen that looks similar to the above.
We’re going to need to edit the following details into this configuration file
/** The name of the database for WordPress */
Replace database_name_here with the name of your SQL database that you created (if you were following my examples that will be wordpress_blog) for example my modified version reads:
/** The name of the database for WordPress */
We follow the same process for the other fields below replacing the text within the ‘ ‘s for our own.
/** MySQL database username */
/** MySQL database password */
Once you’ve done these you can click file and save.
We’re then ready to start the installer for WordPress. To do this we need to open up our web browser once again and navigate to http://localhost/wp-admin/install.php.
The installer will prompt us to name our site, this site is what will be displayed above each page and is included in search engine results.
We then need to enter our desired username, this is what we will use to login to WordPress and is what will be displayed on our posts “ie Posted By *usernamehere*”.
Once we’ve settled on a username you then need to specify a password for your WordPress account, obviously this should be something secure and memorable.
Finally, you need to enter your e-mail address should you enable email alerts within WordPress.
When you have filled in all of the required fields you’re ready to click ‘Install WordPress’. Once the installer has finished you’ll be taken to the Admin panel login page and are required to login using the details you just provided.
Now that we’ve confirmed that XAMPP is installed correctly and we’ve finished configuring our Wordpress installation, we need to do two more steps to ensure that if our computer restarts XAMPP starts with Windows and automatically starts Apache and MySQL.
To do this we’re going to put a shortcut to XAMPP in the Startup section of the start menu, this will ensure that every time Windows boots it starts XAMPP for us. To do this simply right click on the start button and click 'Open', you should then see a folder called Programs and if you double click on that you will then see a folder called Startup. Drag the copy of XAMPP from the desktop into the Startup folder to ensure that XAMPP starts everytime Windows loads.
We then need to ensure that XAMPP is configured to start Apache and MySQL automatically when XAMPP is started. To do this simply press the Config button on the XAMPP control panel and tick the Apache and MySQL tick boxes then confirm the settings by clicking the Save button.
That’s it, you’ve successfully installed a webserver environment and installed your first website.
In the second part of this guide we’re going to cover enabling the outside world to access your website.