Add Word Count & Estimated Reading Time to Posts

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.

#words #count #reading #time #estimated #theme #template #minutes #seconds

Show Related Posts in Hugo

Hugo is a great tool for blogging, creating quick and automated posts. As part of a blog, you will sometimes want to show related articles and posts to the one you’re reading. This is what this post sets out to achieve. We can make this in Hugo easily if we are using it’s tags structure. With this in mind, you’ll need to be listing tags within your markdown for this to work.

#related #posts #tags #intersect #scratch #theme #blogging #articles #summary

Deploy a Hugo site to Netlify

Netlify is a convenient hosting platform for staticly built sites, like those built with Hugo, as it offers fast and cheap delivery of HTML files. In this tutorial, we will quickly run through how you can take your site from your local computer and push it out to the world-wide web.

#deploy #netlify #hugo #site #live #public #push

Add an RSS Feed

Although not as sought-after as they once were, RSS feeds can still be a useful addition to any site - if only to allow Google Webmasters to easily crawl it. Luckily, with Hugo this process is very simple as the functionality comes built in and ready to go for when you need it.

#rss #feed #xml #href #head #html #webmaster #tools #config

Thumbnail Images on your Hugo Blog Posts

Hugo now has the ability to do image resizing, cropping, quality-changing, etc (hooray!) - so how do we use it? In this post we take a look at how to resize images automatically using Hugo. There’s a few different ways to achieve this, depending on what you’re trying to do. In a Theme - “I want to make thumbnails!” You might run a blog, which on the home page has a list of your blog posts.

#images #thumbnail #summary #resize #crop #posts #content #resource

Shortcode to Add a Strikethrough

Edit 21/02/2023: There’s a much easier way to do this when using markdown, by using a tilde character twice. In your markdown for your post or page, wrap the text in a double ‘squiggle’ character and it will strike it out. See our example below 1 ~~Example~~ Looks like: Example (thanks stp in the comments) Original Post: This is part of our Hugo shortcode series. In this post we wanted to make a quick shortcode to add a strikethrough to some of our text. We use a very similar method to the raw html shortcode, but encompass it with the <strike> element.

#shortcode #strikethrough #text #typography #html

99+ Google Pagespeed Score with Disqus

If you’re into your front-end web performance you will probably have heard of Google Pagespeed and/or Lighthouse as tools to test and measure how quickly and efficiently you web pages load. This is also something we use here on this site to make your reading as pleasant as possible. But, we also use the online commenting system called Disqus and the two don’t always play nicely together - in that Disqus loads lots of files and takes a while to load.

#performance #disqus #pagespeed #lighthouse #frontend #js #javascript #intersection

Shorten your Summary: The 2 Methods

If you are anything like me and blog about code a lot, you will sometimes want to start with a short paragraph, then straight into some code. Like this: 1 echo "Hello World" Problem: But if you do this, then the .Summary data on your list will look like this (notice the line number and code in it): When perhaps you would like it to look like this (free of code):

#summary #shorten #substr #hide #more #override #markdown

Shortcode: Add Raw HTML to Your Posts

There are times that your imagination stretches beyond markdown’s capabilities. When this happens it can be easiest to use HTML with your post, but Hugo doesn’t always like this. If we create a shortcode though we can switch between markdown and html easily.

#shortcode #rawhtml #html #web #content #code #markdown

Shortcode: Add a Retina Image to Posts

In this shortcode post, we show you how to conveniently insert a retina screen ready image into your page - while still writing your posts in markdown. This means you won’t have to resort to putting raw html in your posts.

#shortcode #retina #image #highdef #srcset