Recipe 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 providerSBCwho, 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/[e-mail]. Because I also instructed GoDaddy to mask the domain, visitors to the site will never see the GeoCities address.

For a design, I turned to another free online resourcethe 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.

Figure 1-1. Free web space from GeoCities comes with a web-based file manager for uploading and editing web pages

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 servicesdubbed folksonomy for their grass-roots inversion of traditional top-down categorization, or taxonomy, of online resourcesenable 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).

Figure 1-2. My quick, basic site uses free tools from Blogger, Flickr, del.icio.us, and Google

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:

 <!-- SiteSearch Google --> <FORM method=GET action="http://www.google.com/search"> <input type="hidden" name="ie" value="UTF-8"> <input type="hidden" name="oe" value="UTF-8"> <TABLE bgcolor="#FFFFFF"><tr><td> <A HREF="http://www.google.com/"> <IMG src="/books/2/2/1/html/2/http://www.google.com/logos/Logo_40wht.gif" border="0" ALT="Google"></A> </td> <td> <INPUT TYPE="text" name="q" size="31" maxlength="255 "value=""> <INPUT type="submit" name="btnG" VALUE="Google Search"> <font size="-1"> <input type="hidden" name="domains" value="YOUR DOMAIN NAME"><br><input type="radio" name="sitesearch" value=""> WWW <input type="radio" name="sitesearch" value="YOUR DOMAIN NAME" checked> YOUR DOMAIN NAME <br> </font> </td></tr></TABLE> </FORM> <!-- SiteSearch Google --> 

See Also

For more information on the techniques described in this Recipe, see Recipes 1.1 and 6.7. To sign up and begin using the free tools, visit del.icio.us (http://del.icio.us), Blogger (http://blogger.com), Flickr (http://flickr.com), and Google Free WebSearch (http://www.google.com/searchcode.html).