Create Virtual Host on Mac 10.5

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
  • Textmate
  • 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.

TextEdit Choose Plain Text

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.

New Site Folder

Editing the "hosts" file

Open up a disk browser in BBedit, File->New->Disk Browser. It will look something like this:

bbedit disk browser

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".

bbedit show invisibles

After selecting "Invisible Items" your Disk Browser should look something like this:

bbedit

In BBedit’s Disk Browser, navigate to your hard drive.

bbedit navigate

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.

bbedit show all files

Open "hosts" by double-clicking it.

hosts file

When you try to edit this document you will see the dialog box below:

hosts unlock

Click "Unlock".

You can now edit the "hosts" document. On a separate line write:
127.0.0.1
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).

hosts file

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.

bbedit save

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.

Before
httpd.conf

After
httpd uncomment

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:

<VirtualHost *:80>
DocumentRoot "/Users/dwiener/Sites/a_new_site"
ServerName www.newsite.dev
ScriptAlias /cgi-bin/ "/Users/dwiener/Sites/a_new_site/cgi-bin/"
ErrorLog "/private/var/log/apache2/newsite.dev-error_log"
php_value include_path ".:/Users/dwiener/Sites/a_new_site/cgi-bin/"
</VirtualHost>

httpd_vhosts

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:

<Directory "/Users/dwiener/Sites/*/">
Options Includes Indexes Multiviews
AllowOverride All
Order allow,deny
Allow from all
</Directory>

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.

virtual hosting

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:

system preferences

Choose the "Sharing" Preference

preferences Sharing

Turn off "Web Sharing" by unchecking its checkbox.

web sharing off

Turn "Web Sharing" back on by checking its checkbox.

Web Sharing On

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:

local site in browser

Be Patient

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.
Opt out

Or you can add 68.238.0.14 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

 

Good luck with virtual hosts. I hope I was of some help. Leave a comment