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.