GitHub Pages上静态资源无法加载

Question

我已创建了一个网站，并试图将其托管在GitHub Pages上。我的网站可在以下网址访问 -

http://<username>.github.io/<project name>/

但是我网站的静态文件可以在以下路径找到 -

http://<username>.github.io/css/site.css
http://<username>.github.io/script/main.js

上述路径中省略了<project name>

因此，每当我访问该网址时，我的静态文件无法加载。

有没有一种方法可以使它与github url一起工作？

注意：当我使用自定义域名时，一切正常，因为在这种情况下相对路径是正确的。

临时解决方案 我创建了一个用户页面而不是项目页面来解决这个问题。

- tusharmath

---

username.github.io 也存在一个网站吗？当你在浏览器中访问 username.github.io/css/site.css 时会发生什么？你可能需要尝试 raw.username.github.io/css/site.css。 - user894932

没有在username.github.io上找到网站，CSS文件也不在那个位置。什么是'raw'? - tusharmath

你需要更改静态 URL，使其指向正确的位置。尝试使用 /css/site.css。 - user894932

是的，但那样它就不能与实际域名一起使用。 - tusharmath

你不能两全其美，要么创建username.github.io网站并将样式放在那里，要么将其放在项目中，这样样式就会在username.github.io/projectname/css/site.css中。 - user894932

raw.github.com 是GitHub使用的子域名，用于向您显示存储库中文件的“原始”版本，意味着仅纯文件，而不包括网站结构。打开存储库中的文件并在右上角的工具栏中单击“Raw”以查看它。 - mokagio

Answer 1

另一种选择是在您的顶级目录中包含文件.nojekyll，这会告诉github仅提供页面而不尝试破坏它们（如果您正在尝试发布来自sphinx的输出，则此选项非常有用，因为它不需要进行任何其他解析/修改/重写）。

相关链接

- tacaswell

---

我为此烦恼了好久！一个简单的两个文件网站（index.html和_bundle.js）需要.nojekyll文件才能正常工作。 - xavdid

Answer 2

根据自定义域名文档:

警告: 项目页面子路径，例如 http://username.github.io/projectname 不会被重定向到 项目的自定义域名。

这意味着由于相对路径问题，您只能将资源放在您的username.github.io/project-name或您的自定义域名上。

如果您想要它们出现在GitHub中，请查看文档有关baseurl配置，它位于页面底部的“项目URL结构”中。它很简单，您只需要添加一个

baseurl: /project-name

在您的_config.yml中添加{{ baseurl }}标记到您的永久链接中，Jekyll将进行替换。如果要在本地测试，请使用此选项运行服务器。

jekyll serve --baseurl ''

希望这可以帮到你 :) 开心编码！

- mokagio

---

我认为永久链接标签应该是 {{ site.baseurl }} 而不是 {{ baseurl }}。 - mikeybeck

顺便说一下，我在使用webpack构建我的网站时遇到了同样的问题。在webpack.config.js中设置output.publicPath: /project-name。即使如此，在构建配置中设置发布的URL路径的基本原则仍然是正确的解决方案。 - gfullam

Answer 3

如果您的项目是使用Create React App创建的React应用程序，请在package.json中设置homepage，例如：

"homepage": "/<project name>",

如果您没有使用客户端路由，请使用以下内容：

"homepage": ".",

请查看https://create-react-app.dev/docs/deployment/#building-for-relative-paths。

- Ron Inbar