It’s all the trend these days to add “reading time” or a word count on your blog posts to indicate how big they are. We often add a word count as it’s super easy to add to your Hugo site (except we don’t on this site - oops!)
Word Count
We can use word counts in our theme template. We’ve shown the likely file below, but might change based on your theme and setup.
The simplest way is to use Hugo’s built-in reading time, like belo:w
1
{{ .ReadingTime }} minutes
Example: 2 minutes
Alternative Way (including seconds):
We can use the word count to produce an estimated reading time for you post. This is based on the assumption that the average person reads about 200-250 words per minute.
1
2
3
4
5
{{ $readTime := mul (div (countwords .Content) 220.0) 60 }}
<p> {{ math.Floor (div $readTime 60) }} minutes
and {{ mod $readTime 60 }} seconds.
</p>
Example: 2 minutes and 47 seconds.
There we have it - a how to on adding word count and reading times to your Hugo blog posts - good luck!
Edd is a PHP and Go developer who enjoys blogging about his experiences, mostly about creating and coding new things he's working on and is a big beliver in open-source and Linux.
Changing the Syntax Highlighting Style in Hugo
–
When building a website using Hugo, you might want to customize the syntax highlighting to match your site’s overall aesthetic. Hugo uses Chroma, a powerful syntax highlighting engine, to provide code highlighting out of the box.
In this blog post, we’ll guide you through the process of changing the syntax highlighting style in Hugo using Chroma, with the help of the hugo gen chromastyles command.
Add Adsense Ads to Your Posts
–
This post sets out how you can add your Google Adsense code to your blog posts. As this is MakeWithHugo, we’ll be adding them to our Hugo site.
You’ll need a few things before starting, an Adsense account, the snippet of code from Adsense and knowing where you want to put them (or auto ads for the easy option).
There’s a few different ways to achieve this, based on where you want them.
Add a 404 Not Found Page
–
In an ideal world, every web page would exist, but sometimes links go to pages that doen’t exist. This is why we make “404 - not found” pages. In Hugo you can do the same. Many of our sites are hosted with Netlify which also support these files - automatically returning the correct http status code for them.
To make yours, you can add a file into your layouts folder.
