Jekyll — Add Related Posts At The End Of A Post

At the end of a blog post, it’s a good idea to recommend similar posts to your readers. This helps them to find more great content on your website easily.

I used to manually add related posts at the end of each article but this became really tedious.

When I migrated my website from WordPress to Jekyll, this similar posts feature was a must-have for me. I wanted to make this process as automated as possible.

In this post, I want to share with you how I implemented a related posts section at the end of my blog posts on my Jekyll site.

File Structure

Let’s start by covering how the files are set up.

In the _layouts folder, I have an article.html. This is the template used by articles and it’s where the main code for this feature is implemented.

All I need to do is add the correct layout to any posts in the _posts folder.

I can do this by adding this to the file’s metadata:

---
layout: article
---

Logic

To build this functionality, I first decided how similar posts should be determined.

I wanted similar posts to be found based on the Tags associated with posts.

If any posts have the same tag as the current post, they would be classed as similar posts and displayed in the similar posts section.

I also wanted to limit the number of similar posts displayed to 5.

Code

Here’s the code that’s used to implement this feature:

<h2>Enjoy Reading This Article?</h2>
<p>Here are some more articles you might like to read next:</p>
    
{% assign maxRelated = 5 %}
{% assign minCommonTags =  1 %}
{% assign maxRelatedCounter = 0 %}
    
<ul>
    {% for post in site.posts %}
    
        {% assign sameTagCount = 0 %}
        {% assign commonTags = '' %}
    
        {% for tag in post.tags %}
            {% if post.url != page.url %}
                {% if page.tags contains tag %}
                {% assign sameTagCount = sameTagCount | plus: 1 %}
                {% endif %}
            {% endif %}
        {% endfor %}
    
        {% if…