Make with Hugo Logo

Make with Hugo

Tutorials for the Popular Static Site Generator Hugo
  • All
  • Tutorials
  • Shortcodes
  • About

Change a URL on a Post (While Preserving SEO)

If you use Hugo, we’ve all been there: create a post, give it a url - spell something wrong in the url, doh! This post hopes to explain how you can change the URL of a post, while preserving the SEO benefits associated with it. We can do this, by changing the URL on the post to what we want then setting up an alias for the old url. This was existing traffic and Google still know what’s going on and will treat it as the same page.

#url #alias #aliases #spelling #mistake #seo #meta #301 #google #page #post

Hide a Page in Hugo

Option 1: Draft The simplest way to hide a page when using Hugo is probably to set the post as a draft. This way, you still have the content ready to go for when you need it. To hide a page by setting it as draft, so our drafts page: Set Post as Draft Tutorial Option 2: Hide from Posts List You still want the page to be visible, but you don’t want to show it your blog posts list?

#hide #post #draft #if #notequals #theme #list #summary

Migrate Wordpress to Hugo

Wordpress is a fantastically popular blogging platform, but judging by the fact you are here, you’re looking to move to Hugo (great choice!) The software we’ve used in the past to do this for us is called wordpress-to-hugo-exporter (does as it’s name suggests). This will essentially convert the database posts saved into markdown files which you can use in Hugo and with your theme of choice. View on Github How to It’s important to note this works as a Wordpress plugin, so if you can’t install plugins it may not work for you.

#wordpress #migrate #github #repo #markdown #export #xml #howto #config #new

Working with Draft Posts

Hugo has a built in mechanism for draft postings. This allows you to work on a post and not publish it until you are ready. Great for when you’re dipping in and out of writing.

#draft #postings #hidden #progress #list #working

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

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
Next Page  → { 1 }
Privacy Policy
Site illustrations (of Hugo the rabbit) drawn by Carina Roberts.
Tutorials & Site Content © 2022 Make with Hugo
Code Licenced under MIT Licence