Correct CSS not being generated when deploying to Github Pages

[Mattt]

As suggested in the title, when I deploy my site to Github (i.e. push to remote, triggering the github action to deploy) I’m seeing CSS that is different than what I have when I run hugo locally to develop my site.

I’m struggling to find out exactly what the differences are, but I think it’s that Tailwindcss from the theme is not being included in the CSS on the remote build. There’s an open Github issue in the Bento theme repo, but no resolution - I’m uncertain if there’s an issue with the theme or something else causing the problem.

I’ve seen some Hugo issues about no CSS at all, but that isn’t the issue here. It’s different, or incompletely generated CSS.

Details:

• My site’s Github repo
• Bento Theme repo
• Local (macOS 11.6.4): hugo v0.93.2+extended darwin/amd64 BuildDate=unknown
• Github Build: hugo v0.93.3-44E3C002+extended linux/amd64 BuildDate=2022-03-08T10:15:28Z VendorInfo=gohugoio

Edited to attach screenshot - local on the left, remote on the right:

A few more details:

I noticed locally the CSS starts with these lines:

/* Tailwind base - put variables under: tailwind.config.js */

/* ! tailwindcss v2.2.19 | MIT License | https://tailwindcss.com */

/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

While remote starts with this line:
/*!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css*/

Not sure if the different “normalizers” are coming into play here?

[pitifi9191]

in the generated css file I do not see a css class .text-blue-600 I only see .hover\:text-blue-600 so no wonder that link text color is not blue.

also looking at the package.json in theme which of these you run to test on local and what are you using to build live website?

"scripts": {
    "dev": "hugo server --disableFastRender -D",
    "dev:example": "hugo server --verbose -s exampleSite --themesDir=../.. --disableFastRender",
    "build": "NODE_ENV=production hugo --verbose --gc --minify",
    "build:example": "NODE_ENV=production hugo --verbose --gc --minify -s exampleSite --themesDir=../..",
    "start": "hugo --gc"
  },

For tailwind @Jonas_D’s help really made positive experience working with Hugo and tailwind.

thanks

[Mattt]

My build command for the live site is just hugo --minify. The theme provides no additional instructions for building the live site.

I do have the theme name configured in config.toml - do I still need to specify the hugo parameters --theme and --themesDir?

[jmooring]

@Mattt

Your GitHub Pages workflow is missing a step. You need to install Node.js.

I have created a temporary repository for your site:
https://github.com/jmooring/hugo-forum-topic-37593

Here’s the amended workflow:
https://github.com/jmooring/hugo-forum-topic-37593/blob/main/.github/workflows/gh-pages.yml

Note the addition of these sections under steps:

- name: Setup Node.js
  uses: actions/setup-node@v2
  with:
    node-version: '16'

- name: Install Node.js Dependencies
  run: npm install

Do not copy and paste the entire file. Your main branch is master, mine is main.

The live site is here:
https://jmooring.github.io/hugo-forum-topic-37593/

[jmooring]

Your .gitignore file prevents the resources directory from being committed and subsequently pushed to GitHub.

If you change that, build locally, commit the changes and push, you do not need install Node.js as described above. It’s a matter of preference/performance.

[Mattt]

Great catch re: .gitignore! Not sure why I had that in there.

But it’s not clear to me: am I to commit the resources directory to my repo?

[jmooring]

The theme has a resources directory, and there is a resources directory in the root of your project.
But your .gitignore file ignores both due to the syntax you used. Lookup the effect of including/excluding leading and trailing slashes on .gitignore entries; it makes a difference.

If you don’t want to change the existing GitHub workflow to include npm build dependencies, you must commit the theme’s resources directory.

[Mattt]

@jmooring Thanks so much for your help - I’ve got a better understanding now!

[jmooring]

You’re welcome. Let me know when I can delete the temporary repository that I referenced above.

[Mattt]

@jmooring Go ahead and delete it.

[jmooring]

Done.