Over the past few weeks I have been converting a few of my friends sites that I host from Drupal to Hugo. This has also given me the opportunity to move them from my own Digital Ocean hosts to firebase like I did with this site.

I recently ran into a problem with Hugo that seemed simple enough, however some of the documentation proved a little confusing required some troubleshooting.

Creating a static homepage

I wanted to set a normal content page as my home page. First I tried creating an index.md page in my content folder.

hugo_website $ hugo new _index.md

While this did work to show the index page it ended up causing the rest of my pages to result in 404s which was evidently not the result I was looking for. After reading the docs carefully and finding the Content Management section, I realised that I needed to move my index.md file to _index.md. Great, I moved the file and looked at the site again.

hugo_website $ mv content/index.md content/_index.md

Well that didn’t quite work… Now the home page was showing all the content as a list page and my new static page is no where to be found.

Updating the theme

Ahh, my theme also needs to be updated. The layouts/index.html now needs to be updated to act like a single page instead of a list.

hugo_website $ cd themes/my_theme/layouts
hugo_website/themes/my_theme/layouts $ rm index.html
hugo_website/themes/my_theme/layouts $ cp _default/single.html index.html

Removing the title

Since this is the home page we might want to remove the title from the template.

{{ partial "header.html" . }}

<article>
  <header>
    <!-- # comment this out for the home page. -->
    <!--<h1 class="text-primary">{{ .Title }}</h1>-->
  </header>
  <section>
    {{ .Content }}
  </section>
</article>

{{ partial "footer.html" . }}

Putting it all together

hugo_website $ hugo new _index.md
hugo_website $ cd themes/my_theme/layouts
hugo_website/themes/my_theme/layouts $ rm index.html
hugo_website/themes/my_theme/layouts $ cp _default/single.html index.html

Hopefully this guide can help make the creation of a static home page easier.