CREATING A LOCAL WEBSITE ON MAC OS 10.5
Easy to follow, with lots of pictures.
For each of my websites, I create a website on my own computer that exactly mirrors the online version. This is a tutorial that shows you how to set up your computer so it works like a webserver. I make all changes on the local website and test them before they are uploaded to remote websites. There are a few other tutorials that will tell you how to create virtual hosts on your Mac, but this is meant for people with little experience who need step-by-step instructions. I hope it is helpful.
NOTE: You can also do this through the command line, using the Terminal, but you probably don’t want to learn Unix right now.
You can also download MAMP, a program that sets up Apache, MySQL, PHP, VirtualHosts, etc. for you and will do much of the work for you. I find doing it "by hand" is easier, though.
What you need to start
You will need to know your short username, usually the name of your "home" folder
You will need to know the password for your user account on your computer.
You created this password when you first set up your computer or installed OS 10.5.
You need a plain text editor. Here are a few popular choices:
- BBedit, a full featured text editor or Textwrangler, the "lite" version are available from Barebones Software
- Coda, also includes ftp, css editor, terminal and many other useful features.
I do not recommend using the TextEdit application, included with all Macs. If you do useTextEdit, you must tell it to use "plain text" only.
It will be much easier to navigate and save documents if you use one of the several good text editors that are available.
Creating a folder for your local website.
Create a folder on your hard drive where your local site will reside. You can put this folder anywhere but I like to stick with the standard OS 10 folders so I put all my local sites in the Sites folder. As an example I have created a folder called "a_new_site". Note that the folder name has no spaces and is all lowercase. Unix, the operating system "underneath" OS 10, is case sensitive and white spaces are considered characters. Your life will be much easier if you develop the habit of naming all website-related files and folders without capitals or white spaces.
Editing the "hosts" file
Open up a disk browser in BBedit, File->New->Disk Browser. It will look something like this:
Now, you will need to navigate to some of the system folders that are usually hidden from view, so you need to tell BBedit to show them to you. Click on the magnifying glass at the bottom left of the Disk Browser and select "Invisible Items".
After selecting "Invisible Items" your Disk Browser should look something like this:
In BBedit’s Disk Browser, navigate to your hard drive.
And then navigate to the folder named "private", then to "etc". You are looking for a file called "hosts". If you don’t see it make sure that "Text Files" is unchecked.
Open "hosts" by double-clicking it.
When you try to edit this document you will see the dialog box below:
You can now edit the "hosts" document. On a separate line write:
then hit "tab" on the keyboard and write the name you wish for the local site. In this example I call it www.newsite.dev (You can call it anything but I usually give the same name as the online site with the .dev ending. It makes it easy to remember).
Next you need to save the file but you will be need to be authenticated as someone who is allowed to change system files and so will be asked for your username and password.
Enter password and click "OK". Close the "hosts" file. You are done with it.
Editing the "httpd.conf" file
Now navigate to a folder called "Apache2". It is in the "etc" folder. Open the file named "httpd.conf". (You may want to save a copy with the default configuration, in case something goes wrong.) Find the line that says "#Include /private/etc/apache2/extra/httpd-vhosts.conf". It will be somewhere between line 450 and line 500. Remove the hash (#) sign to uncomment this line. You will have to unlock this file and enter your username and password to save it, just as you did with the "hosts" file. See images below.
Editing the "httpd-vhosts.conf" file
Next open the folder "extra" and open the file "httpd-vhosts.conf". At the top of page there is an example (that is commented out) of the format for defining a virtual host. Farther down the page copy this format but with your own username, file paths and server name. Using the example, I have created, "a_new_site", the virtual host definition would look something like this:
ScriptAlias /cgi-bin/ "/Users/dwiener/Sites/a_new_site/cgi-bin/"
php_value include_path ".:/Users/dwiener/Sites/a_new_site/cgi-bin/"
The only definitions that are required are "DocumentRoot" and "ServerName". Many other definitions are possible but these will get you up and running. The ScriptAlias, Log paths and php include path are common definitions and are included because they may help you in the long run. As you type this out, be very careful with quotes, white space and returns , they usually matter. Be sure to replace my username, "dwiener" with your username. Save this file. You will have entered your username and password to save it.
Creating the user file
Next, create a new file and add the following text:
Options Includes Indexes Multiviews
Allow from all
Be sure to replace my username "dwiener" with your username. If you have placed your local website in another folder than "Sites" make sure you have the correct path. The "*" means that all folders in the Sites folder will be configured correctly.
Then save this file in the "users" folder in the "apache2" folder, naming it with your username and the extension ".conf", as shown above.
Restart Apache, your Web Server
Last but not least, you need to restart your Mac’s webserver.
Open the System Preferences:
Choose the "Sharing" Preference
Turn off "Web Sharing" by unchecking its checkbox.
Turn "Web Sharing" back on by checking its checkbox.
Making an index file and testing the site.
Before you test this in your browser, let’s make an index file for "a_new_site"
Create a new text file, write something like:
<p>This is my new site.</p>
Call it "index.html" and save it in the folder you created at the beginning of this tutorial – "a_new_site", in this example.
Then open your browser, point it to "www.newsite.dev" (or the server name you have chosen) and you should see:
Be patient with yourself. It probably won’t work the first time you test it. Go back over the files and check for misspellings and incorrect punctuation. When you are troubleshooting be careful to only change one thing at a time. If you change too many things at the same time you won’t know which modification is correct and which one is causing the problem. Also make sure that you restart the web server each time after you have changed one of the system files – "hosts", "httpd.conf", etc.
One more thing
Note: Verizon and some other ISP’s redirect your browser to an advertising landing page that they host, if you type an incorrect url in the browser. Since the url of your local server is only known and used by you, you may see the Verizon error page. This is very frustrating and intrusive. You can opt out of this service by clicking the link below.
Or you can add 18.104.22.168 to System Preferences > Network > TCP/IP > DNS settings. This may vary from region to region. You may have to search Google to find a solution.
Good luck with virtual hosts. I hope I was of some help. Leave a comment