BeatLeakVibe 1️⃣5️⃣

Why Related Posts Matter

Related posts encourage your readers to keep browsing. They reduce bounce rates, improve session duration, and help surface older content that’s still valuable. For SEO, this means better internal linking, which helps with crawlability and keyword relevancy.

Most Jekyll themes don’t support related posts out of the box without plugins. However, we can build this feature manually using Liquid in a way that works natively with GitHub Pages.

Approach Overview

We'll add a related posts section to the bottom of each post page. The related posts will be selected based on:

Matching categories
Excluding the current post
Limiting to a fixed number (e.g., 3)

Step 1: Open or Edit Your Post Layout File

Open the _layouts/post.html file in your theme directory. This is the template used for rendering individual blog posts.

Scroll to the bottom of the file — after the main content area — and prepare to add a related posts block.

Step 2: Add the Liquid Logic for Related Posts

Insert the following code near the bottom of post.html, before the closing {% raw %}{% endraw %} statements:

{% raw %}
{% assign related_posts = site.posts | where_exp:"post", "post.url != page.url" %}
{% assign common_category = page.categories[0] %}
{% assign filtered_posts = related_posts | where_exp:"post", "post.categories contains common_category" %}
{% assign limited_posts = filtered_posts | slice: 0, 3 %}

{% if limited_posts.size > 0 %}
  <div class="related-posts-section">
    <h3>You May Also Like</h3>
    <ul class="related-posts-list">
      {% for post in limited_posts %}
        <li>
          <a href="{{ post.url }}">{{ post.title }}</a>
          <span class="post-date">{{ post.date | date: "%b %-d, %Y" }}</span>
        </li>
      {% endfor %}
    </ul>
  </div>
{% endif %}
{% endraw %}

What This Code Does

site.posts: grabs all posts
where_exp: "post.url != page.url": excludes the current post
page.categories[0]: grabs the first category of the current post
filtered_posts: finds other posts that share the same category
slice: 0, 3: limits the output to 3 items

Step 3: Add Optional Styling

You can enhance the look of the related posts by customizing the CSS in assets/css/style.css or similar. Here’s a simple example:

.related-posts-section {
  border-top: 1px solid #eee;
  margin-top: 40px;
  padding-top: 20px;
}
.related-posts-section h3 {
  font-size: 1.2rem;
  margin-bottom: 15px;
}
.related-posts-list {
  list-style: none;
  padding: 0;
}
.related-posts-list li {
  margin-bottom: 10px;
}
.related-posts-list a {
  font-weight: 500;
  color: #333;
}
.related-posts-list .post-date {
  display: block;
  font-size: 0.85rem;
  color: #888;
}

Alternative Filtering Approaches

If your blog uses tags instead of categories, you can tweak the Liquid like this:

{% raw %}
{% assign related_posts = site.posts | where_exp:"post", "post.url != page.url" %}
{% assign current_tags = page.tags %}
{% assign matched_posts = "" | split: "" %}

{% for tag in current_tags %}
  {% assign tag_related = related_posts | where_exp:"post", "post.tags contains tag" %}
  {% assign matched_posts = matched_posts | concat: tag_related %}
{% endfor %}

{% assign unique_posts = matched_posts | uniq %}
{% assign limited_posts = unique_posts | slice: 0, 3 %}
{% endraw %}

This checks each tag and builds a list of related posts. uniq removes duplicates.

Limitations and Tips

Liquid logic is client-independent — no JavaScript or plugins required.
This logic only works for posts published before the current one (Jekyll does not "look forward").
Consider using page.related in the future if you manually define related content in the post’s front matter.

Adding Custom Related Posts (Optional)

If you want full editorial control, you can define related posts manually in your front matter:

---
title: "My Great Article"
related:
  - /my-other-article/
  - /another-relevant-post/
---

Then in post.html:

{% raw %}
{% if page.related %}
  <div class="related-posts-section">
    <h3>Related Articles</h3>
    <ul>
      {% for url in page.related %}
        {% assign related_post = site.posts | where: "url", url | first %}
        {% if related_post %}
          <li><a href="{{ related_post.url }}">{{ related_post.title }}</a></li>
        {% endif %}
      {% endfor %}
    </ul>
  </div>
{% endif %}
{% endraw %}

Conclusion

Adding a related posts section in Mediumish enhances content discovery and makes your blog feel more alive and engaging. Whether you use categories, tags, or manual lists, Jekyll gives you the flexibility to build this feature with native Liquid syntax — all GitHub Pages friendly.

Try both approaches and see which fits your content strategy best. And remember, internal linking isn’t just for users — Google loves it too.

Posts

How to Add Related Posts to Your Jekyll Mediumish Blog