I really needed to dust off this website, which is always a good reason to look for the best technology available to create a new one. I started with listing what I wanted the website to do. First and foremost, it had to be simple. Simple to create and simple to maintain. Otherwise, I would always feel like there’s a hurdle to add or change something. I wanted a place to portray the things that I create, like a portfolio, but also a place to write about the things I am learning. Since social media is in a downward spiral lately, I felt that a personal blog was the best way to go. And the last real requirement was that it should be fast. I think that too many websites tend to not pay attention to this last aspect, while it greatly improve the usability.

Static site generator

I found that a static site generator would fit all of my needs. For those who don’t know, a static site generator allows you to develop your website with dynamic elements such as variables, but before publishing, the generator will process it and create a static version of it. The static version consists of pure HTML, CSS and, optionally, Javascript. The advantage is that you don’t need a database and no server side code. Now, that’s only one part of the choice, the second part is: which one?

Making a choice

There are many different options when it comes to a static site generator. Popular ones are GatsbyJS, Hugo, Jekyll, Next.js, Nuxt and much more. After trying several, I went with Jekyll. Jekyll is simple, allows you to write posts in Markdown format, supports Liquid to create dynamic templates and has first class support for a blog. The fact that the output is simple HTML and CSS, makes it fast as well. More on that later.

The building blocks

Jekyll has several content building blocks. These include pages, posts and front matter. Pages are the main building block. These include the home page, about page, contact page, etc. Blog posts go into _posts folder. Both pages and posts can be written in HTML, Markdown or even a combination of the two. In this case, I write the pages in HTML and the posts in Markdown. At the top of a page or post is the front matter. This is a YAML block with meta data for that file. It includes the title, applied layout (more on that later), post tags and permalink. You can also define your own variables. An example of front matter is shown below:

---
layout: post
title: "New website built with Jekyll"
date: 2020-03-01-09:20:00 +0100
categories: website
---

Structure

To structure your website you can define several layouts. Layouts can be seen as HTML templates that define where particular content goes. For instance I’ve defined a default.html which includes the basic HTML for each page. There’s a page.html, post.html and a home.html. Layouts have an inheritance structure. Each layout may contain several components, reusable elements. These are called includes. Examples of includes for this site are the header.html, footer.html and post.html. The latter is included on both the home page and the post page. Styling of your Jekyll website is typically done with SASS. I structured this in such a way that it matches the layouts and includes and generic styles go into a base SASS-file.

Dynamic content

Even though we’re talking about a static site generator, there’s some form of dynamic content. That is, not while browsing the site, but while generating it. Meaning you can define variables and data to be included in the content of the site. For instance, looking at the front matter above, you see a variable called title. To use this inside your layout you can simply use {{ post.title }} and the generator will replace it with the contents of the variable. Liquid, which is the template language being used, has a lot of possibilities, including loops, if-statements and filters.

Generating your website

While developing, Jekyll allows you to run a dev server equipped with live reload, which automatically refreshes the page when you make changes. Run jekyll serve -l to start the dev server. And when you are ready for deployment, run jekyll build and upload the contents of the _site folder to your web server.

Performance

As is to be expected from a static generated site, the performance is great. The Lighthouse audit result speaks for itself. Website performance

A great developer experience

Overall I had a great experience developing my new website with Jekyll. It was easy to understand, fast to build and outputs exactly what I need: a fast and responsive website that is easy to maintain. Now I only have to do so…