Categorise Jekyll blog posts

Categorising blog posts is essential if you want your readers to read similar posts that they liked. While there are some limitations when implementing categorisation in Jekyll, but it is far from impossible. This blog highlights the steps I took to categorise blog posts.

Problem statement

To save some time for the readers, let me state what problem I am going to address. The problem statement is as follows:

The blog post has a list of categories. The reader can click on a category link, and the link will redirect the user to a page that lists all the blog posts belonging to that category.

Blog posts

When you create a blog post, make sure to include categories variable in your front matter. Should you choose to create multiple categories, you can create an array such as [category0, category1, category2]. Create blog posts inside the _posts folder. Your posts will look as follows:

Post 0

1
2
3
4
5
6
7
8
---
layout: post
title: blog0
date: 2021-10-06
categories: coding
---

Contents of blog 0.

Post 1

1
2
3
4
5
6
7
8
---
layout: post
title: blog1
date: 2021-10-06
categories: [coding, jekyll]
---

Contents of blog 1.

Post 2

1
2
3
4
5
6
7
8
---
layout: post
title: blog2
date: 2021-10-06
categories: [coding]
---

Contents of blog 2.

Note: As per Jekyll convention, you must name your blog post markdown file with the format year-month-day-name-of-your-blog-post.md. Example: For blog0 published on 2020-10-06, the file name must be 2020-10-06-blog0.md.

For more information on Jekyll blogs, follow the Jekyll step by step tutorials on blogging.

Categories collection

Create a collection of categories. For every category you add to your blog post, there must be a markdown file for that category with front matter consisting of a variable category_name. Example: If you include coding category in your blog post as above, you must create a file coding.md inside _categories collection folder and add category_name: coding to the front matter.

Your categories collections folder may look as follows:

_categories
    |--coding.md
    |--jekyll.md

Make sure to include the following front matter in the categories markdown file.

Coding category: coding.md

1
2
3
---
category_name: coding
---

Jekyll category: jekyll.md

---
category_name: jekyll
---

For more information on collections, refer to Jekyll step by step tutorials on collections.

Config file

Since we are storing the blog categories as a collection, we must change the _config.yml file. Add the following code to your _config.yml file.

1
2
3
4
5
6
7
8
9
10
collections:
    categories:
        output: true

defaults:
    - scope:
        path: ""
        type: "categories"
      values:
        layout: "category"

Read more about setting up the _config.yml file in Jekyll by following step by step tutorials on collections.

Category list on blog post

You can create a post.html file inside your _layouts. The post.html file will display your blog’s content and the category links, redirecting the user to the respective category page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
---
layout: default
---
<div>
    <h1>{{ page.title }}</h1>
    <div>
        {% assign categories = site.categories | sort %}
        {% for cat in page.categories %}
            {% for category in categories %}
                {% if category.category_name == cat %}
                    <a href="{{ site.baseurl }}{{ category.url }}">{{ category.category_name }}</a>
                    {% break %}
                {% endif %}
            {% endfor %}
        {% endfor %}
    </div>
</div>

<div>
    {{ content }}
</div>

Category layout

To view the list of posts by category, you will need to create a category.html file inside the _layouts folder.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
---
layout: default
---

<div>
    <h1>Category: {{ page.category_name }}</h1>
</div>
<hr>
<div>
    {% assign posts = site.posts | sort: 'date' | reverse %}
    <ul>
        {% for post in posts %}
            {% if post.categories contains page.category_name %}
                <li>
                    <div>
                        <h2><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></h2>
                        <div>
                            <div>
                                {% assign categories = site.categories | sort %}
                                {% for cat in post.categories %}
                                    {% for category in categories %}
                                        {% if category.category_name == cat %}
                                            <a href="{{ site.baseurl }}{{ category.url }}">{{ category.category_name }}</a>
                                        {% endif %}
                                    {% endfor %}
                                {% endfor %}
                            </div>
                        </div>
                        <p>{{ post.excerpt | markdownify }}</p>
                    </div>
                    <hr>
                </li>
            {% endif %}
        {% endfor %}
    </ul>
</div>

For more information on layouts, refer to Jekyll step by step tutorials on layouts.

Summary

• Create an array called categories in the front matter of a blog post.
• Create a collection of categories by creating a markdown inside _categories collection folder.
• Update the _config.yml file for categories collection and the category page.
• Add the list of categories to the blog post layout.
• Create a category.html file inside _layouts folder to see a list of all the blog posts for that category.

Image credit

Cover photo by RetroSupply on Unsplash