Blog Post Feature Images as AVIF (with JPEG Fallback)

AVIF files are images available to be shown on the web, made using the AV1 codec. They offer superiour compression and quality when compared with jpeg files and can be a good choice for display ’nice-looking’ pictures on your site. In this post we look at how you can start using them with Hugo. We originally made the avif files using Gimp, but there are online converters available. To begin with, this is how we define the images we want to use for the blog post.

#avif #format #image #picture #element #compression #extension #av1 #retina

Markdown for Hugo: Cheatsheet

This is designed to be a ‘cheatsheet’ to help you find the syntax you need quickly for creating markdown content on Hugo sites. Code Block 1 2 3 4 5 ```css body { background: red; } ``` To define a code block, wrap the code in backticks like: ` Three of them, and you can define the code language after the first set, like we’ve said the above code is css.

#markdown #cheatsheet #basics #content #posts #bold #italic #code #block #html

Using Emoji In Posts & Themes

Emojis have been named word of the year and are seen every day in modern culture. We use them every day on our messaging apps, emails and … err blogs! This post is about how you can enable and use them in both your Hugo themes and, in general, when writing posts. Using Emojis in Themes To use them within your theme, there’s a built in function which turns text in emojis.

#emoji #function #emojify #config #toml #icon #image #theme #cheatsheet

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.

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

Next Page → { 1 }