34.6 Setting Up Editorial Workflow and Preview

Right, so you’ve got your headless CMS pumping out content and your Hugo site statically generating from it. It’s a beautiful, modern setup. Until you realize you’ve just handed your editorial team a live grenade without the pin. They’re writing copy in a CMS interface that’s essentially a fancy text box, and they have to hit “publish” based on… what, exactly? Faith? A screenshot you sent them last Tuesday? This is how you get frantic 5 PM phone calls.

34.5 Contentful: API-Driven Content with Hugo

Right, so you’ve decided to build a site with Hugo’s speed and Contentful’s editorial-friendly interface. Good choice. This is the “have your cake and eat it too” of the JAMstack world: a dynamic content backend for your editors and a screamingly fast, pre-baked static site for your users. Let’s wire them together without setting anything on fire. First, the mental model: Hugo is a static site generator. It doesn’t “talk” to Contentful in real-time. Instead, we use Hugo’s built-in power to consume data from external APIs—a feature they call “Data Files,” which is a criminally boring name for something so powerful. We’re going to point Hugo at Contentful’s API, tell it to fetch all our content, and then use that data just like we would with local .md files. The magic happens at build time, not runtime.

34.4 Forestry.io and Its Successor Tina

Right, let’s talk about the great decoupling: getting your content out of your code and into a proper CMS. You’ve built a slick Hugo site, but the thought of your non-technical marketing team trying to git commit is giving you hives. Enter the Headless CMS. And for a long time, the go-to, almost-default choice for Hugo was Forestry.io. It was a beautiful, git-based solution that felt like it was made for Hugo. Then, one day in late 2022, they pulled the plug. Poof. Gone. It was a stark reminder that we build our houses on other people’s land. But from its ashes rose a phoenix, albeit a phoenix that changed its name and a lot of its DNA: TinaCMS.

34.3 Tina CMS: Visual Editing with GitHub Backend

Right, so you’ve built a Hugo site. It’s fast, it’s clean, and you feel like a wizard every time you run hugo server. But then you have to edit a config.toml file or, heaven forbid, a Markdown file directly to change the hero text from “We create synergies” to something that doesn’t make your readers vomit a little in their mouths. This is where a headless CMS swoops in, and TinaCMS is a particularly intriguing option because it doesn’t just manage your content—it lets you see the changes live, right on your site, as if it were a WordPress page. It’s visual editing without sacrificing the static-site goodness.

34.2 Decap CMS (formerly Netlify CMS): Git-Based Content Management

Alright, let’s get our hands dirty with Decap CMS. You might still know it as Netlify CMS, but they had to change the name—turns you can’t trademark “Netlify” if you’re not, you know, Netlify. It’s a classic open-source story: build something amazing that becomes synonymous with a platform, and then have to politely cough and say, “Actually, it’s a separate thing.” But the name is about all that changed. The concept remains gloriously, stupidly simple and effective.

34.1 What a Headless CMS Adds to Hugo

Right, so you’ve built a few sites with Hugo. You’ve wrestled with the config.toml until it cried uncle, you’ve meticulously crafted your content in beautiful, version-controlled Markdown files. It’s a fantastic workflow. But then they showed up. The marketing team. The client. Or maybe just the part of your own brain that craves a WYSIWYG editor and doesn’t want to git commit every time someone needs to change the company phone number.

— joke —

...