Mac OS X Web Server Tips for Designers, Part 1

OK, so you're a Web designer. Perhaps it's all you do, or perhaps it just a small part of what you do, but wherever you happen to be on the Web design food chain, you can definitely benefit from setting up and using the Web server that is included with every installation of Mac OS X. And while many of you may already have the server running, there's a lot more that could conceivably be done to soup things up a bit.

Tip #1: Learn the basics

You already know that the Mac OS X Web server is based off of the open source Apache Web server, right? Well, even if you didn't, you'll figure it out the first time you enable the server and look at your computer's home page (fig. 1). Now, if you're not yet in the know, the immediate and obvious issue would be how one would even enable the server in the first place, if one were so inclined. While I suspect that this is redundant information for many of you, in the interest of being thorough, let's go through it real quick (and please note that these instructions are for Mac OS X 10.4 "Tiger," but should be similar on earlier versions):

1. Launch System Preferences from the Apple menu
2. Click the Sharing icon
3. Select the Services tab
4. Check the Personal Web Sharing box (fig. 2)
5. There's no step 5

Figure 1

Figure 2

That's it folks—your Mac is now serving Web pages. If you're satisfied with just turning the server on, you can stop right there. However, since you've probably gotten this far on your own already, you might as well stick with me here as we go over a couple more of the basics. Let's move on to where Mac OS X keeps pages. There are actually several places to stash your pages:

1. In the Sites directory of your Home folder (fig. 3)
2. In the Sites directory of any other user of your system
3. In the /Library/WebServer/Documents folder

Figure 3

The first two are only accessible (in this context, "accessible" means "writable") to individual users, but the last one is available to anyone with admin privileges on your machine. So feel free to dump whatever Web content you like in those areas (assuming you have access, of course). Still with me? Good. One last bit of elementary knowledge: now that the server is active, and you know where your pages are, I suppose you want to know what the URL is to your machine. There are actually four(!) things you can put into the address field of your Web browser to access your server:

1. http://localhost/
2. http://127.0.0.1/
3. The IP address of your system (e.g., http://192.168.0.2/)
4. The Computer Name of your system (e.g., http://ComputerName.local/)

Now, for others on your network, only the latter two are acceptable, since the first two only apply to your host machine (but if you click on either of the first two, you'll be taken directly to your own server). Otherwise, all four are completely interchangeable. Please note that those addresses will take you directly to the /Library/WebServer/Documents folder mentioned earlier. To access the individual user directories, you'd append a tilde and the short username to the address. So, for example, if I wanted to access my own directory on my machine using the fourth type of URL, the address would be:

http://malibustacy.local/~kschmitt/

If I actually go to that URL, I'd get Figure 4.

Figure 4

Makes sense so far, right? Anyway, that's Web server 101 for Mac OS X. Congratulations; you all passed. Let's move on.

Tip #2: Get to know your conf file

For some of the upcoming tips in both this and the next installment, we're going to be playing around with the Apache httpd.conf file. I know, I know; I can practically hear the sound of eyes glazing over at the mere thought of messing with configuration files, but I promise to keep this as painless as possible (read: we aren't going to go anywhere near the Terminal). You will need two things, however. One, you're going to need admin privileges on your machine, or else you won't be able to do any of this. Two, you'll need a text editor, but to really make this simple, you'll need either TextWrangler (free) or BBEdit (uh, not free), because you'll be able to edit the configuration file directly from either of those two programs. So, if you don't have either one, do yourself a favor and head to the Bare Bones Web site to at least download TextWrangler. Once you've got it up and running, you'll be ready to roll.

Now, the first question some of you may have is just what this httpd.conf file is and why you should care. The answer to the first part of that question is that the httpd.conf file is the main document which controls every aspect of how Apache serves pages. And I suppose you don't have to care, but I will offer that if you want to do anything above and beyond what the Mac OS X Web server does in its default state (like work with PHP), it behooves you to at least be familiar with the few parts of the httpd.conf file that are worth being familiar with. So let's get at this sucker. The first thing we need to do is actually figure out where the httpd.conf file is, since Mac OS X places it (rather unhelpfully) in a hidden folder. To draw it out, so to speak, we need to head first to the Finder. Spawn a new Finder window (Command+N) and select the Go To Folder option from the Go menu (or Command+Shift+G). Then type /etc/httpd/ as the destination (fig. 6), which will open up the directory where the config file is.

Figure 6

Taking a peek inside the httpd directory, there are three files of interest:

1. httpd.conf
2. httpd.conf.bak
3. httpd.conf.default

Figure 7 shows how they appear in the Finder:

Figure 7

The first one, httpd.conf, is what we're going to edit. The other two are backups: httpd.conf.bak is a temporary version, and httpd.conf.default is the "factory installed" version of the configuration file that you can revert back to as a last resort. It's a good idea to copy and paste the contents of httpd.conf into httpd.conf.bak (in BBEdit or TextWrangler) before you make changes, just so you'll have a fallback in case things go completely awry. By the same token, you can always copy the contents of httpd.conf.default into httpd.conf if you ever need to start completely fresh and revert back to the way your Mac was originally configured to serve Web pages.

The next thing to do is open both the httpd.conf file as well as the httpd.conf.bak file in TextWrangler, so launch TextWrangler, select the two documents, and drag them onto the icon in the Dock (fig. 8).

Figure 8

Just to be on the safe side, let's copy the contents of httpd.conf into httpd.conf.bak. Once you've copied and pasted the text (TextWrangler will throw up a dialog box asking you whether you want to unlock the file; choose Yes as shown in Figure 9), save httpd.conf.bak (TextWrangler will then ask you for you admin password to do so) and close it, leaving only httpd.conf open. Remember, if you get in a bind from here on out, you can always restore httpd.conf either to the beginning of your session using the copied contents in httpd.bak.conf or, in case of total disaster, restore to the factory state using the contents of httpd.conf.default.

Figure 9

Now, if you've done any scrolling of the gargantuan httpd.conf file, you'll notice there's a ton of stuff in there. Some is self-explanatory, some is easy enough to figure out, and some of it is definitely not for the faint of heart. Fortunately, for all the tips that follow, we're going to be ignoring the vast majority of it, but for now, I issue congratulations on your successful initial foray into the formerly-dreaded httpd.conf file.

Tip #3: How to move the Document Root directory

Remember waaaay back in Tip #1 where we discussed where your pages are stored? Well, it may be the case that the /Library/WebServer/Documents folder wouldn't be your first choice for a convenient place to centralize all this Web server fun. Fortunately, there are two ways you can change it if you so desire. The second way we'll get to next time (I'm a tease like that), so today we'll concentrate on using your newfound httpd.conf editing know-how to change where Apache looks for your Web documents. Sound good?

The first thing to do is decide where you want your new Document Root folder to reside. For me, I have a second partition on my hard disk called Data, and I want my Document Root to be there. So, I'm just going to create a new folder, which I'll call DocRoot (fig. 5).

Figure 5

Next, open up the httpd.conf file using the method we went over in the last tip. Now, since TextWrangler doesn't have the helpful line numbering that BBEdit has, we'll need to use the Find and Replace panel to get at the particular snippet of text that we need. Select Search:Find from the menu bar (or hit Command+F), which will open up the Find and Replace panel. Enter in the term "DocumentRoot" (without quotes) and hit the Find button. You should be taken about a third of the way (or so) through the httpd.conf file, where you should see a line like this:

DocumentRoot "/Library/WebServer/Documents"

Look familiar? It should—it's the same directory we've talked about several times already. So all we need to do now is enter in the correct Unix path to the desired directory. In this case, I'm going to give the path to my DocRoot folder I created a while back. That same line should now look like this:

DocumentRoot "/Volumes/Data/DocRoot"

In case you were wondering, the "Volumes" part comes from the fact that we're targeting a separate partition. Now, one might think that we're done, but no. In the section where specific features are enabled, the DocumentRoot needs to be set again, so as it turns out there's a second line that we need to do the same thing on. If you scroll down just a few lines you'll come across some text that reads:

# Note that from this point forward you must specifically allow
# particular features to be enabled - so if something's not working as
# you might expect, make sure that you have specifically enabled it below.
#

#
# This should be changed to whatever you set DocumentRoot to.
#
<Directory "/Library/WebServer/Documents">

That last line there is fairly self-explanatory, so, as it helpfully says, we need to also change that line to /Volumes/Data/DocRoot. Now that the changes have been made, the server needs to be restarted, which is done by clicking Stop and then Start in the Services tab of the Sharing Preference Pane (take a peek at Figure 2 again if you need a visual). Once the server is running again, head for a Web browser and visit your site using any of the URLs mentioned earlier. The result should be something like Figure 10:

Figure 10

Obviously, something is very different when compared to Figure 1. What we need to do is throw a default page in there and reload the browser. So, navigate to wherever your DocRoot folder is and just stick in any HTML page you have lying around in there. Just make sure to rename it index.html (we'll explore how to change that in the next segment), and then reload (fig. 11):

Figure 11

And, as a master illusionist like Gob Bluth might say, ta-da. That seems like a good stopping point for today. Next time, we're going to go through the second method for changing your Document Root directory, as well as learning how to enable server-side technologies such as PHP and SSI, among other things. Until then, everyone!

Filed under: Tutorial on April 28th, 2006

^ Top of Page

Got Feedback? to send an email. I'll do my best to answer. Really.