08 May 2010

Static Sites with Haml, Sass, and ScriptMatic

I was listening to an episode of the “Herding Code” podcast recently, and they had a guest on who was singing the praises of Haml. Haml is a language for creating HTML documents that is supposedly neater and easier to use than HTML itself. Haml is also packaged with another project called Sass (although either can be used without the other) which is a language for creating CSS documents. Again Sass is supposed to be easier and quicker to write than CSS, but it also supports variables and arithmetic which can be very useful.

Since my website is currently in need of a refresh I thought I’d try using these languages and see how it went.

Haml and Sass are often used with dynamic pages generated by Rails. My site is a simple static affair, and whilst it is possible to run both Haml and Sass from the command line it’s quickly going to get tedious. So, I had a look for a tool to help. My requirements were:

  • Must support Haml and Sass
  • Must have a live preview - automatic regeneration of the site whilst developing
  • Must support partial files - so that common sections can be split out and re-used
  • Must be able to export the site to HTML and CSS when it’s done

I found a few recommendations, but these two seemed to be the closest match to what I wanted:

For no particular reason I’ve gone for StaticMatic.

So, assuming that you have ruby and gem set up, you can get things working, by running the following commands from a terminal window:

  • sudo gem install haml
  • sudo gem install staticmatic
  • staticmatic setup mySite
  • staticmatic preview mySite

At this point you should be able to go to http://localhost:3000 and see the default staticmatic page. Now that the site is up and running we can change it a bit. By default the main files are:

  • src/layout/application.haml - The default template, page content replaces “=yield”
  • src/pages/index.haml - Default index content
  • src/stylesheets/application.sass - Default stylesheet

As you change the Haml and Sass files in mySite/src the site should update dynamically. Once you’ve got things looking how you like run “staticmatic build mySite” to build the html and css files under mySite/site which you can then upload to your live site.