Step 3: Header and Footer

Every site needs a header and footer, well at least for this tutorial purpose, lets assume.

If you refer to our baseOf.html, we have included header.html and footer.html.

We just do not have it yet, lets go ahead and create header.html and footer.html inside layouts/partials/

Header

<header>
  <nav>
    <ul>
      <li>Blog</li>
      <li>Contact Us</li>
    </ul>
  </nav>
</header>

Footer

<hr>
<footer>
  <p>Copyright © 2022 - All right reserved</p>
</footer>

Now you should be able to see a header and footer to your Home page

Reference

Refer to this git repo https://github.com/pixobe/hugo-tutorial/layouts

Output