GitHub pages loading random CSS file. Different to local build

Hi there!

I’m running a Jekyll site and everything is looking sweet locally but when the site is deployed to GH Pages some random CSS file is loaded instead of the one I have supplied. I have disabled any jekyll themes. Here is my repo: https://github.com/uccser/ci-dashboard

I have this link to my style sheet in my HTML:
<link rel="stylesheet" href="/assets/css/style.css">

and I have put this in my _config.yaml file:

theme: null

sass:
  sass_dir: assets/css/

When the site is published to GH pages the css file it loads is this:
Screen Shot 2020-11-19 at 3.24.24 PM

But locally it loads like this:
Screen Shot 2020-11-19 at 3.25.51 PM

None of the css I have supplied in my own file loads and I have no idea where the rules in the css file on GH Pages have come from.

Local:

GH Pages:

It looks like you’re running into a similar pathing issue as listed in this answer here:

You’ve referenced your CSS import like this:

<link rel="stylesheet" href="assets/css/style.css">

The URL you want the browser to be loading is the following:

https://uccser.github.io/ci-dashboard/assets/css/style.css

However, it’s actually loading this URL—the CSS file for another site hosted under your account:

https://uccser.github.io/assets/css/style.css

To fix this you’ll need to make sure that Jekyll adds your repository name to your link when building your site. You can do this by setting the baseurl value inside your config file

baseurl: /ci-dashboard

You’ll then need to update your CSS link to tell Jekyll to prepend this baseurl value to your links:

<link rel="stylesheet" href="{{ "assets/css/style.css" | relative_url }}">
1 Like

@thomasshaped thank you SO MUCH!!! You’re amazing.

1 Like