December 12, 2023

Hugo Tips & Tricks: shortcuts and functions

This blog is created with Hugo, one of the most known static site generator. It’s convenient especially for developers because it allows you to just write posts in Markdown, and then they will automatically be converted into static CMS pages.

The performances are unsurpassed. Of course, it’s just html!

performances.png

There are a lot of functions and shortcodes to help building nice pages, in this post I want to share some tricks that I use in my posts.

Table of contents:

Embed Youtube videos

The shortcode I use the most in this blog.

{{< youtube YOUTUBE_ID >}}

Internal links

If you want to link a paragraph of a page, you can use the normal link syntax followed by an anchor. By default, Hugo prints the titles (h1, h2, h3..) with an id that is title itself without spaces, you can easily use this id to anchor your links.

internal-links.png

For example, when I need to output something like this: see this paragraph about javascript, I can use the following markdown:

[see this paragraph about javascript]({{< ref "es14-array-features/index.md)#toreversed" >}})

This is very useful for creating links between posts, important for SEO, or for creating the table of contents. In this post I wrote:

- [#Embed Youtube videos](#embed-youtube-videos)
- [#Internal links](#internal-links)
- [#Embed Code blocks](#embed-code-blocks)
- [#Print Hugo shortcodes without parsing it](#print-hugo-shortcodes-without-parsing-it)
...

Embed Code blocks with style

It works like normal markdown, if you specify the language inside the blockquotes a nice and colorful style will be applied. For example ```javascript

Print Hugo shortcodes without parsing it

If you want to print a Hugo shortcode just as code, without turning it into html you have to use backslash escapes to generate literal characters instead of markdown’s formatting syntax. For example in the first paragraph of this post I had to use /* youtube YOUTUBE_ID */.

escaping hugo shortcodes

Now you are a young cowboy who knows how to take his first steps in the boundless Far West. If you want to learn how to master your own ranch, read the next post on Hugo data and taxonomies.

“Red River” Howard Hawks 1948

Irene Iaccio

Freelance web developer