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

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

Add a Last Edited Date to Posts

With frequently changing information it can be useful to record both when a post was created and when it was last updated - showing that it’s been reviewed recently. We do this on this site by showing the created date and showing the last modified date if it’s different from the created date (see above the title). There’s two ways of doing this in Hugo: recording when you last changed it using the last changed date in Git (if you use it) (or a blend of the two)

#edited #date #git #gitinfo #config #lastmod #theme #changes

Create a New Hugo Project

You’ve got your great new idea! Now how to get started? If you’re using Hugo as the tool to build your website then this post should be for you. We’ll be looking at how to create a new basic project and the first few tasks on a clean new site. You’ll need Hugo installed first, if you don’t then take a look at our guide on installing it. 1. To Begin Using the terminal or command prompt (what ever you decide to call it!

#new #project #terminal #bash #setup #create #site #command #folder #server

How to Install the Latest Version of Hugo

Ubuntu 20.04 For Debian-based linux distributions, it’s often easiest to pick up the latest copy over on the Hugo github (under Releases). One reason for this is how quickly new versions come out, the versions inside package managers can become out-dated quickly. Recommended Way: View Latest Github Releases And choose to download and install either of these (we’ve replaced the version with an X) hugo_extended_0.X.0_Linux-64bit.deb hugo_0.X.0_Linux-64bit.deb The ’extended’ version includes SASS building, extra minfiying and resource processing.

#install #git #repo #ubuntu #apt #release #latest #command

Make a Static Page in Hugo

Hugo is built with blogs in mind, and as such the pages you create will often show in the loop of blog posts. But there are times when you want to create pages - which aren’t posts - and you don’t want them to show unless you link to them. We recently came across this scenario when trying to add a privacy policy page. Here’s our solution to the problem (using the privacy policy as an example).

#static #page #layout #content #loop #privacy #contact #single