Add blog post reading time into your Jeykll static site, with no addons!

Photo by Mari Helin on Unsplash

When I first started looking for a theme for my blog, the one you’re now seeing is the one I chose because it met many of my criteria. However, it had one minor issue: I wanted to include user reading time estimates.

Integrating a reading time estimator into your Jekyll blog can significantly enhance the reader’s experience by providing a quick insight into the length of the article. This feature is especially useful for readers deciding which articles to read based on their available time. Below is a concise guide on how to reproduce this functionality using a specific Liquid code snippet you’ve provided.

Step 1: Understanding the Code Snippet

The code snippet you’ve shared calculates the estimated reading time of a blog post. Here’s the breakdown:

{% capture words %}
{{ content | number_of_words | minus: 180 }}
{% endcapture %}
{% unless words contains '-' %}
<i class="icon ion-md-time" style="padding-right: 8px;"></i>{{ words | plus: 180 | divided_by: 180 | append: ' minute read' }}
{% endunless %}

This snippet works by:

• Calculating the Number of Words: It captures the total word count of the content, subtracts 180 (assuming the first 180 words are read at a different pace or to adjust for short posts).
• Checking for Negative Values: It ensures that the result doesn’t indicate a negative reading time, which would happen if the post is shorter than 180 words.
• Calculating Reading Time: For content longer than 180 words, it adds back the subtracted 180, divides by 180 to estimate reading time in minutes (assuming an average reading speed of 180 words per minute), and appends “ minute read” to the result.

Step 2: Implementing the Feature

Insert the Code into Your Post Layout

1. Locate the Post Layout File: This file is generally found within the _layouts directory and typically named post.html or a similar variant, depending on your theme’s structure.

2. Embed the Code: Paste the provided Liquid snippet into the HTML of your post layout file at the position where you want the estimated reading time to appear, such as above the post title or below the post metadata.

Step 3: Customizing the Appearance (Optional)

• Icon Customization: The snippet uses an <i> tag for displaying an icon next to the reading time. This is set to use Ionicons (ion-md-time). Ensure your site includes the Ionicons library, or replace it with an icon from another library you prefer. You may need to adjust the class name accordingly.
• Adjusting the Reading Speed: The default calculation assumes an average reading speed of 180 words per minute. You can modify this value by changing the divided_by: 180 portion to match your audience’s reading speed more accurately.

Step 4: Testing and Deployment

• Build Your Site: Use the jekyll build or jekyll serve command to generate your site. This process compiles your site, incorporating the reading time feature into your blog posts.
• Verify Functionality: Navigate through your blog to ensure the reading time is correctly displayed for each post. Check a few articles of varying lengths to confirm the reading time adjusts appropriately.

Conclusion

By integrating this reading time estimation code into your Jekyll blog, you not only offer a valuable piece of information to your readers but also enhance the overall user experience on your site. This feature adds a professional touch, allowing readers to gauge the commitment needed to engage with your content, potentially increasing readership and time spent on your site.