在 Github 页面中引用 CSS 和 JS 文件？

Question

最近在尝试做一个网站

我在本地制作所有内容并将其推送到 github 页面，我已经更改了所有图像和 CSS 和 JS 到存储库的路径。所有图像都工作正常，但我的 HTML 文件无法连接到 CSS 和 JS 文件。

我做了一些研究，发现我们可以使用 rawgit.com 作为 CDN，但它对我不起作用。我知道这应该是可能的，因为我看到一些人使用 github 页面并且他们的 css 工作正常，我只是无法让它工作。这是我的回购和索引。

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

这是我的本地文件Local Files and here is on github enter image description here

我对此很陌生，希望得到帮助，在此先感谢！！

Answer 1

在这种情况下，最好对托管在您自己站点上的静态文件使用 relative urls，例如更改：

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

简单地说：

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

这样它会在您工作的任何环境中为您加载。我使用一种叫做 middleman for building my website on GitHub pages and they do the same thing as can be seen in my repo.

的东西

您的 CSS 文件中的链接也是如此，例如您引用的图像如下：

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

但它需要像：

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

附带说明一下，建议您的文件位置不要有空格，按照惯例它们应该小写，用连字符替换空格，我会将 IMAGE FILE 重命名为 image-file。

Answer 2

您必须通过 HTTPS 协议包含脚本和样式表。看看控制台就知道了。或者您可以下载样式表和脚本并移动到您的文件夹。所以你可以从项目文件夹中包含。

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

在 Github 页面中引用 CSS 和 JS 文件？

Referencing CSS and JS file in Github Pages?

javascript

css

hosting

github

web