A Review of Eleventy, the Static Site Generator

Of all the Static Site Generators, Jekyll has long been my favorite. It provides a simple yet surprisingly flexible templating and front matter system that handles a wide variety of cases well. However it has fallen out of being as useful in the last few years because of the underlying technology that powers it. The sassc extension which is a core library of the jekyll gem is slow to build and compile, and in the age of script runners and docker images waiting several minutes for a single dependency to install is not acceptable.

Eleventy takes the best parts of Jekyll and makes them better. The markdown renderer which makes writing posts simple and productive in Jekyll is also available in Eleventy. Eleventy also offers a single file configuration written not in JSON but Javascript! JSON files for configurations are one of my biggest pet peeves as they allow no logic flexibility. Here is an example of the eleventy config:

  // Return the smallest number argument
  eleventyConfig.addFilter("min", (...numbers) => {
    return Math.min.apply(null, numbers);
  });

The time consuming parts of an SSG in my experience tend to be things like pagination, navigation, and templating. Ultimately I found that Eleventy base theme provided a comprehensive starting point with a post archive and pagination working out of the box. This itself is a huge win, but the liquid syntax language is also expressive and clear to follow. Here is an example:


  {%- if collections.posts %}
  {%- set nextPost = collections.posts | getNextCollectionItem(page) %}
  {%- set previousPost = collections.posts | getPreviousCollectionItem(page) %}
  {%- if nextPost or previousPost %}
  <hr>
  <ul>
    {%- if nextPost %}<li>Next: <a href="{{ nextPost.url | url }}">{{ nextPost.data.title }}</a></li>{% endif %}
    {%- if previousPost %}<li>Previous: <a href="{{ previousPost.url | url }}">{{ previousPost.data.title }}</a></li>{% endif %}
  </ul>
{% raw %}

I've used Jekyll, Hugo, Gatsby, and NextJS as static site generators in the past. I've been disappointed by all of them to some degree or another for a variety of reasons. Eleventy has been an absolute delight to use so far, and in my experience building this site with Eleventy it combines the best parts of Jekyll with the power of NodeJS.