最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Referencing CSS and JS file in Github Pages? - Stack Overflow

programmeradmin8浏览0评论

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

.github.io
.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!!

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. 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./andygiovanny/andygiovanny.github.io
https://github./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!!

Share Improve this question edited Sep 21, 2017 at 8:55 Peter Featherstone 8,1126 gold badges36 silver badges67 bronze badges asked Sep 21, 2017 at 7:52 Andy Giovanny FebriantoAndy Giovanny Febrianto 2171 gold badge3 silver badges10 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 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.

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

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./vercel/next.js/issues/3335

发布评论

评论列表(0)

  1. 暂无评论