Jekyll for front end development

Not all of our work involves Django or Drupal. Although we love them, there are times when a considerably simplified approach to content management is all that's necessary.

We've recently launched several small sites which don't need to be regularly updated by a large number of editors. In these situations a custom Django application, even an out-the-box Django CMS could be overkill. Drupal similarly might be a sledgehammer to this proverbial nut. Instead, we've turned to a 'Static Site Generator'.

There are several static site generators out there: Jekyll, Hyde, Middleman and more. Jekyll has arguably the larger following and for this reason (among others) is our site generator of choice.

For oxford.geeknights.net, digitaloxford.com and symplectic.co.uk we're using Jekyll's limited, predetermined concept of chronological, related content e.g blog posts, news items etc. The news or blog item can be written without HTML, using markdown or similar, then Jekyll converts it to HTML and inserts the item automatically into the listing of news/blogs on the site. This is pretty much the limit of content management in most static site generators. It's very basic, but it's often all we need.

Behind this we're using Github Pages as the host. Github Pages is a service in which a Github repository is used as the source directory for a website which Github host for you. Pages is particularly handy because it supports Jekyll projects by default. If you commit a Jekyll-configured directory into your repository, Github can compile, deploy and host your Jekyll website whenever you make a "push" request to Github.

If a simpler editing interface than Github is needed, we'd recommend prose.io. It provides a simplified git repository browser with a file editor and new file creator (something that at time of writing Github doesn't provide) that neatly sidesteps detailed command line git knowledge.

Version control, code editor, deployment tool and hosting all rolled into one and for free? Sign me up!

The fun doesn't have to stop here. We use Jekyll for front end projects even when we're not hosting or deploying the site ourselves. And, sometimes not even for websites at all!

Where the deliverables are purely front-end files (HTML, JS, CSS) Jekyll can still help with the templating. We've used it recently generating sets of Campaign Monitor HTML email templates and dynamic maps for the World Economic Forum. Jekyll comes with the Liquid templating engine (from Shopify) so if you're componentising sections of code for reuse over a variety of templates or simply sharing the same header/footer between several similar pages, Liquid helps you with a very simple syntax. 

Our client doesn't necessarily know or care what Jekyll is in this instance. What matters is that our code is maintainable and modular and this translates to clear benefits to everyone.

Previously front-end developers might have delivered HTML mixed with PHP or Apache SSIs - they would have needed some kind of "include" technology during development. They'd probably deliver the files to the client as they are, accompanied with documentation about installing the require software and caveats about how the HTML they've delivered isn't actually complete without Apache/PHP so can't be double-clicked to be viewed. All in all, it wasn't a particularly satisfying experience for the client or developer.

With Jekyll we're delivering complete, static HTML pages which can be launched straight away or drag-dropped into the browser. When reviewing files is this simple, quick sign-off, rapid iteration and design in the browser becomes more realistic too.

Interestingly President Obama's 2011/12 fundraising campaign was recently blogged about by Kyle Rush and it turns out they too were using static site generators - specifically Jekyll - at the core of their technology stack.

What's clear from our experience and Kyle's is that having the right tools for the job is vital and Jekyll has become an invaluable tool in our box.