→ Static Sites with Mustache

24 November 2009

I just spruced up http://defunkt.github.com/ by removing most of the text on the home page and adding two new pages: projects and contact.

While the two new pages are static, I didn't want to have to deal with large amounts of mostly identical HTML. I also didn't want to deal with Liquid. So I used Mustache.

As of 0.5.0, Mustache ships with a mustache command line utility. Given a Mustache template with YAML frontmatter, the tool will render the template and print the result.

Like so:

$ cat data.yml

names: [ {name: chris}, {name: mark}, {name: scott} ]

$ cat template.mustache

Hi !

$ cat data.yml template.mustache | mustache Hi chris! Hi mark! Hi scott!

For the projects page I created a projects.yml describing my code and a projects.mustache template. You can view both projects.yml and projects.mustache on GitHub.

To produce a complete projects.html file, I run my YAML and Mustache files through mustache and save the result:

$ cat pages/projects.{yml,mustache} | mustache > projects.html

Almost perfect. Now all we need is to generate projects.html whenever our YAML or Mustache files change. For this we use the kicker gem:

$ gem install kicker -s http://gemcutter.org
$ export buildprj="cat pages/projects.{yml,mustache} | mustache > projects.html"
$ kicker --no-growl -e "$buildprj" pages/projects.{yml,mustache}

Now any changes to projects.yml or projects.mustache will rebuild projects.html - we can tweak a file, save it, then hit "reload" in our browser without missing a beat.

Wrap these into a few simple Rake tasks and suddenly you've got a nice way to generate and maintain static sites with Mustache.