Static site generation has become the new way to build web sites especially among the more technically savvy. There are several reasons why this is the case:

  • the bloat of popular CMS software (Wordpress, Drupal, etc...)
  • moving the load of database to text files and third party services
  • the cost saving of hosting static web sites
  • the quick speed of serving static sites and therefore rank sites even higher among search engines

As far as what is out there to build these sites, there is no shortage of tools.

Jekyll

Jekyll Logo

The premier static site generator used by GitHub Pages is Jekyll. Built with Ruby, while it covers the 80% needed to build a great blog site; the other 20% becomes difficult especially for those of us who are not experienced Ruby developers. Ideally I wanted something which uses NodeJS since I already have years of experience in using NodeJS. Even better - there's already a great tool I've used to build static sites and their assets...

GulpJS

GulpJS Logo

GulpJS is a great streamlined tool for building static assets, transpiling code, analyzing code, unit tests, compression, deploying etc... The whole engine is built around the idea of using NodeJS streams to fascilitate a quick build process. However streams only work when there is a many-to-one/one-to-one paradigm with streams and files. If you are building something more complex such as a blog which organizes content in a variety of ways: tags, dates, categories, etc... Gulp doesn't offer an easy solution to this. There needs to be an easy solution to plug into the already existing infrastructure of GulpJS. That's when I found Metalsmith.

Metalsmith

Metalsmith Logo

Metalsmith is complete static site generator built with NodeJS. This means I have the ability to plugin my own code for any other feature I would like or plug it in using GulpJS. For my company's website brightdigit.com, MetalSmith and Gulp seemed like the perfect match. However there were some problems I ran into.

The first problem I ran into was when I was upgrading. MetalSmith had switched over from ES5 to ES6 and that meant the connectivity between Gulp and MetalSmith ran into some issues. This could be resolved by running gulp with the harmony argument but then there were issues with using MetalSmith's plugins now which weren't ES6 compatible. This was starting to feel like a hack and since Jekyll was incomplete for what I wanted I decided to try the second most popular static site generator which was also written in Ruby - Middleman.

Middleman

Middleman Logo

There is something to say about being popular. Like Jekyll or even Wordpress, this means there is a large community online which can help and guide you. Middleman seemed like it would be a good fit. However I would find that there was the same sort of need for "hacking" as I had found with MetalSmith. First there was confusion on what templates and plugins supported which version 3 or 4. Second the features were nowhere near as robust as what I was getting with Gulp and MetalSmith. I host my sites using S3 and Cloudfront. There are great plugins for Gulp for uploading to S3 as well as setting HTTP headers for those files. Middleman had something but it was nowhere near as robust. There is a great tool for instance for creating above-the-fold css. This worked great with Gulp because it was built in NodeJS. However there was nothing like this in Middleman. The last straw came when many of the tutorials would suggest using Gulp along with Middleman for the features I wanted.

Why should I use something outside of the existing Ruby ecosystem. It made sense to use Rails features for the site since they are already within the Ruby ecosystem but now I have to run two commands to build my site. I thought Middleman had everything I needed. MetalSmith already worked great Gulp and number of plugins available to me in both Gulp and MetalSmith were suffice and it had a great community. It seemed like I was better off with MetalSmith.

Conclusion

I ended up switching back to MetalSmith and Gulp. You can look here for the sample template I am using for new sites. In the future, I will showcase some the Gulp and MetalSmith plugins I have used and how they build a robust, SEO friendly, fast static site.