Static site generators are fantastic. They make it easy to build websites without the need for server-side code or databases. Most static site generators work similarly. They take several templates and some content as input and output a folder with a generated website. Some generators are very opinionated about how the source of the website is structured, which template types can be used, or what can be used as content. Other static site generators take a different approach and are more open about how the website is built. For the redesign of my page, I chose Eleventy as static site generator.

Eleventy is written in JavaScript and uses the Node.js runtime. This makes it easy to customize the build by using packages from the vast selection offered by the npm software registry. But not only is Eleventy easily extensible it also provides a lot of functionality out of the box.

For my website, I decided to write my templates in the Nunjucks template language. It is a very powerful templating language and similar to other templating languages I used before. The template for the header of a blog post looks similar to the following example.

<header>
    <h1 class="mb-0 font-bold">
        {{ title }}
    </h1>
    {% if description %}
    <p class="text-sm italic leading-tight">
        {{ description }}
    </p>
    {% endif %}
    <p class="text-sm">
        <time datetime="{{ date | htmlDateString }}">
            {{ date | dateDisplay }}
        </time>
    </p>
</header>

It is possible to print out data from the processed content like the title or the description. Additionally, Eleventy provides functionalities to create filters or functions that can be used by multiple template engines. In the example above the htmlDateString or the dateDisplay filter are such functions.

Eleventy does not only support a variety of template languages it also makes it possible to use different kinds of data. For example, JSON files can be used as a data source or even JavaScript scripts that return data from an external source like a web API.

In contrast to other static site generators, Eleventy does not provide tools to process assets like stylesheets, scripts, and images by itself. In my opinion, this is a feature. It allows Eleventy to concentrate on the job of generating a folder structure and HTML files from the given data sources. Processing of assets can be added by choosing tools from the npm software repository. I integrated tools that process my stylesheets and images into the build. For example, the great postcss package enables me to use tools like cssnano which minifies the size of my CSS. And for the optimization of images, I use imagemin.

With the templates and build process in place, it is now easy for me to write blog posts without interruptions. I have to create a new Markdown file in the posts folder add a title, a date, and optionally a description as front matter and can start writing. The front matter of this article looks similar to the following snippet.

---
title: "Static is fantastic"
date: 2020-02-23
description: "Generating my website statically."
---

Deployments of a new version of the site are very boring (in a positive way). I have to take the folder that is produced from the build process and transfer it onto my webserver. I don’t have to restart any services, run migrations, or do anything else. In the future, I want to look at projects other than blogs to see how static site generation can be a useful alternative to dynamic server-side rendered sites.