Question

3

Referencing CSS and JS file in Github Pages?

rated 0 times [ 7] [ 4] / answers: 1 / hits: 8066 / 7 Years ago, thu, september 21, 2017, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

shane

Add To Favorites

Follow

Total Points: 239

Total Questions: 91

Total Answers: 114

Location: Faroe Islands

Member since Tue, Jul 7, 2020

4 Years ago

answered 7 Years ago denver · Accepted Answer

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.