Hugo styles not showing up on Github Pages, though it loads locally -- issue seems not due to baseURL

support
1

Hi, thanks in advance for your time and help!

I have read and tested the solutions posted in various threads in related forum posts, and also combed through the documentation and release notes. NOTE: My apologies for the the lack of clickable links to some of the references below. As a “new user”, I am only allowed to add two links.

My Hugo styles are not loading after deployment to GitHub pages, but they work as expected locally:

Here is my source code repository:

The console shows 404s when trying to load the CSS files, but the deployed site seems able to load JS and images files in the same static/ directory.

The baseURL in my config.toml file is set to:
baseURL = "https://kaizengrowth.github.io/digitalgarden/"

I’ve tried deploying this with and without the slash at the end of the baseURL in the config.toml file. I’ve also copied the same config.toml from the root of my directory to the theme/ folder for the Digital Garden, which I am submoduling into.

In the built index.html file inside of the /public folder, I see that it is trying to access the CSS files from a relative path:

   <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/css/all.min.css">
    <link disabled id="dark-mode-theme" rel="stylesheet" href="/css/dark.css">
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <link rel="stylesheet" type="text/css" href="/css/my_style.css">

As you can see, the paths in public/index.html have not been converted to an absolute path using the baseURL in of config.toml. In the console, I can see that it’s making calls to the wrong absolute path:

Screen Shot 2024-04-09 at 11.42.19
Screen Shot 2024-04-09 at 11.42.191346×796 136 KB

These absolute paths seem to be trying to make a request from the root of the path, and are omitting /digitalgarden.

If I go to the correct absolute path with /digitalgarden/css/style.css, I can see that the CSS files are displaying the expected at those links.

How do I reconfigure my site so that it is making requests to the right baseURL (absolute path with project directory)?

====

Here are my local environmental details, as specified in the “How to Request Help” article:

$  hugo env

hugo v0.124.1-db083b05f16c945fec04f745f0ca8640560cf1ec+extended darwin/arm64 BuildDate=2024-03-20T11:40:10Z VendorInfo=brew
GOOS="darwin"
GOARCH="arm64"
GOVERSION="go1.22.1"
github.com/sass/libsass="3.6.5"
github.com/webmproject/libwebp="v1.3.2"
github.com/sass/dart-sass/protocol="2.6.0"
github.com/sass/dart-sass/compiler="1.74.1"
github.com/sass/dart-sass/implementation="1.74.1"

I am not having trouble displaying this locally, only after deployment using a standard Github pages workflow for Hugo, which you can find inside my repo.

Thank you so much for your time and help! I greatly appreciate it.

2

What’s the deploy log for the Github Page saying? It looks like the website is not loading the theme repo (submodule?) properly.

3

Thanks so much for your quick reply, @davidsneighbour!

Here is the deploy log in Github Actions:

Screen Shot 2024-04-09 at 12.11.47
Screen Shot 2024-04-09 at 12.11.471920×1257 105 KB

The latest deployment seems to have run smoothly:

Screen Shot 2024-04-09 at 12.12.58
Screen Shot 2024-04-09 at 12.12.581920×1341 103 KB

Screen Shot 2024-04-09 at 12.12.16
Screen Shot 2024-04-09 at 12.12.161920×1048 49.1 KB

How can I tell if the submodule theme repo is loading properly?

4

If your baseUrl is a subfolder, then those link-rel paths are from the domain root, because you don’t add anything that tells the paths to be on another subfolder… if you get my drift.

If you manually add /digitalgarden/ in front of all URLs in those style sheets it will probably work.

But what you really want is something more along the lines of this:

{{ absURL "css/bootstrap.min.css" }}

will print

https://kaizengrowth.github.io/digitalgarden/css/bootstrap.min.css
1 Like
5

Ah thank you so much, @davidsneighbour!

I was trying to get the correct baseURL to configure automatically through the config.toml file but didn’t think of simply updating the absolute link directly inside of /layouts/partials/head.html

After simply making these changes in that file, it now deploys and loads as expected:

<!-- CSS Styles (including Bootstrap 5 and FontAwesome 6) -->
href="https://kaizengrowth.github.io/digitalgarden/css/style.css">
    <link rel="stylesheet" type="text/css"

Next, I’ll try using the {{ absURL }} variable in each page where it’s called, referencing the baseURL in config.toml to implement this properly, in case of future deployment changes:

{{ $absURL := .Site.BaseURL }}
<link rel="stylesheet" href="{{ $absURL }}/css/styles.css">

Thanks so much for your quick and efficient help with this! I’ll mark this as resolved.

6

In addition to the guidance above…

image

Consolidate the first 2 into one file, and remove the third (it’s superfluous).

1 Like
7

Ok, thanks @jmooring!

I’ll consolidate both config.toml and hugo.toml to: config.toml, and eliminate theme.toml

Much appreciated!

8

Do the opposite. hugo.toml instead of config.toml.

9

Okay, thanks for that clarification, @Arif!

10

Thanks again for your quick responses and willingness to help, @davidsneighbour @jmooring @Arif

Thanks to you, I’ve been able to kickstart this little Learning blog, and I’ve wrote a first post about what I’ve learned from this thread on the Hugo Forum:

Really appreciate it! And hope you have a lovely day.

2 Likes
11

Hi Kaizen,

Big thanks for your warm words to the community.

I read your blog post (currently seems to be offline) and there you wrote about adding an absUrl variable to the hugo config file. Cannot verify if that’s what you did as your repo is not readable for me.

I would think about using the absURL, which is a hugo function in the partial to include the css. Also suggested by @davidsneighbour in his answer No need for a site variable there.

      <!-- link with function -->
      <link rel="stylesheet" href="{{ absURL "css/styles1.css" }}" />
      <link rel="stylesheet" href="{{ absURL "css/styles1.other" }}" />

you could use a loop in your head.html partial

      {{ with $myBase := absURL "" }}
         <link rel="stylesheet" href="{{ $myBase }}css/styles2.css" />
         <link rel="stylesheet" href="{{ $myBase }}css/other2.css" />
      {{ end }}

using baseURL = "https://www.example.com/garden/" in in hugo.toml
this will render locally to:

    <!-- link with function -->  
      <link rel="stylesheet" href="http://localhost:1313/garden/css/styles1.css" />
      <link rel="stylesheet" href="http://localhost:1313/garden/css/styles1.other" />

    <!-- loop with variable -->  
         <link rel="stylesheet" href="http://localhost:1313/garden/css/styles2.css" />
         <link rel="stylesheet" href="http://localhost:1313/garden/css/other2.css" />
2 Likes
12

Thanks so much @irkcode! Just seeing your reply now. I really appreciate your clarification. Will implement your instructions now.

I set up a CNAME with my Github repo, and am now using https://kaizencode.art as the URL for the site (TLS certificate still pending…so you may get https warnings.) This is the updated post:

Thanks for explaining in clear detail how to use absURL function. I didn’t fully understand that before, and really appreciate your time in breaking that down!

13

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.