CSS working locally but not in production on Github Pages

Help
1

Hi all,

I have the familiar problem that my CSS isn’t loading in production, but works locally. I see that this issue is fairly common but I’ve not been able to work out what code to change. I’ve looked at a few post on Stack Overflow and tried a few things but still can’t fix it. I was wondering if someone more versed in Jekyll would be able to take a quick look at my code and see if I’ve missed something obvious?

Here is my repo: GitHub - catsinspacesuits/peoples-project

2

your baseurl is incorrect, you have the full url to the site, it should just be your GH project name.

baseurl: /peoples-project

3

Thanks for the reply :slight_smile: You mean in config.yml? It was an empty string but I’ve now changed it to what you suggested but still the same result unfortunately.

4

ok, I see you aren’t actually using the baseurl in the include file where you are calling your css and js. Most people would say you should use the basurl there so that you can change all the urls by ending one setting in the config file (baseurl) - but you could just hard code the paths in your includes/head file to include the project name.

here is what you have currently which would work on a normal webserver but breaks on GH projects as the projects are served from a sub folder on your root username:

 <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.dropotron.min.js"></script>
    <script src="/js/jquery.scrolly.min.js"></script>
    <script src="/js/jquery.scrollgress.min.js"></script>
    <script src="/js/skel.min.js"></script>
    <script src="/js/skel-layers.min.js"></script>
    <script src="/js/init.js"></script>
    <noscript>
        <link rel="stylesheet" href="/css/skel.css" />
        <link rel="stylesheet" href="/css/style.css" />
        <link rel="stylesheet" href="/css/style-wide.css" />
        <link rel="stylesheet" href="/css/style-noscript.css" />
    </noscript>

those paths should be like:
<link rel="stylesheet" href="/peoples-project/css/style-noscript.css" />

There are a few ways to do it by adding baseurl to what you have, or you could just hard code them all to like above but there are a bunch and if you change the hosting you would have to change all of them.

1 Like
5

Sorry for the late reply - I’ve only just been able to test this. I tried hard coding the css link tags like your example but I still had the same issue unfortunately. Thanks a lot for taking the time to look into it though - much appreciated. I’ll keep playing around with it until it works!

6

for some reason you have the css links wrapped in . Take that off and it should work.

Course I didn’t look too hard at what is going on, maybe there is some reason for that and it breaks something else, but I don’t know why it would be needed. Course I’ve also never used .

7

This kind of works. The CSS loads in production now but locally it shows in the console that the CSS files can’t be found (404) but the CSS seems to load, even though it says it can’t be found.