Converting a static site from Middleman to Yeoman

This one time I inherited a static website built with Middleman. Middleman has the best of intentions, but I couldn’t get it running well. Some of its gem dependencies could not run on Windows, and I couldn’t get the live reload functionality working through Vagrant‘s port forwarding. I made the decision to change stacks.

To Yeoman we go!

I knew I could run Yeoman under Windows or a Linux virtual machine, and there were grunt-contribs to do everything I needed from Middleman and more.

I started with the basic webapp generator generator-webapp. Once it scaffolded all its stuff out, I started moving my compiled and source Middleman files into its directory structure. Live reload worked great right away. I installed grunt-contrib-sass to compile the stylesheets the Middleman site used. After pinning jpegtran-bin to version 0.2.0 in package.json, image minification worked reliably on Windows. Smooth sailing until…

HAML to Jade

The trickiest part was moving from HAML based templates to… something else. At first I tried compiling HAML using various grunt contribs, but the templates had dependencies on Middleman specific code, not just just HAML. The solution was to take the HTML generated by Middleman, and run it through a HTML to Jade converter. Setting up Grunt to build HTML from Jade was easy with grunt-contrib-jade.

BTW, if you want to try out Jade in your browser quickly, the HTML to Jade converter offers that as well.

More optimization!

After some manual work on the Jade files, I had a very DRY set of Jade templates and usemin configured to minify all the JS and CSS how I wanted. Pushing things further, I set up a bash script to help generate a timestamped Cache Manifest file, and ran it with grunt shell when grunt build is called. That bash script works in Git Bash on Windows too, so it is still cross platform.

Next steps

Ideally running grunt deploy would generate gzip versions of all the files, and uploaded them to S3 and set the correct HTTP headers if needed. I couldn’t get an S3 syncing script working. Still working on this one!

Here’s a presentation by some other guy who moved a Rails app to Node and experienced some of the same things I did. This developer used regexes to convert a lot of HAML to Jade instead of converting HAML to HTML to Jade.