hugo 0.31

Hugo Bits: Part 1

Reading Time

Welcome to “Hugo Bits”, a new collection of articles where we’ll learn and practice small parts of the Hugo static site generator. Bits of knowledge if you will.

We’ll start by adding the common “x minutes to read” on our page to let the reader how long will it take him/her to read the article.

Set up

Before we can do anything, we need to have a website and some content. So let’s create a new Hugo site:


    $ hugo new site hugo-bits
    $ cd hugo-bits
    $ cd themes
    $ git clone https://github.com/budparr/gohugo-theme-ananke.git     //This will install the ananke theme

Now we have a new Hugo website with the Ananke theme. Follow the config instruction on the theme page and we are ready to add content.


    $ hugo new article/Hugo.md
    $ hugo new article/Hugo-quotes.md
    $ hugo new article/Hugo-did-you-know.md

Add some content to the articles. If you leave them empty there will be no text to estimate the reading time.

Reading time

With Hugo this task is super easy. I couldn’t be any easier.

We need to add a small piece of code on the single.html layout. If you installed a theme, like I did, you can find a single.html layout already on the theme and copy it and paste it on your theme. I found mine on: themes/gohugo-theme-ananke/layouts/_default To overwrite this, I made a copy to: hugo-bits/layouts/article

Add this code wherever you want the reading time appear:


    {{ .ReadingTime }}min

Yes, that’s all!

reading time

The code for this is available on GitHub.

Avatar author

Web developer. Always learning.

Let's share this!