🦌

Blog

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.

Better Relationships in Hugo

with Hugo's Related Content

I recently set my mind on improving the way I dealt with relationships in my projects by using Hugo’s very own Related Content1.

By doing so I slashed the build time by a whopping … 🥁 … 70%!

This article uncovers how easy it is to implement Hugo’s new Related Content feature on an existing project and how it may revolutionize the way we manage relationships in Hugo!

It’s time we get better at handling relationships 👫

Hugo, the scope, the context and the dot

Why is my variable not available here or there? 🙄

Moving from old regular template languages where the scope is rarely an issue, you may have a hard time wrapping your head around Go Template scoping constraints.

In this article we’ll try and understand the impact of the scope/context within our templates and partials and how to juggle with the dot 🤹.

Hugo Page Resources

and how to use them...

In this article we’ll cover Hugo 0.32’s Page Resources and its impact on the way we structure our content folders, what methods and properties it offers, how to use it in our templates and markdown and finally its newly metadata logic!

Pure CSS Masonry in 2018?

With those awesome css layout systems now available (Flexbox, Multi-column, Grid), one must wonder if they cannot help us build the masonry grid every client has been asking for the last couple of years. Let’s review what a masonry layout is and how those modern options could help us build it

Hugo Translator

a cheat sheet

Go Template is the templating language used by Hugo and other Go systems. Now it is not Twig or Blade or Liquid, don’t get fooled by the familiar curlies. It is a far stretch from those well known Templating Languages out there…

{{ printf "Hello %s %s. %s" $firstname (slicestr $middlename 0 1) $lastname }}

What is this 😨

{{ if or (eq firstname "George") (eq firstname "Daniel") }}

or that ? 😱

The first time you’re gonna stumble on the syntax above may be a bit deconcerting if you come from more conventional languages.

I spent a lot a time trying to figure out how best to use Go Template.

Using comparison with more familiar syntaxes, I wrote this modest cheat sheat article to try and help unveil the misteries of Go Template

Hugo .Scratch explained

Here because you need to overwrite a template variable? Rejoice, as of this day (or Hugo .48), you don’t need .Scratch for that. You need it for so much more though!

Hugo Page’s context is not only the most important source of information for your pages, it is the main data soure for all of your templates. More often than not, you will need to add a layer of custom variables to the built in set!

With Hugo’s .Scratch, any Page or Shortcode can be complemented with as many variables as needed on top of the default Page or Shortcode Variables.

Excited yet? Let’s dive in!