静态资源未在 GitHub 页面上加载答案

【问题标题】：Static resources not loading on GitHub Pages静态资源未在 GitHub 页面上加载
【发布时间】：2013-08-02 18:37:59
【问题描述】：

我创建了一个网站并尝试将其托管在 git hub 页面上。我的网站可在 -

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

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

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

上面的路径省略了<project name>

所以每当我点击 url 时，我的静态文件都不会加载。

有没有办法让它与 github url 一起工作？

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

临时解决方案 我创建了一个User page instead of a Project page 来解决这个问题。

【问题讨论】：

username.github.io 也有网站吗？当您在浏览器中转到username.github.io/css/site.css 时会发生什么？你可能得试试raw.username.github.io/css/site.css
不，username.github.io 处没有网站，css 文件在该位置不可用。什么是“原始”？
您需要更改 css 和脚本的静态 url 以指向正确的位置。试试/css/site.css
是的，但它不适用于实际域。
你不能同时拥有这两种方式，要么创建 username.github.io 站点并将样式放在那里，要么将其放入项目中，这样样式将位于 username.github.io/projectname/css/ site.css

【解决方案1】：

另一种选择是在您的顶级目录中包含文件.nojekyll，它告诉 github 只为您的页面提供服务而不试图破坏它们（如果您尝试从 sphinx 发布输出，这很有用不再需要解析/修改/重写）。

【讨论】：

【解决方案2】：

来自documentation to setup a custom domain：

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

这意味着由于相对路径，您可以在您的username.github.io/project-name或上拥有资产。

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

baseurl: /project-name

到你的_config.yml 并在你的永久链接中使用{{ baseurl }} 标签，jekyll 会做替换。要在本地测试它，只需使用此选项运行服务器

jekyll serve --baseurl ''

希望对您有所帮助 :) 编码愉快！

【讨论】：

这正是我想要的。谢谢！
我认为永久链接标签应该是{{ site.baseurl }}而不是{{ baseurl }}
FWIW，我在使用 webpack 构建我的网站时遇到了同样的问题。在webpack.config.js 中设置output.publicPath: /project-name。即便如此，在构建配置中设置发布的 url 路径的基本原则是正确的解决方案。

【解决方案3】：

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

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

如果您不使用客户端路由，请使用：

"homepage": ".",

【讨论】：