Only normalize.css shows up when hosting on github pages?

Help
1

Hi there! I’m encountering some problem that doesn’t seem to be discussed anywhere.

I’m trying to publish my website using jekyll on github, I’ve tried Github Actions, but after that didn’t seem to work at all, i went back to publishing from branch. I’ve made a specific branch for this, called gh-pages.

I’m aware a common mistake with jekyll is not linking your css properly. I’ve had that, and my css was completely empty. However, when I follow the instructions, instead of my style.css file, only normalize.css from necolas on github loads!

image
image937×212 12.3 KB

I’ve been trying to get it to work for hours now, but I have no idea what’s going on. I get that normalize.css is being enforced by github, but that means that my link is correct and still no dice.

It’s not a browser cache issue, I’ve tried clearing it multiple different ways.

here’s the link to the repo
and the link to the hosted site.

thank you for any advice!

2

try using @import instead of @use

I’m not sure where the normalize file is coming from, best guess is the site is not actually building/serving off that exact repo. Check in the GH dashboard if there are build errors and verify you have it all set correctly to serve the gh-pages branch.

When you have multiple branches and are using gh to serve it can be hard to tell what is going on cause one little issue could mean you are looking at one branch for changes but they are happening in another. Or the build is failing and you are not noticing and it is continuing to serve the last successful build.

An easy test would be to change some text on the index page in that file and see if the web page shows that change.

3

that is a positive on the build

image

The publish is correctly set, from the gh-pages branch, from the /(root)

4

did you try changing use to import? GH pages uses an old version of jekyll, I don’t think it supports use but could be wrong.

I don’t understand where the normalize stuff is coming from.

5

This is really a weird behavior. Also looked for the normalize stuff and couldn’t find it.

The best I can do is help you set up a custom GitHub workflow.

name: Deploy site

on:
  push:
    branches:
      - master

permissions:
  contents: write

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: "3.3.5"
          bundler-cache: true
      - name: Build
        run: |
          export JEKYLL_ENV=production
          bundle exec jekyll build
      - name: Deploy
        if: github.event_name != 'pull_request'
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: _site

This is based on the one I use for my site, and I know it works. With this you don’t need to track the _site/ directory. Only keep the usual jekyll structure on your main branch, and when you push code to it it will automatically build the site and publish it for you.

6

Hello @matak12m, the primary issue seems to be your use of @use "theme"; in assets/css/style.sass. Like @rdyar mentioned in their comments, @use is not a valid keyword in the Sass Engine used by classic GitHub Pages workflow. Moreover, the terminal semicolon ; is not a valid .sass syntax either (But is for .scss files).

So, GitHub Pages injects stylesheets from its default theme name Primer, the same styles used in GitHub light mode. This is why you see normalize.css in the built style.css.

7

Hi ashmaroli, I was under the impression @import is being deprecated, and @use is the alternative?

8

Yes @import is deprecated. But this development is from modern Sass engine (not 100% backwards-compatible with legacy Sass engine bundled with classic GitHub Pages workflow).
(You can see various places in the Sass docs that indicate a given feature not being supported by Ruby Sass.)
The classic GHP workflow is itself locked to these versions and won’t be using newer breaking-incarnations of its dependencies in order to avoid breaking countless number of sites (managed by lay-persons who are not tech-savvy).

So, your choice is to either lock yourselves to the classic GHP enviroment (can be emulated locally using the github-pages gem) or migrate absolutely to a relatively more modern Jekyll stack and depend on GitHub Actions to build and deploy your site.

9

Ah, I see. I wasn’t aware of the version locking!

thank you so much for your input, I feel like i understand what’s going on much better now. I’ve switched back to @import and it works like a charm.

10

I ended up using this, based off of your code snippet

    with:
        folder: _site
        path: "_site"

(not sure if the path is necessary, but just to be sure).

Thank you!