The Problem

Because of the design decision to build the website files for sites hosted on two subdomains within the same Hugo project there were several adjustments that had to be made.

One issue was that within a given subdomain links could be expressed as a relative path (/about/ or /post/, for instance), but across different subdomains that didn’t work.

Specifically, on the page subdomain those links would point to page.loopedline.com/about/, which isn’t an actual page.

One way to resolve that would be to encode absolute links - loopedline.com/about/ or loopedline.com/post/, for instance. But that created problems for testing locally since links on test pages pointed to the public site and not to the local versions.

The Process

While examining the css.html file for an unrelated reason, a possible solution was spotted.

This project is built with Hugo and uses the Minimal Hugo theme, so many of the base files were constructed by others.

The css.html file that is part of the Minimal theme contained the line <link rel="stylesheet" href="{{ "css/main.css" | absURL }}">, which pointed to the use of the Hugo absURL function.

The Solution

Adding | absURL to the relevant link - specifically to the line <li><a href="{{ .URL | absURL }}">{{ .Name }}</a></li> in the header.html file - allowed the links to be generated as expected both locally and on the public site.