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. Just run your string through emojify and you should see an icon.
1
{{emojify":v:"}}
Results in: ✌️
For more options and a list of emojis you can use, see the cheatsheet below.
To automatically convert emoji within your blog posts when using Hugo, we can enable them within our config file. In our example, it’s called config.toml and found in the root of our project.
config.toml
1
enableEmoji=true
Once we turn this on, we can just type the tags from the cheatsheet above, and then should show as an icon.
Edd is a PHP and Go developer who enjoys blogging about his experiences, mostly about creating and coding new things he's working on and is a big beliver in open-source and Linux.
Add a 404 Not Found Page
–
In an ideal world, every web page would exist, but sometimes links go to pages that doen’t exist. This is why we make “404 - not found” pages. In Hugo you can do the same. Many of our sites are hosted with Netlify which also support these files - automatically returning the correct http status code for them.
To make yours, you can add a file into your layouts folder.
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.
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.
