XSLT Website Templates

14 Dec 2007

This article describes the advantages of a static website over of a dynamic one, and outlines the use of XSLT style sheets and XML templates to generate webpages with consistent appearance and global contents. [Hint: you’re looking at one.]

Everyone seems to write a blog these days. Most bloggers either use a free blog hosting service like MySpace or LiveJournal or run ready-made weblog software like WordPress or Movable Type on their own servers. Using a free host isn’t an option for me since I need full control over backups and style of my webpages. And also that’s too easy :-). So about a year ago I subscribed to one of Webnames’s web hosting services and I’ve been using WordPress since then. I now feel that this is an inefficient and inconvenient solution for my needs.

The problem is that my website isn’t really a blog! It’s updated only occasionally. Comments and pings are turned off. Entries are typically quite long, and therefore unsuitable for display with other entries on the same page. Category indices are more useful than “calendar” indices. In other words, I don’t really need any of the benefits of generating webpages dynamically on the server! When I do the price I pay is the inefficiency of running a website on interpreted code, accessing a database system.

The same problem exists for hosting a photo gallery. I’ve been using Gallery 2, which, like WordPress, runs PHP code on the server and stores images and their information in a MySQL database. That has to be a even bigger overkill for just posting a few photos! Again, the gallery isn’t updated that often. The set of webpages don’t change that drastically. And certainly, it’s more effective to generate reduced images and thumbnails statically instead of dynamically.

A static website has the following advantages over a dynamic one:

  • Efficiency. No interpreted code. No database access.
  • Better tools. I can use a text editor such as Emacs or TextWrangler to create and preview my contents. In WordPress, blog entries are typed into a dialog box in the web browser. The save and preview operations are very slow.
  • Easy maintenance. I keep an image of the website on a local machine. This also serves as backup. I edit and preview locally. And I use the mirror -R command of lftp to upload.
  • Security. No executable code on the server means the website is impossible to spam, and much harder to hack into.
  • Simple hosting requirement. I can return to using the webhosting service already provided by my ISP.

A useful feature of weblog software is that a different choice (or customization) of a theme changes the appearance of every page in the entire blog. Also information that appears on every page such as the header, footer, and navigation (e.g., a “blogroll”) can be changed globally. For a “traditional” static website, pages that are affected by such a change must be regenerated and uploaded. This can of course be automated using a macro processor and a file synchronizer. But is there a better way?

The answer is yes, and one solution lies in XSLT. XSLT is a language for transforming XML documents into other XML documents. In this case it is used to convert information stored in a set of XML documents into an XHTML document (i.e., the webpage).

Study the pages on this website (they’re already online!) to see how everything is set up. For example, to add the current article, I edited the file articles.xml and added an article element for this article. The children of that element describe the article’s title, its file location, the date it’s written, its categories, and its abstract. I then created the file index.xml at the specified location which contains the text you’re reading in XHTML. That’s everything I need to do for each new article!

All major web browsers supports XSLT. When your web browser loads the index.xml file, its header says it should be processed through the article.xslt XSLT style sheet. That style sheet loads another style sheet page-template.xslt, which generates the header, footer, and navigation column of the webpage. Links in the navigation column come from the files articles.xml and links.xml. The generated webpage links to a number of CSS style sheets, which control its fonts, color, layout, etc. Note that all processing is done on the client side by the web browser!

The file articles.xml serves two additional purposes: the generation of the article indices (either complete or for a given category, e.g., Programming), and the generation of the news feed rss.xml. These translations are specified in the XSLT style sheets articles.xslt and rss.xslt, respectively. RSS readers typically don’t process XSLT so the rss.xml file is generated locally from rss-gen.xml using xsltproc and uploaded to the server.

This way of organizing a website allows contents to be added, modified, or removed very simply while the necessary changes will “propagate” to all the webpages. And it does so without using a server-side scripting language and database system! It also provides a nice mode of web authoring: create and edit your webpages to your heart’s desire locally on your computer, and upload them only when they’re ready. No, web applications don’t appeal to me :-). In that way it’s similar to how one would use iWeb. Now if only someone will write a WYSIWYG web authoring application that generates XSLT :-).

Category: Programming