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

Add Search To A Hugo Site

As with many sites these days, once they get beyond a certain size then search becomes an essential part of them. It can however, be one of the trickier parts of a statically built website because without a back-end to do the search for you, it has to be done client-side in the web browser using JavaScript. Luckily, solutions to this problem already exist and we show off one these solutions below which uses both FuseJS and MarkJS.

#search #markjs #fusejs #js #static #frontend #query #form

Show All Tags For a Post as a List

When showing your blog post, either as a single page or within a blog post list it can be nice to show the tags associated with that post (we do here on MakeWithHugo!). This is going to be a quick post (hopefully) showing you how to add your tags as a list and each linked up. You can add this code to either your single.html layout file or inside the loop in list.

#tags #post #single #list #range #loop #hashtag #urlize

Print UK Date Format for Post Date

When making this site, we wanted to show the date (above the title) in the British format by putting the day before the month. Controversial, I know. This also means including the date ordinal/suffix after the day, e.g. th, st and nd. If you were writting this format in PHP it would look like this: 1 jS M Y With the ‘S’ standing for: English ordinal suffix for the day of the month, 2 characters

#date #format #uk #ordinal #british #go #time #post

Minify and Load CSS Through Hugo

This post is about loading your CSS files with Hugo in an easy and efficient way, now that Hugo has asset and minification built-in. The advantages of using the functions that come with Hugo are that you don’t have to do any of the building yourself (or use a third party), it just does it! There are a few steps involved in the code that we will walk through: Specify your main scss filename (the one where everything imports into).

#minify #css #fingerprint #integrity #resource #assets #performance #loading

Adding Social Meta Tags into <head> for Hugo

Adding social media tags to the <head> section of your website helps Facebook and Twitter know how to show your page when someone shares it. For example, what image to use and what the title should be. Hugo themes will often come with these tags added already - but if they don’t we wanted to look at how you can add them. Facebook uses Open Graph tags and Twitter uses Cards.

#socialmedia #head #meta #tags #config #twitter #facebook #opengraph

Syntax Highlighting with Hugo (without JS)

If you are into writing code and use Hugo for building a personal or tech blog - then you’ll want syntax highlighting setup for when you show off your code snippets (like we do on this site!) It is also quite simple when you know how. Some advantages of using this method include not having to download a JS library to do the job (so performance), not having the code flash on load after the JS finishes and not having to manage another library to do a job that’s already included in Hugo.

#syntax #code #highlight #block #design #theme #chroma