Random Inconsequential Thoughts

Using Haml With Jekyll

While I have been working on my Jekyll workflow, I’ve come across one big annoyance: all of the methods of integrating Haml layouts into my workflow have one of two undesirable side effects.

  1. They leave html files lying around my source folder. Ideally, the html should be generated into some temporary staging area as needed
  2. They don’t integrate well with the auto-generation cycle for quick turnaround while modifying the site content.

I’ve been using the jekyll_ext gem for a while now. The aspect-oriented approach lets me go above and beyond the existing plugin architecture without having to fork jekyll itself and maintain my own changes. One of the pre-existing extensions that I tried to use was the haml-jekyll-extension. It would be executed as part of the automatic regeneration step each time I changed a haml layout file and I could preview the changes instantly without manually rebuilding the site. I didn’t like that it also tried to handle the s{c|a}ss for you. I’m using compass for that. I also didn’t like that it generated the html files right alongside the haml source files. A litle bit of hacking gives you this code. I have modified the extension to only handle .haml layout files, and they generate into the _cache folder.



I didn’t change the actual generation code much other than to change where it generates the html files, but I want to highlight the extension code for anyone who might not be familiar with how it works. All you really need to know is that it generates the html into the cache/_layouts folder.

  • Line 38 tells jekyll_ext that you want to run this code around the specified method, not simply before or after. This allows you to control more precisely where in the code flow you want the original behavior to execute. I wanted to wrap the read_layouts function of the Site class to change the location it will load the html layouts from.
  • Line 39 calls the haml generation code from earlier in the class. This will generate the html layout files into _cache/_layouts
  • Line 40 saves off the existing source configuration so we can restore it later.
  • Line 41 sets the source location to our _cache folder.
  • Line 42 calls the existing read_layouts method. The proceed object passed to us in the block is a Proc object representing the original method. The read_layouts method will look in the configured source folder for a folder named _layouts and read the html layouts from there into Layout objects. This is why we changed the source folder earlier – we want to make read_layouts read from the _cache folder rather than the existing source folder.
  • Line 43 sets the source folder back to the value we saved earlier.
  • Line 44 returns the result of the read_layouts call.

The great thing with this approach is that we don’t clutter our source folders with both source and generated content, something I really hate. When I edit a Haml layout, it gets regenerated and used to generate the rest of the site in --auto mode.

I hope this helps someone out there… I hope to have a compass plugin that works the same way. I really want to be able to quickly iterate on my styles without having to constantly kill and restart the jekyll server.

UPDATE
My compass extension is now ready as well.

Comments