Multiple single pages in Hugo

19Aug20

TL;DR

Replace layouts/index.html with layouts/_default/single.html in your chosen theme. The home page for the site will be created from content/_index.md and additional pages can be created at content/pagename/index.md (NB no _ before index that time).

Background

$daughter0 has offered to build web sites for some friends and family members, which means she’s learning various aspects of web development, and I’m helping out with pointers, getting dev environments up and running, source control, hosting etc.

She found a theme that she liked for Jekyll (the default static page generator used by GitHub) in the shape of Hyde, but we quickly realised that was a (too typical for Ruby these days) journey into broken and deprecated dependency hell.

Luckily there’s a port of Hyde to Hugo, and having used Hugo for some work stuff I knew it was simple to use and actively maintained (thanks Steve Francia).

It didn’t take us too long to get a basic single page site customised with the right look and feel and published to GitHub pages.

And then she wanted another page, which took us into the oxymoronic world of multiple single pages.

The answer is right there in the docs

If you read carefully enough, the page on content organisation explains how things work. It’s just that like everything with super powerful and flexible frameworks, it shows how to do many things in many ways, which can make it hard for the uninitiated to see the wood for the trees.

When I finally figured it out the conversation went something like this:

$d0 – is it easy or hard?

me – easy.

$d0 – if it’s easy then am I stupid for not figuring it out?

me – no, because I’ve been right there with you scratching my head about it too.

For the record we spent far too much time picking through ‘Need multiple static pages – home, about, contact, prices etc.‘ and ‘Hugo: adding more pages to single-page themes‘. Sometimes Google and Stack Overflow have all the answers, and sometimes you’re digging through stuff that was overtaken by events dozens of versions back.

Docs are hard

Hugo’s docs are good, but there’s a lot there to understand, and for any given site it’s likely that you’ll need a small subset of functionality. So it’s really hard for the uninitiated to determine what they need to learn, and what’s superfluous.

There are also some great 3rd party intros out there, like Chuxin Huang’s ‘Noobs guide to Hugo‘; but if you follow somebody else’s footsteps you end up at the same destination. And nobody really wants a website that looks just like another. The whole point is customisation, but minimising the effort and blast radius of that customisation.

My own example

I’ve dropped a minimal Hugo/Hyde site demoing multiple single pages onto GitHub at cpswan/hyde-msp-example



No Responses Yet to “Multiple single pages in Hugo”

  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.


%d bloggers like this: