Revised Jekyll related posts

Bloggers who have development skills use tools like Jekyll as a bloggingplatform instead of many other popular options especially designed for peoplewithout 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 insteadof 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 thefollowing Liquid code

{%assignmaxRelated=5%}{%assignminCommonTags=3%}{%assignmaxRelatedCounter=%}{%forpostinsite.posts%}{%assignsameTagCount=%}{%assigncommonTags=''%}{%fortaginpost.tags%}{%ifpost.url!=page.url%}{%ifpage.tagscontainstag%}{%assignsameTagCount=sameTagCount|plus:1%}{%capturetagmarkup%}<spanclass="label label-default">{{tag}}</span>{%endcapture%}{%assigncommonTags=commonTags|append:tagmarkup%}{%endif%}{%endif%}{%endfor%}{%ifsameTagCount>=minCommonTags%}<div><h5><ahref="{{ site.baseurl }}{{ post.url }}">{{post.title}}{{commonTags}}</a></h5></div>{%assignmaxRelatedCounter=maxRelatedCounter|plus:1%}{%ifmaxRelatedCounter>=maxRelated%}{%break%}{%endif%}{%endif%}{%endfor%}

Then to include it in any post :

{%includerelated-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.htmltemplate under layouts folder .Here the default content of related.html

{%ifrelated_posts!=empty%}<divid="related-posts"><h3>Relatedposts</h3><ul>{%forpinrelated_posts%}<li><ahref="{{ 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 advancedrelated posts based on analyzing the posts content we have used a Jekyll plugin installable for GEM .