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!!

Peter Featherstone · Accepted Answer · 2017-09-21 08:38:29Z

3

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.

edited Sep 21, 2017 at 8:38

answered Sep 21, 2017 at 8:15

Peter Featherstone

8,1326 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Andy Giovanny Febrianto Over a year ago

Hi, thanks for the reply. I edit it, but unfortunately, it still does not read the javascript and css. I am quite confused also on what is wrong.

Peter Featherstone Over a year ago

I just found your site at andygiovanny.github.io and the CSS is loading fine for me...

Andy Giovanny Febrianto Over a year ago

I don't know why it is not working for me, let me attach a screenshot of it on my post (updated, seems like the CSS and JS not working) for me at least

Peter Featherstone Over a year ago

Are you sure this isn't an issue that the images inside the CSS you are trying to load aren't loading not an issue with the CSS itself? For example andygiovanny.github.io/css/andygiovanny.github.io/IMAGE FILE/Background.svg is not a valid URL

Peter Featherstone Over a year ago

Also as the other poster mentioned above, you are mixing your content of http with https. Update your external files to the https protocol and internal to relative. The combination of their answer and mine should fix all your problems...

|

sametcodes · Accepted Answer · 2017-09-21 08:45:11Z

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! -->

answered Sep 21, 2017 at 8:45

sametcodes

5536 silver badges8 bronze badges

Comments

Lucas Alonso · Accepted Answer · 2023-01-03 20:05:41Z

0

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

answered Jan 3, 2023 at 20:05

Lucas Alonso

1983 silver badges6 bronze badges

Collectives™ on Stack Overflow

Referencing CSS and JS file in Github Pages?

3 Answers 3

13 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

13 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related