How to create separate category pages in Jekyll Blog

Allow users to discover your blog more

Posted by Adam Leal on May 19, 2019 · 4 mins read

One of the few reasons our blog takes a very small time to load is because it is a static blog. Static blog means there is no interaction with the database or any other thing which takes time to load.

We use a pretty simple stack for delivering these simple to your computer or phone screen. Let's dive into the process in which we created this blog. There is an interesting story behind that. So stay with us before we start with the real problem in the hand.

First of all, we found a domain on Namecheap. We used some tools to find out that Page Rank and Domain Authority is good for the page. We went to NameCheap and brought in no time.

Then we created a new Repository for the blog on GitHub. Our aim was clear, we wanted the blog on GitHub Pages.

We forked the clean blog repo and deleted the old posts on the blog, pushed the code.

Finally, we had to set up the DNS and CNAME configurations. This step took some time. Anyway, our new blog was ready with a custom domain in no time.

Now that we have discussed on how we got started, Let's discuss the problem we are facing currently.

The Problem

It's fairly easy to define categories in a Jekyll blog post. We have to write category/ categories in the frontmatter of the post. This is the frontmatter of the post that you are reading.

layout: post
comments: true
title: "How to create separate category pages in Jekyll Blog"
subtitle: "Allow users to discover your blog more"
date: 2019-05-06 23:55:13 -0400
background: '/img/posts/books.jpg'
category: Blogging Technology

Sweet, right.

But if you go to our home page, you will find that we have found some very appealing topics about which we write regularly.

For each of them, we have created a separate page. It was a hard task, but we agreed that it is one-time task and we can invest some time in it.

We wanted the process to be as easy as possible. We found that Jekyll currently doesn't provide any pluggable way of doing this. So, we went forward with the following approach.

We created a simple HTML file in the _layouts directory called category.html. Following was the content of the file.

I hope you are getting what are we trying to do. We are trying to create a custom layout, which can then be directly used to create category pages.

All other code is used to display page stuff. The Real thing starts from Line 29. Here we create a header of the category_name, which will be passed when we will create a category page.

Then on Line 31, We are only getting the posts with the same category name.

Finally, if we didn't find any post, then we will display some content.

Now we will create separate category pages.

We try to write as much clean code as possible. For that reason, we created a directory that will contain all the category pages.

So, if you want Jekyll to discover files in the new directories, you have to add the following content to _config.yml.

include: ['_categories']

Finally, you can create the category pages. Let's see the content of Technology page.

layout: category
title: Technology
description: For automating the boring tasks.
background: '/img/posts/printer.jpg'
permalink: /technology/
category_name: Technology

So only thing that you have to write is the frontmatter of the file and you are done.

Now whenever you write a new post, you will not have to add it to a page. Your posts will automatically be present at all the places according to the category_name

Just don't mess the category_name

Hope you liked the way we tackled the problem. Please share your views as well.