No site logo when publishing on subdomain

[vinser]

In my site config file config/_default/params.toml I set site logo as

[navigation]
    logo = "/img/SV-1-1.svg"

and put logo svg in static/img/SV-1-1.svg like it is stated in Hinode docs https://gethinode.com/docs/configuration/navigation/#basic-configuration

And on developer server hugo server site logo is in place

but when I publish site on GitHub Pages all goes well except logo

Is there any idea how to fix logo?

[markdumay]

Please double check the folder, it should be in static. From the docs:

The vector image file is expected to be present in your local static/img folder.

[vinser]

Thanks for response. Sorry about my misled you - my logo image is of of course in folder static/img/SV-1-1.svg

I was able to simulate the case on a local hugo server and I think that the reason is that the search for static resources is done relative to the domain of the baseURL, for example, baseUrl=https://example.com/, and not relative to the full baseURL of project site baseURL=https://example.com/hugo-hinode/.

That is what I see in browser developer mode on my local host. Please, look at 404 about my logo SV-1-1.svg and inter regular font
baseURL = 'https://example.com/hugo-hinode'

The same we can see on GitHup Pages publication host, baseURL = 'https://vinser.github.io/hugo-hinode'

As they know, Github provides the following structure for publication:

https://<person>.github.io - main personal website 
and project sites
https://<person>.github.io/<project name 1>
https://<person>.github.io/<project name 2>
...
https://<person>.github.io/<project name n>

Hence the question is - how to publish the project website on GitHub Pages?

[markdumay]

Have you tried the guide from https://gohugo.io/hosting-and-deployment/hosting-on-github/?

They use the following command to adjust the base URL:

     - name: Build with Hugo
        env:
          # For maximum backward compatibility with Hugo modules
          HUGO_ENVIRONMENT: production
          HUGO_ENV: production
          TZ: America/Los_Angeles
        run: |
          hugo \
            --gc \
            --minify \
            --baseURL "${{ steps.pages.outputs.base_url }}/"          

[vinser]

Surely, I've seen the guide and this is the command I used for build the site in git action for GP publishing. And it runs as should be.

As you can see on screenshots above for my baseURL=vinser.github.com/hugo-hinode/ even on local server I got http:/local:1313/img/SV-1-1.svg instead of http:/local:1313/hugo-hinode/img/SV-1-1.svg

So to make it work I had to fix layouts/partials/assets/navbar.html file, that's, add a relative path {{ strings.TrimSuffix '/' site.Home.RelPermalink }} before {{ $logo }}

<!-- Insert the brand logo or name -->
<div class="{{ if (or $logoLight $logo) }}mx-auto{{ else }}flex-grow-1 flex-{{ $size }}-grow-0{{ end }}">
    <a class="navbar-brand" href="{{ site.Home.RelPermalink }}" aria-label="{{ T "home" }}">
        {{- if (and $logoLight $logoDark) -}}
            {{ $width := partial "utilities/GetWidth.html" (dict "path" $logoLight "height" 30) }}
            <img src="{{if $absoluteURL }}{{ absURL $logoLight }}{{ else }}{{ strings.TrimSuffix '/' site.Home.RelPermalink }}{{ $logoLight }}{{ end }}" class="d-none-inline-dark" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
            <img src="{{if $absoluteURL }}{{ absURL $logoDark }}{{ else }}{{ strings.TrimSuffix '/' site.Home.RelPermalink }}{{ $logoDark }}{{ end }}" class="d-none-inline-light" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
        {{- else if $logo -}}
            {{ $width := partial "utilities/GetWidth.html" (dict "path" $logo "height" 30) }}
            <img src="{{if $absoluteURL }}{{ absURL $logo }}{{ else }}{{ strings.TrimSuffix '/' site.Home.RelPermalink }}{{ $logo }}{{ end }}" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
        {{- else -}}
            <div class="navbar-title fw-bold h-100">{{ $title }}</div>
        {{- end -}}
    </a>
</div>

Now I have logo in both cases on local server and on GitHub Pages :)
I can make a PR if needed

[vinser]

In the same manner I've tried to fix 404 bug in layouts/partials/assets/head/head.html for preload font link but have no success because no {{ site.Home.RelPermalink }} nor {{ .Site.Home.RelPermalink }} return non empty string :(
May be you can show me why?

[markdumay]

This looks like a step in the right direction. I've been scratching my head how to get access to the site's base URL... As your code example shows, it's available via site.Home. I'd expect all the files in the static folder are impacted, including the fonts (when sourced locally).

I introduced the setting canonifyAssetsURLs in the extended configuration to support branch deployments for versioned documentation. Perhaps we could tap into that? It would be great if you could prepare a PR.

[dnym]

I too had problems with publishing to a subdirectory (hugo server --baseURL localhost/foo), although I also tried to get it to work with language subdirectories. I think I got it working. I'm new to Hugo, so my hacks are likely not general solutions, but in case they are of any inspiration or use:

• First, I set canonifyAssetsURLs = true.
• With logo = "/img/logo_icon.svg" the path became http://localhost:1313/img/logo_icon.svg, so I changed it to logo = "img/logo_icon.svg" without the leading slash. Now the logo works on any page.
• Same problem with the "missing" font: it seems like the default for themeFontPreload is "/fonts/inter-v12-latin-regular.woff2"; however, if I just remove the leading slash, the new broken path becomes http://localhost:1313/foo/en/fonts/inter-v12-latin-regular.woff2, so instead I set it to "/foo/fonts/inter-v12-latin-regular.woff2".
• Likewise, I had to change all top menu items because they too had leading slashes in their pageRef (as in the example site config); I removed the leading slashes and now the menu works.
• Tag links from the sections listing on the home page didn't work. I got links like http://localhost:1313/en/foo/en/tags/blog. I had to copy layouts/partials/assets/card.html and change {{ (path.Join $tag.Page.RelPermalink) | relLangURL }} to {{ $tag.Page.RelPermalink }}.
• The top menu didn't show the current page/section, so in layouts/partials/assets/navbar-item.html I changed {{- $pageURL := $page.RelPermalink | relLangURL -}} to {{- $pageURL := $page.RelPermalink -}}.

That took care of the home page, but I note that all blog thumbnails e.g. url: /img/sunrise.jpg are processed not as http://localhost:1313/foo/img/something.webp but .../foo/foo/img/... for some reason. (They go in local folder public/foo/img/.) But at least they work.

On the About page (I mostly copied the content from the example site):

• The content page referred to image src="/img/logo_var.svg#logo", which I had to change to image src="/foo/img/logo_var.svg#logo". (The Bootstrap blog page also had two images with src="/img which I changed to src="/foo/img.)
  • Minor problem is that this makes Hugo unable to find the files (WARN Cannot find vector image resource: ...), but at least now the browser can.
• There's an icon missing, http://localhost:1313/icons/btn-close-bg.svg. I copied Hinode's assets/scss/common/_icons.scss and changed all url("/icons/ to url("/foo/icons/.
• Tag links as before: in layouts/_default/single/header.html I changed {{- $url := (path.Join .Page.RelPermalink) | relLangURL -}} to {{- $url := .Page.RelPermalink -}}.

On the Tags page:

• I had to edit layouts/tags/list.html to change {{ (path.Join .Page.RelPermalink) | relLangURL }} to {{ .Page.RelPermalink }}.
• The language switcher made the wrong link when there's no corresponding page in the other language, so in layouts/partials/assets/navbar.html I changed href="/{{ .Lang }}" to href="{{ printf "%s%s%s" $page.Site.BaseURL .Lang $page.Parent.Path }}" just to be done with it.

I think that's all of it. As a newbie I don't know the feasibility of it, but having Hinode work out-of-the-box with base and language subdirectories would be nice!

(Edit: Right, layouts/alias.html also contained src="/js/alias.js" which I changed to src="/foo/js/alias.js".)

[vinser]

@dnym Thanks for the detailed explanations and pointers to the features. I will move as the site fills up.

[vinser]

@markdumay I decided to rebuild the site from scratch and it works great in multilingual mode. But there is one big problem, it only works if the baseURL does not contain a subfolder. If you just add a subfolder, then it begins to form incorrect page URLs. For example, for the home page with baseURL=example.com/my-hinode-site it forms http://localhost:1313/my-hinode-site/ instead of http://localhost:1313/my-hinode-site/en/ so I get 404.
Yes, I really like both the design and the insides of Hinode, but despite all my efforts, without crutches I cannot bring it to senses.
I consider it is wrong to use setting canonifyAssetsURLs because it will be deprecated by hugo team.

I tried a couple of other themes - Blink and Relearn. The first one as you wrote was your inspiration ))) and it works in multilingual mode with subfolder in baseURL. You can run one or another language manually but menu language switcher fails to make right urls.

And Relearn theme runs in multilingual mode as expected. It's a pity but it doesn't have a news blog and intended to make docs sites, and certainly it doesn't have the charm that the Hinode theme has. (( To my regret I have no enough experience in site dev (node, js, scss and all that) only golang server and apps coding. So I have not enough time to make correct PR to fix the bug. It quite complex, sorry.

[markdumay]

See #967

[vinser]

I’ll have a look at it. I’ll set up a test with GitHub pages to recreate the issue you’re facing. Bear with me!
Thank you. In the meantime using the Hinode theme I will make and polish a simple personal site on Github, for which they do not need to specify a project subdomain

[markdumay]

@dnym and @vinser, I have released v0.24.0-beta8 to support deployment to a subfolder. I will need to double check the sidebar menu, but so far the other pages and elements seem to render as expected.

[markdumay]

v0.24.0-beta9 fixes a rendering issue with the sidebar.