Referencing CSS and JS file in Github Pages?

Question

Recently I have been trying to make a website.

I make all the content locally and push it to github pages, i already change the path of all the images and CSS and JS to the repository. all the image are working fine but my HTML file wont connect to the CSS and JS files.

I did a bit of research and found out that we can use rawgit.com as a CDN, but it does not work for me. I know it should be possible since i saw some people using github pages and have their css working fine, i just cant get it to work. Here is my repo and index.

https://github.com/andygiovanny/andygiovanny.github.io
https://github.com/andygiovanny/andygiovanny.github.io/blob/master/index.html

Here is on my local files Local Files and here is on github enter image description here

I am quite new at this and hoping to get help, thanks in advance!!

Answer 1

It is best in this instance to use relative urls for your static files hosted on your own site, so for example change:

<link href="andygiovanny.github.io/css/style.css" rel="stylesheet">

to simply:

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

This way it will load for you in whatever environment you are working in. I use something called middleman for building my website on GitHub pages and they do the same thing as can be seen in my repo .

This is the same for the links inside your CSS files too, for example you are referencing your images as below:

.mainContent{
    width: 100%;
    height: auto;
    background-image: url('andygiovanny.github.io/IMAGE FILE/Background.svg');
    background-repeat: repeat-x;
}

But it needs to be like:

.mainContent{
    width: 100%;
    height: auto;
    background-image: url('/IMAGE FILE/Background.svg');
    background-repeat: repeat-x;
}

As a side note, it is advisable not to have spaces in your file locations and by convention they should be lowercased, with hyphens replacing spaces, I would rename IMAGE FILE to image-file .

Answer 2

You must include the scripts and stylesheets over the HTTPS protocol. Just look at the console. Or you can download the stylesheets and scripts and move to your folder. So you can include from project folders.

<script src="js/jquery.min.js"></script> <!-- Like this! -->

Answer 3

If you are serving a nextjs app on github pages then you have to add an empty .nojekyll next to the _next folder (generated by next export ), otherwise github pages will ignore that folder resulting in 404 for the.js and.css files inside that directory...

Source: https://github.com/vercel/next.js/issues/3335