Sections

Right, let’s talk about the one thing Hugo thinks it can solve with a single number but which, in practice, requires a bit more finesse: ordering your content. You’ve got a list of pages—say, your blog posts or project portfolio—and by default, Hugo just slaps them on the page in chronological order. Sometimes that’s fine. Often, it’s anarchy. You want control. You want to say, “This one goes first, then that one, then the weird one from 2015 that’s suddenly relevant again.”

Right, let’s talk about the beating heart of your site: Content Types. This isn’t just some abstract CMS concept; it’s the single most important organizational decision you’ll make. Think of a Content Type as a blueprint. You wouldn’t let a builder just throw rooms onto a house willy-nilly, right? You have a blueprint for a Kitchen: it has a sink, counters, an oven hookup. A blueprint for a Bedroom: it has a closet and windows. That’s what we’re doing here. We’re defining the blueprints for the different kinds of content our site serves.

Right, let’s talk URLs. This is where your content meets the world, and frankly, it’s where a lot of otherwise brilliant sites face-plant. A clean, predictable URL structure isn’t just SEO catnip; it’s a promise to your users. It says, “I know where you are, I know how you got here, and I know how to get you back.” Let’s make sure you can keep that promise. The Humble slug Field Think of the slug as the final, URL-safe version of your content’s title. You give it My Epic Blog Post! and it gives you back my-epic-blog-post. It’s the content’s fingerprint for the web. The beauty of letting Eleventy generate this for you is consistency. You define the rules once, and every piece of content follows them.

Right, let’s talk about the digital equivalent of a ghost: content that exists, has substance, but you can’t actually see it on its own. We call these Headless Bundles. The name sounds like a cryptic metal band, but the concept is one of Craft’s most powerful and, frankly, most misused features. Think of your site’s structure as a tree. Most entries are leaves—they have a specific URL (/blog/my-great-post) and render a page. A Headless Bundle is a branch. Its job isn’t to be a leaf you look at; it’s to hold other leaves (or other branches!) together. It’s an organizational parent, not a final destination. The most common use case is for a headless CMS setup, where Craft is only serving data via GraphQL or REST, not rendering Twig templates. But even in traditional sites, they’re invaluable for grouping content you’ll only ever reference indirectly, like a team of authors, a product category, or a set of legal documents.

Alright, let’s talk about Leaf Bundles. This is where Hugo’s content organization goes from “neatly organized” to “genuinely clever.” Forget the old way of having a single post.md file and a separate /images folder you have to mentally link together. We’re adults. We can keep our things in the same room. A Leaf Bundle is just a directory inside your content folder that represents a single page. The magic is what you put inside it. The star of the show, the non-negotiable, is an index.md file. This is your content’s main event—it holds the front matter and the body content. But here’s the kicker: you can throw other files right in there alongside it. Images, PDFs, a custom JSON data file for this specific page… you name it. Hugo will not only manage them but will also make them incredibly easy to reference from within that index.md.

Alright, let’s talk about Branch Bundles. This is one of those Hugo concepts that seems bafflingly complex until the moment it clicks, and then you wonder how you ever lived without it. It’s the key to unlocking a clean, logical, and maintainable site structure. Forget about jamming everything into a posts folder; we’re building a proper content hierarchy here. The core idea is simple: a Branch Bundle is just a content directory that represents a section of your site (like /blog or /projects) and can have its own content file, template, and metadata. The magic happens with the _index.md file. Think of it as the home page for that entire section.

Let’s get one thing straight: in Eleventy, your file system is your URL structure. It’s not a suggestion, it’s not a guideline—it’s the law. Forget complex routing tables or configuration nightmares for basic stuff. You put a file called my-rad-post.md in a folder named blog, and Eleventy, without any fuss, will build it out to /blog/my-rad-post/index.html. This is the core of its “convention over configuration” philosophy, and it’s brilliant because it’s simple. You can predict the final URL just by looking at your project’s folders.