automatic related posts in jekyll without using yaml

Why Skip YAML for Related Posts

Maintaining related posts manually in _data can be tedious, especially for large sites. Many beginners prefer a system that automatically suggests posts based on tags or categories. In this article, we’ll build a YAML-free, auto-related-posts setup using only front matter metadata and Liquid filters.

What You'll Get:

  • Automatic related post suggestions based on tags
  • Dynamic filtering using Liquid
  • Easy fallback logic to avoid empty results
  • No need for maintaining external YAML

Step 1: Tag Your Posts Properly

Ensure your posts have tags in the front matter:

---
title: "Optimizing Liquid Performance"
tags: [performance, liquid, optimization]
---

Tags are the most reliable and flexible metadata for content grouping in Jekyll. You can also add categories as an additional filter layer.

Step 2: Add Related Posts Block to Layout

Insert the following code inside your post layout (e.g., _layouts/post.html) or in an include:

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

{% for post in related_posts %}
  {% assign intersect = post.tags | where_exp: "tag", "current_tags contains tag" %}
  {% if intersect != empty %}
    {% assign filtered = filtered | push: post %}
  {% endif %}
{% endfor %}

{% if filtered.size > 0 %}
  <div class="related-posts">
    <h3>Related Posts</h3>
    <ul>
    {% for post in filtered limit:5 %}
      <li><a href="{{ post.url }}">{{ post.title }}</a></li>
    {% endfor %}
    </ul>
  </div>
{% endif %}

Explanation

  • where_exp filters out the current post
  • Loop compares each post's tags with the current post
  • If overlap exists, that post is added to filtered

Optional: Add Fallback Based on Category

If no related posts were found based on tags, you can fall back to category-based matching:

{% if filtered.size == 0 %}
  {% assign fallback = site.posts | where_exp: "post", "post.url != page.url and post.categories contains page.categories[0]" %}
  <div class="related-posts fallback">
    <h3>Other Posts You May Like</h3>
    <ul>
    {% for post in fallback limit:5 %}
      <li><a href="{{ post.url }}">{{ post.title }}</a></li>
    {% endfor %}
    </ul>
  </div>
{% endif %}

This logic uses the first category of the current post to find similar ones. You can expand it with more complex logic if needed.

Styling the Related Posts Block

You can style the related posts section using your preferred CSS:

.related-posts {
  border-top: 2px solid #ccc;
  padding-top: 1em;
  margin-top: 2em;
}
.related-posts h3 {
  font-size: 1.2em;
  margin-bottom: 0.5em;
}
.related-posts ul {
  list-style: none;
  padding-left: 0;
}
.related-posts li {
  margin-bottom: 0.4em;
}

Performance Tips

  • Limit the number of related posts shown (e.g., 3–5) to keep rendering fast
  • Ensure all posts are tagged to improve the match rate
  • Use where_exp for more flexible conditions than simple filters

Pros and Cons

Pros Cons
No external YAML to manage Less control than curated related groups
Updates automatically when tags change May include less-relevant posts
Easy for beginners to implement Can’t define custom titles or per-language groups

When to Use This Method

This approach is ideal if:

  • You’re just starting with Jekyll
  • You want an automated system
  • Your content uses consistent tagging

However, if your site requires curated control or multilingual filtering, using YAML remains the better option.

Conclusion

Building related posts without YAML is both beginner-friendly and powerful when you’re dealing with a growing content base. By leveraging Liquid filters and consistent tag usage, Jekyll can dynamically render relevant suggestions for every post, with minimal maintenance effort.

In the next article, we’ll look into **enhancing this system using text similarity detection**, external plugins (if using local builds), and hybrid strategies combining both automated and curated logic for maximum flexibility.


Archives / All Content


© BoostScopeNest . All rights reserved.