Introduction to Static Site Generation with Nanoc

Once in a while I decide to redesign my personal web page. It is just for the sake of the fun of redesigning to be honest. This time I wanted to do it from scratch. I’ve got a feeling that my web development skills are becoming a little rusty and there is plenty of new technologies that I haven’t used. Ruby is popular for creating web sites, everyone is talking about boosting your CSS with LESS and SASS and static site generation is number one choice of my more web oriented friends. And you know - Wordpress is so 2000’.

Let’s not forget to mention all the different frameworks and tools for everything like rails, nanoc, jekyll, sinatra, nancyFx, Modernizr, Twitter Bootstrap, Blueprint, jQuery, prettify and others you hear about in podcasts and in blog articles from the elites of web development. I want to not just only learn few of them but use them on regular basis. This post is a part of the series focused on static website generation with nanoc.

What is static site generation?

Static site generation is the way of managing your HTML content. It is useful for web presentations, galleries, wikis and even for blogging.

Basically you have a set of templates and content and with the tool you can wire them together. You can use custom frameworks, existing tools or specialized programs. You create layout and content, run the tool like you run the compiler for the code. The result of the “compilation” is a static HTML content ready to upload to your web hosting server.

Templates are usually written in a templating language for the stack the framework is built on. For example nanoc is written in ruby and it comes with ERB.

<div id="main">
  <%= yield %>
  <%= print_metadata(item) %>        
</div>

The content usually uses some advanced syntax format for written text. The focus of these syntaxes is productivity and they are very easy to read. Markdown and it’s mutation for ruby kramdown is very popular at the moment.

Header 1
================
This is a simple paragraph with link to [google.com](http://google.com).

List of items 
* item 1
* item 2

This item is in *italic* and this one is **strong**.

Are static site generators for you?

The answer to this question is obvious. It depends on your needs. The disadvantages of static website generation are

no true delayed articles,
no web interface for creating new content,
no comments,
no pingbacks,
no dynamic and interactive content at all.

On the other side of the coin the advantages are

independence,
security,
simplicity,
better content management and versioning,
speed and scalability
and it feels really cool!

Some of the disadvantages can be overcame by using external services. For comments you can use disqus or intensedebate. For the other ones you have to ask yourself. Do you really need them?

When you use static generators you are independent on the framework and it’s version that is deployed on your web hosting provider. It can dramatically reduce the costs for hosting. Scaling and speed won’t be an issue anymore. Also there are no weak spots with the lack of dynamic content regarding security.

With right versioning tools like git and github you can overcome the problem of missing online interface for creating new content. The great benefit is having your files on your local machine with all the precious content.

You can use text editor of your choice for writing articles.

Most of the modern generators also comes with bundling, image optimizations and code minification.

Which tool should I use?

A very good comparison of static site generators can be found in Rich Leeland’s - Static Site Generators. There are lots of different frameworks and I would only suggest the most promising and the largest ones.

nanoc: nanoc is an engine written in ruby for creating more general web sites. It is a great tool for blog, custom photogallery or corporate website. It has a really good documentation and extensibility is really good. Nanoc is still in active development but it is a mature product.
jekyll: jekyll is an engine focused on blogging. It is written in ruby and supports features like media processing, disqus. It is also in active development and it would be my second choice.
hyde: Hyde is simmilar to jekyll but it is on the python stack.
pretzel: .NET based static site generation tool.

I chose nanoc mostly because of good documentation, extensibility and recommendations from my friends.

Conclusion

Even if you are building a large web site it’s at least worth considering to use one of the static generators. You won’t be dependant on hosting technologies. Scaling up is really easy and development process is very quick. Static generated sites tends to be much clearer and more focused on the content.

On the other side if you think you won’t benefit from any of these features described in this article, stick with the dynamic content management systems.

I build this blog entirely with static content generation and even though blog seems like a very dynamic content not suited for this approach I am very pleased with the experience nanoc gives me.

What about you dear reader? Do you use static generation? And why?