404.html erroneously treated as == .Site.BaseURL?

support
1

I recently set up Hugo, and have my BaseURL config set to http://www.mysite.com

On every page and post, the output of .Site.BaseURL is correctly http://www.mysite.com

However, using the default 404 page, which includes the same partial header and footer as the rest of my site, .Site.BaseURL returns the current URL of the 404’d page. Rather than a BaseURL it performs more like permalink.

So if a user went to http://www.mysite.com/abcd which doesn’t exist, and my header has a “Home” button that links to .Site.BaseURL (which correctly takes users to the homepage on every other page), the user would see just my 404 page again. They cannot navigate back home. The href to BaseURL simply links to the same erroneous page they are already on.

How can I avert this? If I set the configuration for my BaseURL to http://www.mysite.com/ with an ending slash, everything “works” – but going from 404 to the homepage results in sending users to http://www.mysite.com// (note the additional trailing slash).

Graphically this appears successful, but the additional slash is not correct. What am I missing here?

2

Sounds like a template issue, but we need more information to assist. Please share a link to your site’s source, so we can see the 404 template.

3

Well, this is not a solution per say, but one workaround that pops right out my head is string concatenation .

Something like:

{{ $trailingSlash := "/" }}
{{ $newBaseURL := $trailingSlash | printf "%s%s" $Site.BaseURL }}

and use the {{ $newBaseURL }} instead? :thinking: Yeah, its a duct-tape approach. But duct-tapes are easy to work with!

I am very new to HUGO too, so my solution may not be the most reliable :sweat_smile:

4

Thanks for your reply. In layouts/404.html I have:

{{ partial "header.html" }}
<div class="container page-404 article text-center">
    <h3>404: Something's wrong.</h3>
   ... some content ...
</div>
{{ partial "footer.html"}}

The relevant portion of partials/header.html is:

<nav class="navbar navbar-expand-md sticky-top navbar-light bg-light">
      <div class="container">
        <a class="navbar-brand" href="{{ .Site.BaseURL }}"><img src="{{ .Site.BaseURL }}/css/js_logo.png" /> Joshua Stevens</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item {{ if ne .IsHome false }}active{{ end }}">
              <a class="nav-link" href="{{ .Site.BaseURL }}">Home</a>
            </li>
            <li class="nav-item {{ if eq "blog" .Section }}active{{ end }}">
              <a class="nav-link" href="{{ .Site.BaseURL }}/blog/">Blog</a>
            </li>
            <li class="nav-item {{ if eq "about" .Section }}active{{ end }}">
              <a class="nav-link" href="{{ .Site.BaseURL }}/about/">About</a>
            </li>
            <li class="nav-item {{ if eq "portfolio" .Section }}active{{ end }}">
              <a class="nav-link" href="{{ .Site.BaseURL }}/portfolio/">Work</a>
            </li>
            <li class="nav-item {{ if eq "contact" .Section }}active{{ end }}">
              <a class="nav-link" href="{{ .Site.BaseURL }}/contact/">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

This is really perplexing to me, because it returns the current URL only for the home link. But for others (about, contact, etc) it returns just the base URL as desired. I would think if there was an issue with the variable, those additional links would be malformed as well. But they are not ¯\_(ツ)_/¯

5

For others who may search this, I fixed the problem on my site by ensuring my BaseURL did not have a closing slash, and using <a href="{{ .Site.BaseURL }}/">Home</a> for that link.

But on further investigation, there still appears to be something inherently wrong with /404.html being considered the same as .Site.BaseURL

For instance. IsHome evaluates to ‘true’ on the 404 page. So in the background, Hugo is treating www.mysite.com/404.html == www.mysite.com

That can be worked around, but there may be something wrong internally for that to be the case.