Hugo site have no style after deploying on GitHub pages

I’m using Hugo to create a new website. On my local machine, I can run it in development mode and build it for production without any issues. I also ran it on an Ubuntu system, and it worked fine.

However, when I try to deploy it on GitHub Pages or Vercel, it doesn’t render any styles. Of course, it uses the CSS styles inside the public directory without any issues, but it seems that the styles are not working correctly.

To fix this issue, I built the website on my Ubuntu machine and then copied the CSS styles from the public folder to the version of the website generated on GitHub Pages, which resolved the problem.

The main problem my website is facing is that it lacks any style altogether.

Hugo version: 0.123.7 extended Node.js version: 20.11.1 NPM version: 10.2.4

GitHub Pages website link: GitHub repository: GitHub - absyro/botstudio-hub: Bot Studio - Hub

I’ve experimented with various versions of Hugo, Node.js, and NPM. Additionally, I attempted to employ custom commands within GitHub workflows. I even tried utilizing different domain names, including both custom and GitHub/Vercel-provided domains.

Regrettably, none of these attempts succeeded in resolving my issue.

What does the log of the Github deployment process show? I think the issue will appear there.

You should also check with the creator of the theme what this issue could be about.

It is NOT the often occurring error that the style can’t be found. And your styleswitcher results in a background-color change, so something in the larger picture of loading the theme itself (module mounts) should be the issue.

First step: Github pages deployment log
Second step: Check in with the theme developer

Everything seems to be functioning properly. GitHub successfully generates the public folder along with all necessary content. However, there appears to be an issue with the functionality of the built CSS file, as evident on

Furthermore, the style can be located and imported into the index.html file. However, the issue lies in the malfunction of the built CSS file.

When building files on my Ubuntu machine using the npm run build command, it generates the public folder smoothly, allowing me to serve it without any problems. However, GitHub Pages and Vercel encounter difficulties in creating the public directory.

Note: While I can successfully run this repository on an Ubuntu server, my preference is to utilize GitHub Pages or Vercel for hosting.

The deployment steps for my GitHub actions can be found here:

I’ve been debugging for nearly three days, exhaustively trying every possible solution. I’ve consulted AI and searched extensively on Google, but it seems no one has encountered this issue before.

All packages and dependencies have been updated to their latest versions. I’m utilizing the latest extended Hugo and stable versions of Node.js and NPM. For GitHub Pages, I’m using the latest version of Ubuntu, and for Vercel, I’m utilizing the latest version of Node.js. All project dependencies are listed in the package.json file.

Despite exhausting all possible solutions, the issue remains unresolved.

I would start by using a valid baseURL. Change this:

baseurl = "/"

To this:

baseURL = ""

cc @h-enk

1 Like

Thank you for your response. However, implementing your suggestion didn’t alter anything, as the source will automatically set baseURL and colonifyURL when running in production mode. For reference, please see:

The only issue seems to be that GitHub Pages and Vercel are unable to utilize PostCSS to generate the final CSS file, or they encounter a similar problem. This is the only discrepancy, as everything else functions properly except for the generated CSS file.

Let’s wait for h-enk’s response. They are the theme author, which is always your best source of support for issues related to the themes.

Thanks. Then I need to mention that I also tried to deploy GitHub - gethyas/doks: Everything you need to build a stellar documentation website. Fast, accessible, and easy to use. on Vercel. Similar problems were there too.

In the future you can raise your questions here:

Let’s proceed here: Hugo site have no style after deploying on GitHub pages · gethyas/doks · Discussion #1207 · GitHub

Thanks btw. Debugging for three days without any changes just confused me.

This was resolved by removing canonifyURLs = true from the site configuration. That setting is likely to be deprecated in a future version… there is never a good reason to use it with a properly designed theme.

This is a legacy configuration option, superseded by template functions and Markdown render hooks, and will likely be removed in a future release.

1 Like

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