With Safari, you learn the way you learn best. Get unlimited access to videos, live online training,
learning paths, books, tutorials, and more.

1.11. Building an Easy-to-Maintain Web Site with Free Tools

Problem

You need to set up a small web site and are willing to sacrifice
some customization options in favor of saving money and getting it
online quickly.

Solution

Employ a combination of free or inexpensive resources available
on the Web to build a low-cost site that's easy to maintain. The
ingredients for this Recipe are:

A domain parked at a registrar that allows you to forward
requests for the domain to another URL

A small amount of free hosting space provided by your
internet service provider, school, employer, or other reliable web
server operator

One or more blogs hosted by Blogger (or another free blogging service)

A free Flickr account for storing and sharing images you
want to display on your site

A free del.icio.us account for managing links on the site,
including its navigation

A Google-based site search form

Discussion

Although the rest of this book is devoted to in-depth solutions
for building a substantial, highly customized web site, there are
times when you need to get something online fast, cheaply, and under
control. Fortunately, a slew of free or inexpensive web services have
become available recently (some referred to under the banner of
Web 2.0) that make doing so fairly easy.

As I explained in Recipe 1.1, web sites start with a domain
name. Expect to pay $5 to $10 for a one-year registration, although
you may find a cheaper deal for a domain in one of the newer top-level
domains (such as .info or
.biz) if you shop around. For this Recipe, I
registered the domain dougaddison.info at
GoDaddy.com (http://www.godaddy.com). When choosing a
registrar for the site, make sure you can "park" the domain on their
DNS servers for free (or a nominal fee) and forward requests for the
domain to another URL. In addition to free parking and forwarding,
GoDaddy also lets registrants "mask" the forwarded domain, which means
that the browser location window will always display the domain name
(dougaddison.info), even though the pages
themselves will be served from another URL.

Next, you'll need to find a small amount of hosting space for
the site. I found mine through my internet service provider—SBC—who,
through a partnership with Yahoo!, gives its customers a free
GeoCities account with 15MB of disk space. The GeoCities control panel
also has a web-based file manager for uploading and editing web pages
stored on the account (see Figure 1-1). In my GoDaddy
control panel, I set dougaddison.info to forward
to geocities.yahoo.com/daddison@swbell.net. Because I
also instructed GoDaddy to mask the domain, visitors to the site will
never see the GeoCities address.

Tip

For a design, I turned to another free online resource—the
Layout-o-Matic at inknoise.com. Chapter 3 features additional
resources on layout and color, including additional free resources
for downloading pre-coded design templates and color schemes.

A free Blogger account solves the content management problem.
With its user-friendly web-based writing and editing interface,
Blogger's blogging tools circumvent the need for your less
computer-savvy site contributors to set up an FTP client and
understand the process of uploading files to the web server. Blogger
also offers a variety of design templates for displaying your blog at
an address on their server (i.e.,
dougaddison.blogspot.com). But for this site, you
will self-syndicate an RSS feed from your blog
and display it on a page that you upload just once to your free hosting space. See Recipe 6.7 for a discussion of
three methods for doing this.

Self-syndication will be the key to adding navigation and images
to the site, and free accounts with del.icio.us and Flickr will
provide the tools for doing so. As darlings of the Web 2.0 movement,
Flickr and del.icio.us are leading the way in opening the web to new
ways of managing images and links on the web. The tagging features of
both services—dubbed folksonomy for their
grass-roots inversion of traditional top-down categorization, or
taxonomy, of online resources—enable novel and
inspiring ways of communal publishing and sharing with the web.

At the most basic level, del.icio.us is an online bookmark
storage service. With it, you can ditch the bookmark list that your
browser saves on your PC's hard drive and have access to your favorite
sites from any browser on any computer that you use. You also can
define your own system for categorizing your bookmarks with one or
more tags that you assign to each bookmark you add to your del.icio.us
account. Flickr works in a similar way, but with images. A free Flickr
account provides 20 MB of image-upload storage each month, as well as
tools for tagging individual images, generating code for displaying
them on another web site, uploading images automatically from your
cell phone's camera, and posting the images with a short description
to a blog hosted by another service (including Blogger).

Best of all for your fast, cheap, and under control site, both
del.icio.us and Flickr generate RSS feeds for each tag that you
define. So in my del.icio.us account I defined two tags for the links
I want to display on the site: "sitenav" for the internal links and
"sitelinks" for other web sites that I want to link to from
dougaddison.info. Then, I plugged in the self-syndication code for the
two tag feeds into the pages where I want those links to appear:
"sitenav" in the sidebar of every page and "sitelinks" on my Links
page (see Figure
1-2).

Likewise with Flickr, I created a tag called "worksamples,"
uploaded some screenshots of web sites I've worked on recently along
with a short description, then copied the self-syndication code
generated by a tool described in Recipe 6.7 onto my Work Samples page.
Alternatively, you can post Flickr images to your Blogger blog
directly from Flickr (which will cause images and your other text-only
posts to be displayed together) or create a second images-only blog on
your Blogger account, post your Flickr images to it, and then display
those posts separately on a different page.

Finally, you can easily add a site-wide search tool with a free
tool from Google or copy the code below and replace YOUR DOMAIN NAME with your domain: