Static site generator, the new trend

The purpose of a SSG is to add the dynamism of a CMS to the fast loading of a static site.

Composing a page on demand just like a content management system has benefits, such as adapting the page to the user, but also inconvient, as accessing a database for the various elements of content slows down the display. Moreover, as the page shown to visitors are mostly the same, it is not rational to build it on each visit. Cache systems try to address this issue but it does not always work very well. Another major drawback is security: hackers target the popular CMS, and when they find a flaw, it gives them access to millions of sites at once to install malware, which has happened to users of Wordpress and Drupal.

The static solution

The answer to these problems is to install the content locally or on a server in the form of text files (in markdown format) and generate static HTML pages, which are safe and load fast. This is the purpose of a static site generator. This does not stop to have a dynamic content, this is accomplished by JavaScript plugins, nor to use themes like Wordpress, simply choose among several templates.

In the case of Jekyll for example, each post made with the text editor is placed in a text file in the directory _posts. The template contains fields for each part of the content. The generator then integrates content in the template and places the generated HTML page in the _site directory that is publicly accessible.

A template is the model used to build a page. A simple example:

<head>
   <title>{{ title }}</title> 
</head>
<body>
<div id="content">
{{ content }}
</div>
</body>

The template contains two variables, "title" and "content" that are replaced by the title and content of the edited text file. The webmaster does not need to make the template itself, a choice is included in each generator. But you can also use a template language as Liquid, Stylus, etc. and build your own.

Functions of a static site generator

All generators have a list of features in common:

Meta data

The markdown, textile and other text format have field for usual data, such as title, author name, date, category, path name, etc. These fields will be formatted by CSS and presented according to the layout defined in the template.

Symbolic links

This is something that works more or less depending of the SSG. This involves for example to replace in the template a versionned file to include, script-1.2.3.js by a unique name: script.js.

Static assets

These are elements that are not parsed by the generator such as images, CSS or JS files. These files are placed in a dedicated directory, and the generator copies the set in an public directory.

Other features are only supported by some SSG:

Comments

This is done with a plugin and a database but they may also be added to the pages or you may use an external service like Disqus.

Page template

The ability to choose a theme, not for the entire site, but for each page. Templates can consist of simple HTML page or be built with a template language such as Jade, Haml, Mustache, eRuby ...

Git

Git is a update system for collaborative project designed to Linux. It may also be used for a conventional website and allows to build a remote image that is an exact copy of the local content. Eventually it allows to several authors to work together but this is an option. All generators do not offer Git.

Optional database

With SSG, post are stored in text files rather than in databases. This does not prevent the use of data from a database stored on the server, such as the list of registered users, comments.

Related posts

Wordpress can displays a list of post related to the page displayed through a plugin. It is the same with the generators, the list of plugins includes often a "related posts".

Sitemap and RSS

The generator can also automatically update a sitemap and RSS file when a new page is added or when a page is updated. In Wordpress, the sitemap is generated by a plugin.

Search field

To add a search box, you have to include a script in each pages. The result will be accelerated if the generator produces an index file of non-common words. You can also add a search field provided by an external site (like Google) that indexes pages.

List of popular SSG

All use markdown or textile format for text editing, among others. All are free, open source and under a free license. It is not necessary to know how to program to use them, the language is only useful if you want to contribute to the code.

Name/Website Language Template
Description
Jekyll
jekyllrb.com/
Ruby Liquid
Provides a development server for testing the generated pages.
Used to host a site on GitHub, except plugins.
You need a YAML description of metadata in each page and the corresponding code in the template.
Liquid is the mandatory template system and it is not easy to use.
Pelican
getpelican.com/
Python Jinja2
Ability to import posts from Wordpress or Dotclear.
reStructuredText or Markdown edition.
Support multiple foreign languages.
Possible integration with Twitter.
Wintersmith
wintersmith.io/
CoffeeScript Jade
Use Node.js and gulp.js to chain processes by plugins and build the site made of static pages.
Preview possible locally.
Its flexibility allows to import directly the content of an already existing static site of from another generator.
Hexo
github.com/hexojs/hexo
JavaScript + Git EJS, Swig, Stylus
Blog framework using Node.js for generating pages.
Compatible with GitHub, Heroku, personal hosting with Git, requires a single command.
Imports posts from Wordpress, Joomla, Jekyll.
Supports most Jekyll plugins.
Hugo
gohugo.io/
Go Go templates, Amber, Ace
Convert the contents of a directory into HTML pages.
Local server for preview.
The generation is very fast and it is for all types of sites.
Assemble
assemble.io/
JavaScript Handlebars
Works with Grunt.js (task runner) and Yeoman (ecosystem for generators).
The particularity is to produce parts that can be assembled to make posts.
A page is built in an HTML template, or JSON or YAML or Gruntfile file.
Harp
harpjs.com/
CoffeeScript EJS, Jade, Stylus
Comprehensive platform with a static Web server.
Producing HTML/CSS/JS page is an option.
You can edit the pages locally or online.
Particularly easy to use.

This list is not exhaustive, however I have tried to include a generator for each programming language. We could also include Lektor (Python).

Finally, should you use a SSG or a CMS? All the functions of a CMS can be given to a static site providing it can communicate with the server, and dynamically change the page, which poses no problem with Ajax or WebSocket (the latter being more recently implemented). It is simpler to use Wordpress than a generator, so the non-IT bloggers will prefer probably to use this CMS.
But if safety or responsiveness are essential points for the site, a generator is clearly the best solution.