Adding Features to Jekyll

Recently I upgraded from Jekyll 2.x to 3. When I did the upgrade the plugin I was using to create category pages started reporting depreciation errors. I started looking into creating the category pages a different way, and If I could create them without a plugin, I decided that would be the best way to do it.

I wanted to add a related post feature to my post pages, to help content be found more easily. I decided to make use of my tags, to help group posts together.

In this article I will share how I accomplished this, and where I found the code I used.

Category Pages

To create my category pages, I followed this article.
The first step was to create a new layout called category.html. In that file I put the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
layout: default
type: archive
---

<div class="archive-description">
        <h1 class="archive-title">Articles</h1>
        
</div>

<div class="wrap">
         
                <p>There are no posts in this category.</p>
        
</div>

Then I created a directory in my Jekyll site for each category. I use three categories, Article, Guide, and Project. So I added a directory called Article, Guide, and Project. Then I created index.html files inside each.

1
2
3
4
5
---
layout: category
title: Articles
category: Article
---

I created two more of these pages for the Guide, and Project categories.

This now creates my category pages I need. If I ever need to I can create a list of categories and use a bash script to populate them.

The other change I made to the website was to generate a small list of related posts after each post. I have read that Jekyll has this functionality built in, but it just lists recent posts. I found this article helpful. I did make some changes to the code, which I will explain below.

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
37
38
39
40
41
42
43
44
  <div class="related">
        <h3>Related Posts</h3>
        <ul>
                
                
                        
                                
                                
                        
                                
                                        <li><a href="/jekyll-deploy-script/">Jekyll Deploy Script</a></li>
                                        
                                
                        
                                
                                        <li><a href="/wordpress-to-jekyll/">Migrating a Wordpress Blog to Jekyll</a></li>
                                        
                                
                        
                
                        
                                
                                        <li><a href="/ssh-banners-and-motds/">SSH Banners and MOTDs</a></li>
                                        
                                
                        
                                
                                        <li><a href="/perl-pig-latin-conversion/">Perl Pig Latin Conversion</a></li>
                                        
                                
                        
                                
                                        <li><a href="/writing-hangman-in-perl/">Writing Hangman in Perl</a></li>
                                        
                                
                        
                
                        
                                
                                
                        
                
        </ul>
  </div>

I placed this code in my post.html file in _layouts. The couple of changes I made were to limit the returned related posts to three max, and I decided to create a list for the related posts, instead. I then used css to remove the bullets from the list.

I found that liquid has a limit feature. I used this in the for loop to three links at the most. I did not want the whole list, but you can remove the limit, or change it to suit you.

Conclusion

With these two enhancements in place I like my website a little more now. If you are looking for either functionality give it a try, and let me know how it works for you.

Written on September 17, 2016