TL;DR Build upon Jekyll’s built-in tag and category tagging system, skip to tutorial

Introduction

Jekyll is a very good static content generator in all rights, and is a pretty good fit for blog posts in general. However, the core is missing a key feature: tags and categories.

Although Jekyll posts support the use of tags and categories, it is up to the theme to implement these features and display them in the layout. This is very annoying, especially when it comes to creating an index for all the tags and categories, since there is no simple way of getting the tag index.

The solution

This tutorial will help you add a generated tag index page to your blog. This page will include all the posts that are of a certain tag (or category), making your blog navigation easier.

This tutorial will focus on create the tag index page for your Jekyll blog. The idea is pretty much the same for categories.

During compilation, the generators that we created will be activated and will then generate the list of posts for the corresponding tag. Then for each tag, they will be parsed into the tag index template page, where the list of posts will be displayed along with the details.

Generating the tag index page

For this to work, there are a few things needs to be created. One, the generator itself. When all the information of the posts have been read into the system, the built in tag system will register the tags to each post in post.tag as a list. We will be creating a generator to create the index page, the plugin will be in the _plugins folder in the root directory as a ruby file.

The plugin will create a TagGenerator object that creates a new ‘TagIndex’ page for each of the existing tags. The TagIndex page uses a different template file(_layouts/tag_index.html). How the posts are displayed is defined in the template file later. This plugin file will reside in _plugins/_tag_gen.rb.

The content of the template file for the tag index will include a main for loop that loops through the list of posts, and print out the details of the post individually. Below is a simple example of a tag index page, with minimal details and styling. This template file will reside in _layout/tag_index.html.

And to add the finishing touches, we add the links to the tag index page to the posts themeselves. This will have to depend on how you define the permalink for your tags. For each tag, you just have to add link to the index page. For a simple list of tags separated by commas, you can add in something like this in your post template.

Testing it out

Now when you build your Jekyll site, and go on to the individual post page, you will be able to access the tag index page and see all the posts that are tagged with that particular tag.

What about categories then? Using the same idea, create your category generator and your category index page. Most of the changes would probably be just to rename the variables in the generator and index page. If you need help, you can view the appropriate files under _cat_gen.rb and cat_index.html under the gist to view the changes to make.

The End?

The Jekyll static site generator is actually very extensible and has support for a very extensive plugin system. In this tutorial, we have only used the generators, but if you interested in building more plugins for Jekyll, you can take a look at official plugin documentation.