Big lesson here! We’re getting closer.
Editing your hosts file (and other stuff)
Brad here again, and yesterday I showed you how to get your own free dynamic domain name.
Today, you need to edit your Windows configuration so that you can type your domain name into your web browser instead of “localhost”.
You need to know the IP address of your local computer. We also learned that in a previous lesson.
Hint: Start | Run | cmd (enter) | ipconfig (enter)
Actually, I should say, you need to do this on the computer where you’ve installed XAMPP!
Then, you need to edit the hosts file. Remember that? We learned about the hosts file in a past lesson about stopping ads Hint: Start | Run | notepad c:windowssystem32driversetchosts (enter)
The IP address you retrieved with the ipconfig command needs to be entered into your hosts file.
Add a new line that looks like this:
For example, the DIY Webserver website is at http://diyws.ath.cx, so the line in my hosts file looks like:
Save the file and exit Notepad.
Now you can start up a web browser, and type http://diyws.ath.cx (using my example of course!) instead of http://localhost
Let me know how you go, please. I want to make sure you can all follow this, and that you get going as soon as possible.
(Here’s a little tip as I write this – my keyboard has failed quite dismally – when I press b or x, I get nothing!
So, fire up Notepad, hold down the ALT key and enter the value (using the numeric keypad) from the DEC column for the character you want (in red) from the table at http://www.asciitable.com – I need b and x so I held ALT and typed 098 – this gave me a b – similarly for x – hold ALT and type 120. Then, copy and paste from Notepad when you need that character – or until you can go out and get a new keyoard (oops, missed the b!) ! )
Serving web pages.
Once you’ve gotten this far, it’s time to tell Apache (the webserver in the XAMPP installation) where our “document root” is. This simply means the folder where you’re going to store, and from which Apache will serve, your webpages.
One word here – regardless of whether you’ve installed XAMPP on your personal computer (the one where your email is, ie: the one you use everyday) or some other machine inside your local network… hmmm – ok – we need to talk about this. goodness me…
Your Internet connection comes into a modem, or modem/router. This device can be connected to your computer in a couple of different ways.
The first way is via a USB cable which connects the modem (or modem/router) to your one and only computer.
If you have more than one computer, you’ll probably have an RJ45 cable (Cat 5 or Cat 6 cable – usually blue) running from the Ethernet ports on your modem (or modem/router) and plugged into the Ethernet port on your computer.
Your modem (or modem/router) has an external, or WAN (Wide Area Network) IP address, and the machines on the other side of the modem (or modem/router) (ie in your home) has an internal, or LAN (Local Area Network) IP address.
The LAN address is the one you see when you do the ipconfig command on your local computer, regardless of whether you have one or several computers. The WAN address is the one that Dyndns.com saw when you created your own domain name, because that address came from your modem (or modem/router) rather than from your local computer. This is the big distinction, and one you need to understand when we get to port forwarding (you learned about ports in a previous lesson) because you’ll need to forward ports from the WAN to a particular machine on your LAN. We’ll get to that soon.
For the moment, lets assume that someone on the wider Internet (yes, from the WAN) wants to view your website. Apache (your webserver) needs to respond to that request and send back the webpage the user asked for. How does Apache know from where to send that page?
Apache (or at least, the XAMPP configuration) uses two configuration files. The first is httpd.conf, found in c:xamppapacheconf
The other file is called httpd-vhosts.conf, and it can be found inc:xamppapacheconfextra
The main configuration of Apache under XAMPP is controlled by httpd.conf, so lets look at that now. Open this file with Notepad – ie:notepad c:xamppapacheconfhttpd.conf – you know how to do this by now!
The main lines you need to focus on are (search for these):
If you don’t have any other webserver (or Skype apparently!) you can leave the standard port at 80. If you do have another webserver, or Skype running, you’ll need to change the Listen line from Listen 80 to Listen 8080 (or some other port that isn’t being used.) To check what ports are being used, you can run the portcheck program from your XAMPP installation ie: c:xamppxampp-portcheck.exe. Edit the httpd.conf file to set a port that isn’t being used any other program. So the line should read Listen 8080 (if there is some other program listening on port 80)
Also put an # in front of the line that says DocumentRoot c:/xampp/htdocs
That’s really all you need from httpd.conf.
The extra config will come from httpd-vhosts.conf. Here’s mine:
# Virtual Hosts # # If you want to maintain multiple domains/hostnames on your # machine you can setup VirtualHost containers for them. Most configurations # use only name-based virtual hosts so the server doesn't need to worry about # IP addresses. This is indicated by the asterisks in the directives below. # # Please see the documentation at # URL:http://httpd.apache.org/docs/2.2/vhosts/ # for further details before you try to setup virtual hosts. # # You may use the command line option '-S' to verify your virtual host # configuration. # # Use name-based virtual hosting. NameVirtualHost *:8080 # # VirtualHost example: # Almost any Apache directive may go into a VirtualHost container. # The first VirtualHost section is used for all requests that do not # match a ServerName or ServerAlias in any <VirtualHost> block. <VirtualHost *:8080> DocumentRoot c:/xampp/htdocs ServerName localhost <Directory /> Options ExecCGI FollowSymLinks Includes Indexes AllowOverride All Order allow,deny Allow from all </Directory> <IfModule dir_module> DirectoryIndex index.php index.php4 index.php3 index.cgi index.pl index.html index.htm index.shtml index.phtml </IfModule> </VirtualHost> <VirtualHost *:8080> DocumentRoot c:/web/diyws ServerName diyws.ath.cx <Directory /> Options ExecCGI FollowSymLinks Includes Indexes AllowOverride All Order allow,deny Allow from all </Directory> <IfModule dir_module> DirectoryIndex index.php index.php4 index.php3 index.cgi index.pl index.html index.htm index.shtml index.phtml </IfModule> ErrorLog "c:/web/diyws/logs/error_log.txt" CustomLog "c:/web/diyws/logs/access_log.txt" common </VirtualHost>
The first defines what to do with requests that come into this server on port 8080 that don’t match any domain name: ie: if someone went directly to my WAN IP address in their browser, and just happened to included the port (8080) Apache is listening on, they would probably be denied (since I’ve set the 1st virtualhost’s ServerName to be localhost) – therefore it won’t match and all they’ll see is an error message from Apache.
The first VirtualHost entry is used by Apache when all else fails, so add this generic one first in your httpd-vhosts.conf file.
The next VirtualHost entry is the one specifically set for the DIY Webserver site. You can see from my DocumentRoot entry that the folder where webpages will be served from is c:webdiyws
The servername is of course, diyws.ath.cx.
The Directory and IfModule sections you can ignore for the moment.
Later on, you’ll be wanting to do some analysis of the traffic you’re getting from your new website, so the ErrorLog and CustomLogdirectives specify where the logs should go. The folder logs should already exist, otherwise Apache will not start correctly.
Whenever you make a change to either httpd.conf or httpd-vhosts.conf, you will need to stop and start Apache. To do this, click Start, click Programs, click Apache Friends, click XAMPP, click XAMPP Control Panel (if it isn’t already running), then click the Stop button on the Apache entry. Give it a moment, then click the same button (it should now say Start). If Apache doesn’t start, you’ve made an error in your configuration. Go to Control Panel. Admin Tools, Event Viewer and see if there is a message from Apache that tells you why it couldn’t start up. Hint: you may have made an error in the DocumentRoot specification – I know I did!
So go ahead and create a folder somewhere on your computer – this will be your DocumentRoot. Reference that location in your httpd-vhosts.file, as I’ve shown you above. Set your ServerName to the same name as you entered in your local hosts file. Set the location of the log files if you want to. Now, you should be good to go – but see tip #45129 above!
Restart Apache using tip #45129. If Apache starts up correctly, its time to see if it can serve your first web page.
If everything was successful, congratulations! If not, send me a message with the content of both your httpd.conf file and your httpd-vhosts.conf files and I’ll see what I can do.
To test out our new domain name, you need to create your first HTML page, and to do that, I’ve found a great little editor called NVU. You can download it from http://www.nvudev.com, but that site has been down a few days, so try http://www.download.com/Nvu/3000-2048_4-10412423.html
Install it with the standard options, and fire it up.
Click File | New. Ensure the “A blank document” radio button is the only one selected. Click the Create button.
You’ll see a new window with 4 tabs at the bottom – Normal, HTML Tags, Source and Preview. NVU will default to the Normal tab. For now, just start typing some text.
Now, here’s the biggie. We need to save the content of our new webpage (currently in NVU) to our Apache DocumentRoot folder.
If you are running XAMPP and NVU on the same machine, you can simply save this new HTML document into the folder specified by your DocumentRoot directive. If so, just click File | Save and give it a name like index.html. This is one of the names specified in your httpd-vhosts.conf file for the IfDocument directive – this simply means that someone can type in http://diyws.ath.cx and if one of the document names specified exists, Apache will serve it, otherwise, the web surfer will need to specify exactly which document they want to see. eg: http://diyws.ath.cx/my_first_web_page.html
If you are running XAMPP on a different computer to the one where you’re running NVU, you’ll need to set up the FileZillaFTP service on your XAMPP installation. FTP stands for File Transfer Protocol, and you’ll need to set it up so that you can “publish” documents from your local machine to the machine where Apache is running, then you need to tell NVU how to publish your new HTML document to the DocumentRoot folder you specified in your httpd-vhosts.conf file.
But this is a lesson for another day, and one which you’ll need come the day when you’re away from your actual computer (say, at work) and you need to make changes to your website when you can’t physically be there. Its all possible, but we need to walk before we can run.
Please let me know how you’re getting on, because there is so much extra good stuff available for you – if you can’t get the initial stuff correct, you’re just going to get frustrated, so please, let me know how you’re going. I really want to know.
And later on, we can all help each other by linking to one anothers new websites and get Google to give us some love so web surfers will be able to find our sites. That’s a whole other topic, but stay with me, because I’m going to teach you all this stuff – for free.
This is going to be a whole lot of fun so enjoy the ride, and come visit us on the Facebook group.
Until soon (or before Lesson 7) – send me your feedback by leaving a comment.