Just this last August, I decided to relaunch my web site; I chose to give WordPress the flick and try out Jekyll, a Ruby-based static site generator. Jekyll? In the documentation it’s described thus:
Jekyll at its core is a text transformation engine. The concept behind the system is this: you give it text written in your favorite markup language, be that Markdown, Textile, or just plain HTML, and it churns that through a layout or series of layout files. Throughout that process you can tweak how you want the site URLs to look, what data gets displayed on the layout, and more. This is all done through strictly editing files, and the web interface is the final product.
Jekyll is a blog-aware, static site generator. It uses a set of template or layout files, the associated CSS files, and plain text files for the posts. The posts can use the Markdown format or another similar markup language. Jekyll grabs the post markup and inserts it into the layouts, spitting out standard HTML markup—along with linked files (any CSS, JavaScript, images, and the like)—ready for you to upload to your web server. There’s no content management system, no database, and no specific language support on the web server required—your site is a collection of plain old static HTML files.
Switching back to static markup may at first seem like a reversion to the late 1990s. Yet Jekyll is a simple and elegant system that mimics the characteristics of a dynamic site—drawing content from a database and inserting it into templates via a CMS—without all that complexity. As a firm believer in the KISS principle (Keep It Simple, Stupid), I always try to find the right tool for the job, and Jekyll is a simple solution to a common problem: “I want my own customized blog.” It’s also flexible enough that it can easily be used for other tasks. For example, GitHub uses it to drive GitHub Pages.
This article describes using Jekyll to build a web site: from downloading it, setting up a development environment, and hacking up template files. I’ll conclude with a word on maintaining updates between your development instance (for example, new blog entries) and synchronizing them to your web server. Note that I’ve written this piece from a designer’s perspective. Although I had a number of technical hurdles to hop over, Jekyll remains rather simple; for instance, using Jekyll’s template system and Liquid tags is easier than hacking a design as a WordPress theme. Never fear, I intend this article to be as designer-friendly as possible.
Setting up a Jekyll blog is relatively smooth-going and boils down to a few straightforward steps.
Jekyll is written in Ruby, so you’ll need to install it. It’s as simple as downloading the latest Ruby version for your platform and following the installation instructions. The Ruby installation also includes the RubyGems packaging system, and allows you to download and install other Ruby libraries and programs. If you’re using Windows, choose the one-click installer, and make sure you tick the Enable RubyGems option when running the installer.
We’ll be fetching Jekyll from the Gemcutter RubyGem hosting repository, but we first need to install the Gemcutter program.
If you’re on Mac OS X or Linux, open a command prompt and enter the following commands:
$sudo gem install gemcutter⋮ Successfully installed gemcutter-0.1.71 gem installedInstalling ri documentation for gemcutter-0.1.7...Installing RDoc documentation for gemcutter-0.1.7...$sudo gem tumble
The tumble command will simply make the RubyGems installer query the Gemcutter repository first, when downloading RubyGem packages. This ensures that Jekyll is downloaded from the Gemcutter repository.
Now we can download and install Jekyll:
$sudo gem install jekyll
If you’re on Windows you’ll be entering the commands at the Windows command prompt ( > and enter cmd):
C:>gem install gemcutterC:>gem tumbleC:>gem install jekyll
Jekyll, like all good software, is modular and does one task very well, relying on other programs and libraries for additional functionality—after all, why reinvent the wheel? This modularity also gives us choice: you can pick and choose from a variety of slightly different tools that perform similar tasks to extend Jekyll, depending on your preferences. For example, if you’d rather write your blog posts in Textile instead of Markdown, you can. For me, however, the default (Markdown) does the trick, and Gem only needs a small number of other dependencies, which are fetched automatically.
For a full list of available gems that extend Jekyll, see the list within the install instructions for Jekyll on GitHub.
Simon Pascal KleinPascal is a standardista graphic, web and front-end designer, and a rampant typophile. Born in Mainz, Germany—the birthplace of Gutenberg—he now works in Canberra as a contract designer and studies at the Australian National University. He's been actively engaged in the Open Source community and local web industry, notably as one of the unorganisers to first bring BarCamp to Canberra. He enjoys drinking in as much good type as he can get and has been happily bending beziers since 2004.
