adding related posts in jekyll without plugins

Why Related Posts Matter

Related posts help readers continue exploring your content. They're essential for improving time-on-site, reducing bounce rates, and increasing internal linking. While WordPress themes often include this feature by default, Jekyll users must implement it manually — especially if you're hosting on GitHub Pages where custom plugins are restricted.

What Makes Posts Related

In Jekyll, there’s no built-in content analysis for post similarity. However, you can relate posts by tags, categories, or custom front matter fields. This approach ensures relevance while keeping things fast and static.

Approach 1: Related Posts by Tags

The simplest and most dynamic way is by checking if other posts share tags with the current one. Here's how you can add this logic to your post layout.

Sample Code in Your Post Layout

{% raw %}
<div class="related-posts">
  <h3>Related Posts</h3>
  <ul>
    {% assign related_posts = site.posts | where_exp: "post", "post.tags | join: ',' | contains: page.tags[0]" %}
    {% for post in related_posts %}
      {% if post.url != page.url %}
        <li><a href="{{ post.url }}">{{ post.title }}</a></li>
      {% endif %}
    {% endfor %}
  </ul>
</div>
{% endraw %}

This example relates posts based on the first tag of the current article. You can refine it further by checking multiple tags or category intersections.

Approach 2: Using a Custom Field

If you want full control over what’s related, use a custom related field in your front matter:

---
title: "Email Automation Tactics"
tags: [email,automation]
related: ["how-to-build-email-list", "best-email-tools"]
---

Then, in your layout:

{% raw %}
{% if page.related %}
  <h3>Related Posts</h3>
  <ul>
    {% for rel in page.related %}
      {% assign post = site.posts | where: "slug", rel | first %}
      {% if post %}
        <li><a href="{{ post.url }}">{{ post.title }}</a></li>
      {% endif %}
    {% endfor %}
  </ul>
{% endif %}
{% endraw %}

This method works well for small blogs or curated relationships between evergreen content.

Enhancing Related Posts with Thumbnails

If you include a thumbnail or featured image in each post, you can improve engagement. In each post’s front matter, add:

image: /assets/images/email-tips.jpg

Then in your layout:

{% raw %}
<ul class="related-posts">
  {% for post in related_posts %}
    <li>
      <a href="{{ post.url }}">
        <img src="{{ post.image }}" alt="{{ post.title }}" />
        <p>{{ post.title }}</p>
      </a>
    </li>
  {% endfor %}
</ul>
{% endraw %}

Case Study: Doubling Session Length Through Related Posts

A content creator running a tech tutorial blog on Jekyll implemented tag-based related posts. Prior to this, readers often bounced after reading one article. After adding related content under each post, the average number of pageviews per session increased from 1.4 to 2.9 within three months — effectively doubling engagement. The creator noted increased scroll depth and user interaction on long-form tutorials.

Design Tips for Related Posts Section

• Position it at the end of the post or in the sidebar for better visibility.
• Limit to 3–5 items to avoid clutter.
• Use thumbnail previews to make links more attractive.
• Ensure mobile responsiveness for small screens.

Fallback Strategy: Show Popular or Recent Posts

If no related posts are found (especially for new content), show a fallback list of recent or popular posts. This keeps the reader engaged.

{% raw %}
{% if related_posts.size == 0 %}
  <h3>Recent Posts</h3>
  <ul>
    {% for post in site.posts limit:5 %}
      <li><a href="{{ post.url }}">{{ post.title }}</a></li>
    {% endfor %}
  </ul>
{% endif %}
{% endraw %}

Conclusion

Implementing a related posts section in Jekyll without plugins is not only possible but also effective. Whether using tags, categories, or a custom list, the result is better content discovery and improved user retention. With smart design and logic, even a static blog can deliver a dynamic and engaging reading experience.