Data-Files

Right, so you’ve got your data files all set up in data/, looking clean and organized. But now you want to actually use that data in your content without copy-pasting HTML all over the place. This is where Hugo’s data-driven shortcodes come in. They’re the perfect bridge between your structured data and your unstructured content pages. Think of them as little factory functions; you feed them a key from your data, and they spit out the same complex HTML every time. It’s consistency and DRY principles for the win.

Right, so you’ve got a list of people, and you want to build a team page without copy-pasting a mountain of HTML for every single profile. Welcome to the party. We’ve all been there, staring at a dozen nearly identical <div> blocks, knowing that adding a new team member is an exercise in tedious, error-prone repetition. This is where Hugo’s data templates and the data/ directory come in to save your sanity. Think of it as moving your content out of your templates and into a structured, easily manageable file—like a mini-database for your site.

Right, so you’ve got a site, and it has navigation. Maybe it’s a list of pages, maybe it’s categories, maybe it’s a collection of your favorite 80s action heroes. The point is, it’s data. And the moment you find yourself hard-coding a list of hrefs and labels in a layout file, a little alarm should go off in your head. You’ve just created a liability. What happens when you need to add a new section? You’re digging through baseof.html or some other template, praying you don’t mangle the markup. This is why Hugo gave us the data/ directory and data templates. We’re going to use them to build a navigation menu that you can manage with a simple text file, like a civilized person.

Right, so you want to fetch some data from the internet and jam it into your Hugo site. Maybe it’s a JSON API from a third-party service, maybe it’s a CSV file you’re keeping on GitHub, maybe it’s the latest manifesto from your favorite obscure band. You’ve heard about resources.GetRemote, and you’re thinking, “Great! A simple GET request. How hard can it be?” Famous last words. Let’s pull up a chair. This is one of those Hugo features that is incredibly powerful but has more sharp edges than a bag of broken glass if you don’t know how to handle it properly. I’m here to make sure you don’t bleed all over your build script.

Right, so you’ve got your data/ directory humming along nicely. You’re pulling in a single config.yaml file and feeling pretty good about yourself. I get it. But your project is growing up, and you’re starting to realize that dumping everything into one massive file is like trying to cook a five-course meal on a single burner. It’s time to get organized. This is where nesting comes in, and Hugo’s data templates are about to become your new best friend.

Right, let’s talk about .Site.Data. This is where Hugo stops being just a static site generator and starts feeling like a proper application framework. It’s the primary way you inject structured, non-content data into your templates. Think of it as your personal data pantry, stocked with JSON, YAML, or TOML goodies that you can pull out and use to build just about anything. The concept is brilliantly simple: you drop a data file (say, authors.json) into your data/ directory, and Hugo automatically makes it available to you at .Site.Data.authors. No import statements, no configuration, no fuss. It’s just there. This is Hugo’s data-driven design philosophy at its best—convention over configuration, working exactly as you’d hope.

Right, let’s talk about your data/ directory. This is Hugo’s designated “I’m not a page, I’m just data” drawer. It’s where you stash all the structured information your site needs but that doesn’t deserve (or want) its own front matter and Markdown content. Think of it as your site’s personal JSON, YAML, TOML, and CSV junk drawer—hopefully more organized than your actual junk drawer. The beauty here is that Hugo, in its infinite wisdom, automatically slurps up any file in data/ and makes it available globally in your templates under the .Site.Data variable. The name of the file becomes the top-level key. It’s dead simple and incredibly powerful.