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
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 https://hub.botstudioo.com.
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.
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.
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.
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.