Learning to Hugo Part 3: Front Matter

Intro

This is the third part of the learning to Hugo series detailing my journey to getting this site up and running! I am also using Hugo to configure my business website . In typical dev style, I just installed Hugo and got going. I have learnt a few things along the way that have improved my development time and hopefully these things will help you.

In this section I am going to explain how to use front matter to manage my content.

Health & safety warning

I am no web dev! My world is data and so this stuff is outside my area of expertise. I am learning as I go and so the info I am sharing is my interpretation of that in a way that makes sense for me as a data-person-doing-web-dev. Some of the technical aspects might be a little misunderstood and I would love to hear from you in the comments if you think there’s a better way or if I have misunderstood a concept. Hopefully outlining my understanding of it might make it easier for someone wanting to give it a go. If you want advanced CSS understanding or web development skills though these are not the posts you’re looking for!

What is front Matter

Front matter is essentially metadata embedded in your content file, it provides information that controls how Hugo interacts with your content. All examples below are going to use YAML, but it’s possible to write front matter in TOML, YAML or JSON (see Hugo docs on front matter formats ).

Front matter can be used to control whether or not a page is listed, or created. It can be used to categorise posts or provide information for other pages for instance creating a list of posts in chronological order. Most of what goes into your front matter will be driven by what front matter your theme uses. I have actually started to use mine to customise information when using shortcodes.

My front Matter

Here is the front matter for this very page at the time of writing;