Create a blog post series with navigation in Jekyll

Blogging about individual self-contained ideas is great. However, some ideas require a more structured approach. Combining simple concepts into one big whole is a wonderful journey for both the writer and the reader, so I wanted to add a series feature to my Jekyll blog. As you may have guessed already, Jekyll’s high degree of customization makes this a breeze.

Goal

I want to achieve the following goals:

1. Each article should list the other articles in the same series.
2. To simplify content discovery, the home page should display all series in a category.
3. Moving articles into different series should be easy since they may evolve over time.

Step 1: Add series metadata to posts

Given Jekyll’s high customizability, there are several ways to handle a series. I can leverage Jekyll variables in the config to keep a series list, use collections, or define a Liquid list somewhere in a global template and iterate over it.

The cleanest way is to list the series and the posts contained in that series. For example, for all the posts in the Jekyll series, I’ve added the following two variables in the post front matter:

is_series: true

series_title: "Jekyll"

The first variable, is_series, is a simple boolean which says whether this post is part of a series. Booleans work great with Liquid filters and allow me to filter only those posts which are part of a series. This comes in handy later on when I’m trying to list all the series in one go.

The second variable, series_title, is the title of this series. In this case, it is Jekyll. It’s important that posts in the same series contain the same title. I’ll use this title to match posts to a series. If it contains extra spaces or special characters, it won’t match the series.

You can view the source code here.

Step 2: Add links to posts

With the series defined, I now need to show other articles in the series. If I see a post in the Jekyll series, there should be a list of other articles in the same series. A series won’t make sense without this essential navigation.

My blog uses the posts layout to display posts. To show other posts in the same series as the currently viewed post, I use the code below: