How to access a website during development…

Accessing a website during its development to review, test and assess it is technically quite difficult if you already have a live website. After all, they can’t both share the same web address!

Temporary web addresses

Sometimes we adopt the approach of using a temporary domain name, such as website.websanity.co.uk, however, that means that the website itself must work on the web address website.websanity.co.uk when it is intended that it will eventually work on a different address: www.website.co.uk. Unfortunately most sophisticated Content Management Systems used to build websites, including WordPress, can’t be switched by changing just one value as the web address gets embedded all over the place in the internals of the site. In reality we end up spending about an hour going through technical things swapping settings over (well, some, as not all should be changed). Not ideal.

 

Using the real web address

So, our preferred approach is to develop a site using the web address that it will finally end up on. This saves time and reduces the risk of things going wrong when the web address is switched over. But how can you have two websites on the same address? Well, quite easily as it happens, but only one can be seen by the internet at a time.

When somebody types in a web address it looks up the web address book (this is highly simplified) and that tells your computer where the website physically is. Every physical machine attached to the web has something called an IP address, which look like this: 95.128.128.74.

So when you type www.website.co.uk into your browser it physically looks up where that machine is, and grabs the website from there. However – on a windows machine – BEFORE it does this it has a quick look at a file on your machine to see if it knows that website already and bypasses looking at the internet altogether. So, by putting our own entries in this file we can redirect where the website is grabbed from. Hence we can point it at our website in development and see that without anybody else seeing it!

This magic file is called your HOSTS file. It’s a system file so it’s a bit of an odd file, but it’s easy to edit. Here’s how.

 

Editing your HOSTS file

Note these instructions are for Windows 7 (goodness knows what you do in Windows 8, but if you’re a Windows 8 user you’re probably used to feeling that by now).

  1. Click your Start button and in the Search box type the letters notepad
    Notepad
  2. Right click on the entry that appears called Notepad and a popup menu will appear
    Run as administrator
  3. Click on Run as administrator
  4. A pop up box will ask you if that is OK. Click Yes
  5. In Notepad Click File | Open
  6. Use the standard file dialog box that appears to go to the directory:
    C:\Windows\System32\drivers\etc
  7. This will appear to be empty, but if you click the Text Documents (*.txt) button at the bottom right of the dialog box and select All Files (*.*) then you will see a list of files, including one called HOSTS
    File Open
  8. Click on the file called HOSTS and then click then Open button.
  9. You will see a very simple file, a bit like this:
    Blank .htaccess file
  10. At the end of the file add a line containing the information that we will give you. It will be of the form:
    91.208.99.12    www.website.co.uk
    This tells your machine that when you type in www.website.co.uk to grab the website from the physical machine 91.208.99.22 not from where the currently live website is.
    Updated .htaccess file
  11. Click File | Save
  12. Then File | Exit
  13. Now type in www.website.co.uk into your browser and YOU will see the test site instead of the live website.
  14. When you’re finished you can go through the same process and just put a # in front of the line to tell it to ignore that and swap back to the live site
    #91.208.99.12    www.website.co.uk
  15. And when the website is properly live you can just delete the line.

OK, that looks like lots of steps but it is just opening a file and editing a line and it is by far the best way of developing and viewing a website alongside your existing website whilst keeping everything private from the outside world.