Two tips for using Hugo Pages

Here I will give few tips about Hugo pages about use of slugs and shortcodes. Writing content for the “Hugo” is quite easy - all is Markdown. There are couple things I would like to point out for the new users of the Hugo.

  • Slug
  • Shortcodes


Quick description of what is “slug” you can find here: Hugo documentation about slug. From the first glance it might not be very clear what is the purpose of slug. Manual change of the real content path to some alternative one does not seem practical.

But I found slug useful when I make public web site for which I want to hide internal structure: paths, filenames. And it is very easy to use hash string of the date as a slug. In my archetype (it is located in archetypes/ and I use SHA256 hash as a slug for my posts (as you can see from the URLs of my web-site 😉). Slug is automatically generated using following expression:

slug: "{{ sha256 (now.Unix) }}"

As a result, every time when I create new post with the hugo new posts/ command, the front matter will contain unique automatically generated slug and it will be the post path visitors see.


“Shortcodes” are described here: Hugo documentation about shortcodes. While Hugo can convert standard Markdown links, the disadvantage of the original Markdown syntax is that you cannot e.g. make relative links or alter image size, or embed Youtube or Vimeo video in the content.

Here are shortcodes I found useful:

When I want to make link to one of my previous posts. Because I use slugs and URLs of my posts do not match source files naming and paths, I use rel and relref shortcodes:


Another very useful shortcode is “figure”: It allows to show image and also define additional parameters like: width, height, alt text, caption, etc.

Other shortcodes

It is worth to have a look into other shortcodes of the Hugo and get used to them. I found them very helpful and they are a good compliment to the standard Markdown syntax.