FIG is accepting new projects! Let’s discuss yours!

Fillmer Innovation Group

Static Success with Hugo: Part II

May 25, 2020

This one simple trick…

Continuing on from our previous article, we enjoyed building our new website with Hugo, but we ran into some interesting challenges during setup and customization. One area that took a bit of digging to figure out was the mapping of single-use screens, such as our Get Started screen, to the appropriate content.

Mapping content to pages

Our solution involved creating a pages directory within the layouts directory. Inside we made a single template file, get-started.html, whose name maps exactly to a directory created within the content directory. The directory structure mapped out:

...
content/
  get-started/
    index.md
...
layouts/
  pages/
    get-started.html
...

The final piece of this puzzle was to make sure the contents of the index.md file in the content/ directory were correctly defined to pull the get-started.html template, which contains our custom code for our contact form:

---
title: "Get Started"
type: pages
layout: get-started
---

With this done, and our header navigation updated with the correct link, we were able to build out our custom contact form within the get-started.html file. A simple solution, but not immediately intuitive when coming into the Hugo ecosystem from the outside.