Hi, Hugo and SSG newbie here. I’m working on a portfolio site for myself using Hugo and Github Pages. Unfortunately, when I deploy it live, the links in my nav bar are all broken. They still point to http://localhost:1313/
instead of the baseUrl in my hugo.toml file.
I found this existing thread on the topic. But running hugo
on its own didn’t seem to resolve it.
Here’s my hugo.toml file.
baseURL = 'https://quan-h-vu.github.io/'
languageCode = 'en-us'
title = 'Quan H. Vu'
theme = 'gokarna'
[menus]
[[menus.main]]
name = 'Home'
pageRef = '/'
weight = 10
[[menus.main]]
name = 'Samples'
pageRef = '/samples'
weight = 20
[[menus.main]]
name = 'Posts'
pageRef = '/posts'
weight = 30
Here’s the partial header.html controlling my top nav bar. This was taken from the Gokarna theme.
<header class="header">
<nav class="header-nav">
{{ if isset .Site.Params "avatarurl" }}
<div class="avatar">
<a href="{{ .Site.BaseURL }}">
<img src='{{ .Scratch.Get "avatarImgSrc" }}' alt="{{ .Site.Params.AvatarAltText|default "avatar" }}">
</a>
</div>
{{ end }}
<div class="nav-title">
<a class="nav-brand" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
</div>
<div class="nav-links">
{{ range .Site.Menus.main }}
<div class="nav-link">
<a href="{{ .URL | absURL }}" aria-label="{{ .Identifier }}" {{ if .Params.NewPage -}}target="_blank" {{- end -}}>
{{- .Pre | safeHTML }} {{ .Name }} {{ .Post | safeHTML -}}
</a>
</div>
{{ end }}
<span class="nav-icons-divider"></span>
<div class="nav-link dark-theme-toggle">
<span class="sr-only dark-theme-toggle-screen-reader-target">theme</span>
<a aria-hidden="true" role="switch">
<span class="theme-toggle-icon" data-feather="moon"></span>
</a>
</div>
<div class="nav-link" id="hamburger-menu-toggle">
<span class="sr-only hamburger-menu-toggle-screen-reader-target">menu</span>
<a aria-checked="false" aria-labelledby="hamburger-menu-toggle" id="hamburger-menu-toggle-target" role="switch">
<span data-feather="menu"></span>
</a>
</div>
<!-- For mobile -->
<ul class="nav-hamburger-list visibility-hidden">
{{ range .Site.Menus.main }}
<li class="nav-item">
<a href="{{ .URL | absURL }}" {{ if .Params.NewPage -}} target="_blank"{{- end -}}>
{{- .Pre | safeHTML }} {{ .Name }} {{ .Post | safeHTML -}}
</a>
</li>
{{ end }}
<li class="nav-item dark-theme-toggle">
<span class="sr-only dark-theme-toggle-screen-reader-target">theme</span>
<a role="switch">
<span class="theme-toggle-icon" data-feather="moon"></span>
</a>
</li>
</ul>
</div>
</nav>
</header>