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.
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.