Using Parameters in Your Theme

In Hugo, you can access the parameters specified in the front matter of your content files (e.g., Markdown files) through your Hugo templates. These are called ‘Page-level Params’. This post explores how you can use these within your theme. We’ll be using an example of featured_image added our post below. 1 2 3 4 5 --- title: "My Post" date: 2023-06-01 featured_image: "/img/2022/goldie1.jpg" --- You can then use this parameter when editing your theme using the template tag shown below:

#params #theme #page-level #image #template #feature-image #variables

Changing the Syntax Highlighting Style in Hugo

When building a website using Hugo, you might want to customize the syntax highlighting to match your site’s overall aesthetic. Hugo uses Chroma, a powerful syntax highlighting engine, to provide code highlighting out of the box. In this blog post, we’ll guide you through the process of changing the syntax highlighting style in Hugo using Chroma, with the help of the hugo gen chromastyles command.

#syntax #highlight #chroma #css #generate #theme #dracula

Add Adsense Ads to Your Posts

This post sets out how you can add your Google Adsense code to your blog posts. As this is MakeWithHugo, we’ll be adding them to our Hugo site. You’ll need a few things before starting, an Adsense account, the snippet of code from Adsense and knowing where you want to put them (or auto ads for the easy option). There’s a few different ways to achieve this, based on where you want them.

#adsense #ads #partial #theme #single #code #advert

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.

#notfound #404 #status #http #page #static #theme

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