Pre-order my new eBook: Design Faster, Design Better

Jekyll - Add Estimated Reading Time To Posts

Jekyll - Add Estimated Reading Time To Posts - Cover Image

Published: April 28, 2021

Reading Time: 1 mins

Web-Development

Adding the estimated reading time of your article provides valuable context for readers. They can decide if they want to read your article now or bookmark it and save it for later.

It’s a feature seen most commonly on the Medium platform but you can replicate this feature on your Jekyll site.

After some tweaking, I have been able to add this feature to my website (it’s actually pretty simple) so I’d like to share the process with you.


Site Structure

Let’s start with the site structure to understand how things fit together.

In this case, there are two parts:

  1. In the _layouts folder, I have a template file called article.html. This holds the code for article pages.
  2. The CSS styling (in my case I’m working in SASS but it doesn’t matter).

Estimated Time To Read Code

Here’s the code I added to achieve estimated reading time in article.html:


{% capture words %}
{{ content | number_of_words }}
{% endcapture %}
        
<span class="readingTime">
<i class="fas fa-bookmark"></i> 
Reading Time: {{ words | divided_by: 180 | append: ' min' }}
</span>
       

The first 3 lines of code will “capture” the number of words in the article and store it in the variable called words.

The next section calculates and outputs the estimated reading time.

To do this we divide the number of words in the article by 180.

180 is the average amount of words per minute people read (according to Wikipedia).

As you can see I’m using a Font-Awesome bookmark icon but you can leave this out if you don’t want it.

I finished by adding some CSS via the readingTime class to make the font pink.

Enjoy Reading This Article?

Here are some more articles you might like to read next:

Want To Improve Your Design Skills?

Design Insight is a weekly newsletter filled with design resources, tips, and insights to make you a better designer. It's sent directly to your inbox every Friday.

Click the button below to go to the Design Insight newsletter and sign up.