Toward using a Headless CMS with Hugo: Building Pages from Data

At The New Dynamic we love Hugo, the framework we use to build many of our websites. Through the years there has been no objective, no client request, no challenge we were not able to meet with this amazing tool. But there is one limitation that can be tedious to circumvent: Hugo cannot build distinct pages from data sources outside of individual files! No section of a site can be safely populated from an external API such as a headless CMS.

Over the course of this two part series, we’ll get into details as we conceptually build a Monsterspotting website that will publish one page for each of its “file-less” monsters and a paginated listing page!

Hugo Modules: everything you need to know!

Back in July 2029 Hugo 0.56.0 introduced a powerful Module system. Pretty much like any package solution it allowed any Hugo project defined as a Module, be it a full website or a theme or a component to use any files stored on a repository somewhere and mount it as its own. It also enabled any Hugo project to become a full fledge Hugo Modules with its own config and dependencies which any other project could mount.

In this article, we’ll see how any Hugo project can use files stored on a distant repository and make them its own using the Module imports and mounts logic. Then, we’ll dive into what exactly constitute a Hugo Module by creating our own!

From WordPress to Hugo, a mindset transition

This post is not about migrating your WordPress site to Hugo, it’s about transitioning from your WordPress mindset to Hugo’s!

By cautiously comparing Hugo’s concept and vocabulary to some you’re already familiar with, we might be able to smooth out this learning curve for you!

So let’s bring up the the_post(), the_loop and the Template Hierarchy in order to better understand Hugo’s own construct!

Hugo Multilingual Part 2: Strings localization

In the first part of this Hugo’s Multilingual series, we covered how to manage our content translations and use those in our templates.

But what about translating strings for our project or our theme?

In this second part, we’ll see how Hugo, using its familiar data structure and configuration file, allows us to localize strings in any number of languages with minimum hassle.

Hugo Multilingual Part 1: Content translation

Hugo handles multilingual perfectly from you content translation to your string localization, everything is simplified so coders and editors alike can focus on the rest.

In this first part, we’ll see how set up your multilingual Hugo project and translate your content!

Hugo Pipes Revolution

A Hugo built-in asset pipeline

{{ $style := resources.Get "main.scss" | toCSS | minify | fingerprint }} 
<link rel="stylesheet" href="{{ $style.Permalink }}" emotion="🤩">

Hugo’s roadmap got itself a new milestone when .43 delivered Hugo Pipes, a built-in set of asset processing methods.

From now on, Hugo will take care of bundling, minifying, fingerprinting our assets and even compiling our sass files! All of this without any external build tools.

In this post we’ll go through Hugo Pipes methods to cover how easy it is to implement a basic Hugo Pipes asset pipeline before turning to more advanced use cases, involving relinquishing some Sass and JS variables to our editors.

Enhance Your Hugo JSON API Using Custom Output Formats and Netlify Redirects

Hugo makes it super easy to build simple APIs with its built-in output formats. In my previous article, we built a fully functional JSON API. Today we’re going to extend the capabilities of this API and improve the user experience with better URLs.

At the moment our API can look up specific items, but can’t look at them in relation to each other. Say you want to know what players are in a specific team: with our current API, you can’t do that easily. To solve this, we’ll use Custom Output Formats to create another JSON route to read and use these relationships.

Build a JSON API With Hugo's Custom Output Formats

In order to make data that is “machine friendly” like this, we can expose it with a RESTful API. Normally, the quickest way to bootstrap an API like this would be to start with a popular framework like Flask or Ruby on Rails, spin up a webserver, and connect a database. We can achieve something even simpler, however, by creating a read-only API with a static site generator. In this article, we’ll use Hugo to build a JSON API using its Custom Output Formats feature.