The architecture of this site

Recently, I presented this site at the Madison (WI) Drupal meetup and promised to put in writing my comments on its design, as well as post the code for the theme that I used. Read on if you are interested in the details of how I built this site.

Architecture

This site runs off of the Drupal content management system. The last time I did any serious web development, CSS had just come on the scene and most personal sites were drawn up from static HTML. Therefore, I was very surprised when I started my research for this site and saw the number of quality systems that let you focus on your content (blog posts, products, news stories, etc.) and that handle all the HTML formatting and processing details. These so-called content management systems make it easy for you to post new items to your site, interact with others, and even handle e-commerce transactions. It's not that I couldn't hand-code everything to keep it up to date, but I've found that the easier it is to do something, the more likely I am to do it.

I settled on Drupal as the system for the site after evaluating several others, including Expression Engine, Joomla, or a custom solution written in Ruby on Rails. All competing solutions had their advocates and impressive sites based on their platforms. I chose Drupal because of the sizable and active community around it, the evidence that it scales to large traffic loads (Lullabot has a podcast interview with Leo Laporte about using Drupal for the high-traffic Twit.tv site that's a good listen), its open source nature, and its reliance on web standards and technologies such as PHP and MySQL that I was familiar with. The existence of a tremendous number of contributed modules that add significant additional functionality to the platform was a nice bonus.

I went with Drupal 6, the latest release of the system, even though some of the more important modules have not been ported across from Drupal 5. My site requirements are not too demanding right now, and I was willing to work around any issues with beta-level modules in order to take advantage of the better performance, increased ease of use, and new features of Drupal 6. I also didn't want to build a Drupal 5 site, only to have to go through the upgrade process in a few months when everything stabilizes.

This site is currently hosted on Media Temple's Grid-Service, but I'm not happy with the performance that I'm getting. The site is not heavily trafficked, and it appears initial connections to the MySQL database take an extremely long time after the site has been sitting idle for a while. This may go away with some of the work they are planning in the next month or so or with an increase in site traffic, but I'm disappointed with the service after all the glowing recommendations it gets.

Modules

As I said earlier, Drupal has a number of contributed modules that add capabilities to the underlying system. The following is a list of those that I have installed on my site:

• Content Creation Kit (CCK) - One of the most important modules, CCK allows for the creation of custom content types, such as the publications and patents you see listed in my biography page.
• Views - Views is another powerful module that often goes hand-in-hand with CCK and allows you to design custom views for your content. These views are analogous to database queries in that you can search out and display content that meets certain criteria.
• Advanced Forum - The built-in Forum module does not format discussion forums in the way that most users are accustomed to, so Advanced Forum provides layout options that create forums similar in structure to phpBB or vBulletin.
• Archive - The monthly archive of posts, displayed on the right-hand-side of this site, is provided by this module.
• Blog API - This module is part of the Drupal core, but I thought I'd call it out because it allows you to use clients such as the excellent MarsEdit to post content to your site through a standard API.
• GeSHi Filter - I wanted to use source code in some of my posts, and the GeSHi filter is a PHP library that does on-the-fly syntax highlighting for many languages and APIs, including Cocoa.
• Image and Image Attach - Currently, I'm using the Image module for the images you see in blog posts and the like, but that may change as some of the CCK-based image modules are ported across to Drupal 6.
• Lightbox2 - The neat JavaScript zoom-out effect you see when clicking on an image in a blog post, such as this one, is generated by Lightbox.
• Mint - I use the Mint visitor statistics tracking package, because I like its clean interface and how it lets me determine at a glance how much traffic is coming to my site and from where. This module cleanly integrates Mint with Drupal.
• Pathauto - The clean, human-readable URLs you see for the blog posts and for other content on the site are automatically generated by Pathauto.
• PNG Fix - Internet Explorer 5.5 and 6.0 have a known problem where they are unable to display transparency in PNG images, such as the one I use for my logo. This module provides a hack that will fix the rendering on those browsers.
• Quote - Commenters may wish to quote portions of a post or another comment. This module gives them that capability.
• CAPTCHA - As a minor anti-spam check, I use CAPTCHAs to verify a new user is human before they can register to comment.
• XML Sitemap - You can enable more efficient indexing of your site via Google by setting up a site administrator account and submitting an XML sitemap. This module does all the heavy lifting for you in that regard.

Theme

I designed a custom theme for this site to give it a unique identity. Most sites you find out there tend to have a white, or light, color scheme, but I actually prefer a darker look. My CSS skills were nonexistent, so I looked through a number of templates to find aspects of their design that I could "borrow". A few places that I'd recommend as starting points are

• The CSS Zen Garden - A site where people are challenged to come up with wildly different layouts for stock HTML using only CSS.
• Open Designs - A site with many CSS-based themes for web sites, all freely available. I found a lot of inspiration at this place in particular.
• drupal6themes.com - A place where Drupal 6 themes can be tested out on stock HTML to determine whether they are worth downloading and picking apart.
• drupalmuseum - A showcase for many of the great-looking Drupal sites out there on the Internet.

At the advice of others, I started with the Zen theme, a very clean Drupal theme that generates enough markup to make an entirely CSS-based theme practical. I created a subtheme following these instructions, which are pretty straightforward. I then did what I could to re-theme the site using CSS only (with the aid of CSSEdit, another tool that I highly recommend). I had to override some system CSS in order to make tables and administrative controls legible in a dark theme. Custom CSS files can be included and / or you can specify system CSS files to override in the theme's .info file, a central configuration file that lets you lay out the aspects of the theme.

Unfortunately, CSS alone did not give me the exact look that I wanted. One particular example is on my biography page, where custom markup needs to be generated for the citation-type summaries of patents, patent applications, and publications, as well as the full nodes that contain the abstracts and PDF versions of the references. For that, some custom PHP code was required. Drupal 6 makes this very easy, as it allows you to create files such as node-patent.php for overriding the rendering of specific node types, among other functions.

My custom theme is attached to this post. I apologize for the messy CSS and PHP, as I'm just learning the ins-and-outs of CSS and Drupal. Hopefully, this theme and writeup will be of some use to you.