How I created separate category pages in my Jekyll blog

December 4, 2018 · 3 mins read
Categories: blogging   | jekyll   | seo |

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

I use a pretty simple stack for delivering these simple pages to your computer or phone screen. Let’s dive into the process in which I created this blog.

1. The Problem
This blog is hosted by GitHub Pages and built using Jekyll. I took the domain name from GoDaddy a few days back.

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 front matter 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
---
Sweet, right.

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

For each of them, I have created a separate page. So, the idea was that whenever I create a new post in any given category, it will add the post to the category page automatically.

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

I created a simple HTML file in the _layouts directory called category.html. The following was the content of the file.

I hope you are getting what I am trying to do. I am 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 with Line 29. Here I create a header of the category_name, which will be passed when I create a category page.

Then on Line 31, I am only getting the posts with the same category name.

Finally, if I didn’t find any post, then I will display some content.

Now I will create separate category pages.

I try to write as much clean code as possible. For that reason, I 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 the 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. You can create as many separate categories as you want to.

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 miss the category_name.

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

You May Also Enjoy

1. Lazy Loading your images in Jekyll blog | Improving page speed
2. How to Create a Table of Content in Jekyll blog | Without any Plugin
3. How to link to your old posts like a pro in GitHub Pages/ Jekyll blog
4. How to add social sharing buttons on your Jekyll Blog using GitHub pages
Please share your Feedback:

Did you enjoy reading or think it can be improved? Don’t forget to leave your thoughts in the comments section below! If you liked this article, please share it with your friends, and read a few more!

We don't share your details with others