Revised Jekyll related posts

Bloggers who have development skills use tools like Jekyll as a blogging platform instead of many other popular options especially designed for people without technical background .

Jekyll is a static site generator and blog aware tool written in Ruby which allows to create fully fledged blogs without the need for a database to store the content because everything from configuration files to content files are static files .

Jekyll related posts can only show recent posts (related in time ) who may not necessarilly be related in terms of subject so the name needs to be page.recentposts instead of page.relatedposts .

In this post we are going to see how we can implement a real related posts feature which looks at different post indicators such as that categories and tags to figure out similar and related posts .

We are going also to see available Jekyll plugin(s) built by the community which use advanced algorithms such as TFIDF and LSI . to further analyze the post content to guess related posts instead of the trivial categories and tags .

Implementing Jekyll related posts based on tags and/or categories


First you need to assign proper tags (or categories or both ) to your posts to use this technique for related posts .

For tags ,this was picked up from this StackOverflow answer

Under your _includes folder create a related-posts.html file and copy the following Liquid code

{% assign maxRelated = 5 %}

{% assign minCommonTags =  3 %}

{% assign maxRelatedCounter = 0 %}

{% 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 %}
        {% capture tagmarkup %} <span class="label label-default">{{ tag }}</span> {% endcapture %}
        {% assign commonTags = commonTags | append: tagmarkup %}
        {% endif %}
    {% endif %}
    {% endfor %}

    {% if sameTagCount >= minCommonTags %}
    <div>
    <h5><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}{{ commonTags }}</a></h5>
    </div>
    {% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}
    {% if maxRelatedCounter >= maxRelated %}
        {% break %}
    {% endif %}
    {% endif %}

{% endfor %}

Then to include it in any post :

{% include related-posts.html %}

You can do the same with categories by just changing the few lines referring to tags and replace them with categories .

As you may see to Liquid code looks for most recent posts that have common tags (and categories if you need ) which may not be the best result you want so lets see another way which use content correlation algorithms .

Advanced Jekyll related posts


We are going to use a Jekyll plugin that can be installed from gem .

First of all ,since the plugin is a native extension we need to install Ruby dev files so gem can built it without errors .

So go ahead and open your terminal and install Ruby dev files .

For Ubuntu ,you can install them with :

sudo apt-get install ruby-dev

Next lets install the gem by entering

gem install jekyll-related-posts

Next open _config.yml and add 'jekyll-related-posts' to gems array .

Now open your post layout (_layouts/post.html ) and insert

<related-posts />

Where you want your related posts to appear .

You can further cutomize the plugin by setting configuration variables in _config.yml

related:
    max_count: 5
    min_score: 0.1
    accuracy: 0.75

And you can also cutomize the related posts template by creating related.html template under layouts folder .Here the default content of related.html

{% if related_posts != empty %}
<div id="related-posts">
<h3>Related posts</h3>
<ul>
    {% for p in related_posts %}
    <li>
        <a href="{{ p.url }}" data-score="{{ p.score }}">{{ p.title }}</a>
    </li>
    {% endfor %}
</ul>
</div>
{% endif %}

For more information about the plugin visit its Github repo

Conclusion


So as we have seen ,The default Jekyll related posts use a time basis to tell if posts are related ,which is in reality recent posts ,that may not be the required behavior desired by many bloggers ,instead we have used a Liquid code to check for tags to show most recent and related posts and for advanced related posts based on analyzing the posts content we have used a Jekyll plugin installable for GEM .

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status