gh-pages 在搜索资源时忽略项目目录？

Question

我有一个我一直在使用的网站，它在本地运行良好，但是当部署到 gh-pages 时，在尝试获取资源时出现许多 404。例如，我有一行 css 作为背景是

background: #fff url(/assets/images/bg.jpg) repeat top left;

我得到的 404 是这个{

github.io/assets/images/bg.jpg

路径应该是

github.io/myProject/assets/images/bg.jpg

我怎样才能让它生效？

Answer 1

发生的情况是，在您的本地设置中，资产文件夹位于同一目录中。

假设您的本地路径看起来像这样： file:///index.html 您的资产文件夹是 index.html 的兄弟文件夹。在这种情况下，它起作用是因为 / 转到目录的开头。在这种情况下是：file:/// 在那里它看到资产文件夹，所以它在本地工作。

现在 github，你有一个基本上是 my-project 的回购协议。在 my-project 中，您有 index.html 和文件夹 assets。因此，当您在这里说 /assets/ 时，begginnig 目录是 github.io，因此它会在那里寻找显然不存在的 assets。

解决方法 不要在资产前添加 /。只要资产与编写此代码的目录位于同一目录中，就可以了。

还仔细查看相对路径以更好地理解它：http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/

Answer 2

虽然 gh-pages 是由 Jekyll 生成的，但您可以使用他的魔法来简化开发。

在根目录创建一个 _config.yml 文件，包含：

baseurl: myProject/

您现在可以使用 {{site.baseurl}}assets/images/bg.jpg 调用任何资源这将自动转换为 myProject/assets/images/bg.jpg.

gh-pages 在搜索资源时忽略项目目录？

gh-pages ignoring project directory when searching for resources?

html

javascript

css

resources

github-pages