Alright, let’s get our hands dirty. Before you can make your site do backflips, you have to tell it how to stand up. That’s what this front matter is for. Think of it as the instruction sheet you slap on top of your content—a quick, machine-readable note that says, “Hey, Hugo, process this one like that.”

We’re going to focus on the absolute non-negotiables, the fields you’ll use on nearly every single piece of content you create. Get these wrong, and the whole operation goes sideways.

The Unholy Trinity: title, date, and draft

These three are the bedrock. Miss one, and you’re gonna have a bad time.

title is straightforward. It’s the name of your page or post. But here’s the first designer quirk I’ll call out: Hugo is weirdly flexible about this. You can use title in your front matter, or if you’re writing a Markdown file, the first-level header (# My Header) can also act as the title. My advice? Pick one lane and stay in it. Using both is a recipe for confusion. I always use the front matter title field because it’s explicit, unambiguous, and available in every format (TOML, YAML, JSON).

date is where the pedantry begins. Hugo uses this to sort your posts and, more importantly, to generate the permanent URL (if you have pretty URLs enabled). The format is non-negotiable: RFC 3339. That means YYYY-MM-DDTHH:MM:SSZ. The T and Z are critical. The Z stands for Zulu time, aka UTC. If you’re in a different timezone, you can use an offset like -07:00.

Let’s say you mess this up and just write date = 2023-10-15. Hugo, bless its heart, will probably interpret it as midnight UTC. Your post might appear a day early or late for your local readers. Always be precise.

draft is a simple boolean gatekeeper. When true, Hugo will skip this page unless you run the server with hugo server -D (that -D flag means “include drafts”). This is your best friend for working on posts without the world seeing your half-baked thoughts. Set it to false or remove the line entirely when you’re ready to publish. Forgetting to change this is a classic rookie mistake—you’ll sit there refreshing the live site wondering why your magnum opus hasn’t appeared.

title: "Why Static Sites are Actually Cool Again"
date: 2023-10-27T14:30:00-07:00
draft: true
# ... other fields will go here

The “What’s This About?” Fields: description and summary

Now, a bit of nuance. These two are often confused because their jobs seem similar, but Hugo and search engines treat them very differently.

description is your elevator pitch to Google. This text is often plopped directly into the <meta name="description"> tag of your HTML. It’s what shows up in search engine results pages (SERPs). It should be a compelling, concise summary of the page’s content, ideally under 160 characters. This is for machines and strangers. Do not leave this blank. An empty description tag is a missed SEO opportunity, and Google might just grab a random snippet of text from your page instead.

summary is for your templates. It’s intended to be used on listing pages, like your homepage or category pages, as a preview blurb for the full article. By default, if you don’t provide a summary, Hugo will auto-generate one by taking the first 70 words of your content. This is often… bad. It might be a half-finished sentence or a code comment.

The clear best practice? Always define your own description for SEO. Use summary explicitly if you want fine-grained control over how your post looks in lists. Otherwise, let Hugo do its thing with the content truncation.

title = "A Deep Dive into CSS Variables"
date = 2023-10-28T09:00:00Z
draft = false
description = "Learn how to use CSS custom properties to create dynamic, maintainable, and powerful stylesheets. Stop repeating yourself and start using variables like a pro."
summary = "Tired of repetitive CSS? CSS variables (custom properties) are here to save the day. This guide walks you through everything from basic syntax to advanced theming techniques."

See the difference? The description is a marketing blurb. The summary is a slightly more detailed teaser for someone already on your site. Nailing this distinction makes your site look infinitely more professional.