3. Customizing the header & footer

18 Feb 2023

You can find the header & footer files in themes/hugo-zones/layouts/partials/. Unlike in Zoner, the header & footer in hugo-zones are html files. Don’t worry though; this html is simple, and you can just modify the example to add your content.

Header Setup

For the header, you’ll probably want links to your pages. You can add list entries inside the <ul> </ul> tags like this:

<ul>
    <li><a href="/">Home</a></li>
    <li><a href="/archive">Archive</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/index.xml">RSS</a></li>
    <li><a href="/yourPage">Your page</a></li>
    <li><a href="somewhereelese.com">Somewhere else and some other time</a><li>
</ul>

Your footer content probably won’t be a list like the header, but you can still add links and such:

<hr> <!--Create a horizontal line break-->
<p>
    <!--Add a copyright symbol to your name and bold it-->
    <b>&#169; My name</b> <a href="/">My site</a> 
</p>

This is the only html work required for setting up the site. Everything going forward will be markdown (yay!).

If you tinker with the theme files, you’ll see more html - The theme layouts are written in html and Hugo shortcodes. I’ve commented these files to help decipher what’s happening, but you may want to read the Hugo documentation or look up tutorials if you want to tinker with them.