Going Static with Nanoc
Published on
by Jim Mendenhall
Tags:
Open Source,
Ruby,
Nanoc
I used Wordpress to publish this website for many years. Wordpress is a great piece of open source software and has helped millions of people get into online publishing. However, after some frustrating experiences with updating themes on this site and helping a couple friends recover their sites after hackers trashed them, I started looking around for something different. I heard about static site generators and tried several including Middleman, Jekyll and Octopress before finally settling on nanoc.
Static Site Generators
A static site generator is software that generates HTML, CSS and Javascript that you can then upload to any web server. In contrast to a modern CMS like Wordpress, which compiles pages on-the-fly, all site content is pre-compiled before being uploaded to the server. Consumer software like Adobe Dreamweaver could be considered a static website generator. These days, there are a plethora of static website generators aimed at web programmers. They are written in just about every programming language and have widely ranging features and philosophies. Using one of these static site generators allows you to utilize all the power of your favorite programming languages and templating languages while “dynamically” generating or pre-compiling your site files before deploying them to your server.
Why go static?
Security
With over 60 million sites using Wordpress, it has enjoyed immense popularity. This has also led to Wordpress installations being a huge target for hackers. To keep Wordpress secure, you need to manually update it quite often, something many site owners don’t do. Even up-to-date Wordpress installations are now a targets as hackers are simply brute-forcing admin passwords and taking over sites. Static websites have no code running on the server and no database, so barring some sort of security hole in your web server or operating system, hacking a static website would be very difficult if not impossible.
Speed
Wordpress needs to compile your pages every single time someone visits your website… a process that does not scale well when your site suddenly gets a lot of traffic. There are caching systems that help relieve this problem and speed things up, but they can be rather complicated to set up correctly. With a static website, your server only needs to serve your content, which makes your website really fast! It also means that you no longer need to have a MySQL or PHP running on your server, so you can host your sites from any platform that can serve static files (including Amazon S3).
Simple server configuration
Most modern hosting platforms come with support for Wordpress, but setting up an optimized VPS for running high traffic sites can be a real chore. If your site is static, any web server should be able to do a good job of serving up your site. Setting up hosting for a static site on Ubuntu server can be as easy as running sudo apt-get install nginx and copying and pasting an optimized config file.
Everything stored in Git
One thing that really bothered me about Wordpress is that a site’s content is stored all over the place. You have Wordpress files, theme files, plugin files, and content stored in dozens of database tables. If you make a change to your site, it’s difficult to go back and see what it was like before. With a static website generator, you can store the entire contents of the site in simple text and graphics files which in turn can be stored in a version control system like Git. This means that your website’s entire history is stored in version control and going back to a previous version is easy. I also like being able to see exactly how my code changes are reflected on the website. With Git diffs, I can verify that my changes are doing what I expect (and only what I expect). Storing everything in Git also makes it really fast and easy to deploy to my VPS.
Why nanoc?
I tried several other apps before giving nanoc a try. I had avoided it at first because people said it was difficult to learn. Ironically, I found it easier to learn than the others and by far the most powerful. I probably like it so much because I love the Ruby programming language and nanoc lets me take full advantage of Ruby and different Ruby gems. I found it to be a very “pure” Ruby environment, with a lot less “magic” than you get with something like Rails. Nanoc has a very active community and creator Denis Defreyne is always updating nanoc with new features and helping people in the nanoc Google Group and IRC.
Nanoc is also extremely flexible, letting you choose your favorite templating languages, gems and extensions. I didn’t like the Liquid templates you’re forced to use with Jekyll and Octpress. Liquid is a system made to limit what users can do in a post, and I found adding functionality to the templates far too complicated. Sometimes you just want to write some Ruby code in a template or post and not have anything get in your way! With nanoc, you can mix and match ERB, Haml, Sass, Less, CoffeeScript, Markdown and many more filters. You could write a post in Markdown and throw some Ruby into it via ERB. If you feel like creating a page or layout with Haml, no problem. There are filters for minifying CSS and Javascript, for cache busting, image optimization, and much more.
It is true that nanoc has a bit of a learning curve, but so do most things worth learning. I found the online tutorials very useful and people are always around to help answer questions in IRC and discussion groups. Once I got my head wrapped around nanoc, I found myself loving it!
Challenges of going static
Dynamic Content
Because “static” is pretty much the opposite of “dynamic”, adding any real-time dynamic content is obviously more tricky than with server-based platforms. That doesn’t mean that it’s impossible. There is a lot that can be done with Javascript and AJAX to make your site more dynamic. It’s also possible to output PHP or other simple server-side code from nanoc, which you may find necessary if you need to tie parts of your site into existing infrastructure. For another site I was working on, I found that I could do all the dynamic work I needed with a simple Ruby script on the server that generated data in JSON and was then displayed on on the site via JQuery and AJAX. The end result was way faster and less resource intensive than doing the same thing in PHP or Rails.
Comments
The easiest way to implement comments on a static site is with Disqus. Their platform has really matured over the years and is quite user friendly. I also found that user engagement went up dramatically after switching to Disqus (and spam dramatically went down as well). Adding Disqus comments is as easy as copying and pasting some code into your template.
Search
The easiest way to solve this problem is to use Google Custom Search. Using other systems are possible but require much more work or a lot of money.
Conclusion
After building several sites with nanoc, I couldn’t be more happy (although the roadmap for nanoc 4 does look like things will get even better). As part of the process of upgrading this site to nanoc, I decided to release the source code for the site under the MIT license. I’ve posted the code used to generate this site over at GitHub so that you can download it and give nanoc a try for yourself. Hopefully, someone will find this it useful.
