88

我gh-pages为我在 GitHub 上工作的项目创建了一个分支。

我使用 Sublime text 在本地创作网站，我的问题是当它被推送到 GitHub 时，所有指向 javascrips、图像和 css 文件的链接都无效。

例如，我的头部有这个。

<link href="assets/css/common.css" rel="stylesheet">

这在本地工作得很好，但它在 GitHub 上不起作用，因为链接不是使用存储库名称作为 URL 的一部分来解析的。

它要求：

http://[user].github.io/assets/css/common.css

当它应该要求时：

http://[user].github.io/[repo]/assets/css/common.css.

我当然可以将 repo 名称作为 URL 的一部分，但这会阻止我的网站在开发过程中在本地工作。

知道如何处理吗？

4

7 回答 7

76

你需要使用 Jekyll。

从相关文档中逐字复制：

gh-pages有时在将分支推送到 GitHub 之前预览一下 Jekyll 站点会很不错 。然而，GitHub 用于项目页面的类似子目录的 URL 结构使 URL 的正确解析复杂化。这是一种利用 GitHub 项目页面 URL 结构 ( username.github.io/project-name/) 的方法，同时保持在本地预览 Jekyll 站点的能力。

  1. 在_config.yml中，将baseurl选项设置为/project-name- 注意前导斜杠和没有尾随斜杠。

  2. 当引用 JS 或 CSS 文件时，这样做：{{ site.baseurl}}/path/to/css.css– 注意紧跟在变量后面的斜杠（就在“路径”之前）。

  3. 当做永久链接或内部链接时，这样做：{{ site.baseurl }}{{ post.url }}- 注意两个变量之间没有斜线。

  4. 最后，如果您想在使用 提交/部署之前预览您的站点jekyll serve，请务必将一个空字符串传递给该--baseurl选项，以便您可以 localhost:4000正常查看所有内容（开头没有 /project-name）： jekyll serve --baseurl ''

这样，您可以从 localhost 上的站点根目录在本地预览您的站点，但是当 GitHub 从gh-pages 分支生成您的页面时，所有 URL 都将以正确开头/project-name并正确解析。

（显然有人在几个月前才发现这一点。）

于 2013-10-04T05:25:40.330 回答
15

您使用的是哪个浏览器？你确定会发生这种情况吗？因为不应该。如果您在链接中包含相对 URL，它将相对于包含该链接的文档的 URL 进行解析。换句话说，当你包括

<link href="assets/css/common.css" rel="stylesheet">

在 HTML 文档中http://www.foo.com/bar/doc.html，链接assets/css/common.css将通过将其附加到 HTML 文档的 URL 前缀而不是路径的最后部分（没有doc.html）来解析，即链接将解析为http://www.foo.com/bar/assets/css/common.css，而不是http://www.foo.com/assets/css/common.css您声称的。

例如，查看 Twitter Bootstrap 网页的来源：http: //twitter.github.io/bootstrap/。注意顶部的样式链接，指定为<link href="assets/css/bootstrap.css" rel="stylesheet">. 该链接正确解析为http://twitter.github.io/bootstrap/assets/css/bootstrap.css，即它确实包含 repo 名称。

于 2013-05-01T20:10:44.683 回答
10

你可以把这个

<base href="/[repo]/">

在<head>标签内部，它解决了问题。

您还可以通过设置来改进此解决方案：

<base href="{{site.baseurl}}" />

然后设置site.baseurl为空字符串进行本地测试。

于 2018-04-20T14:53:46.430 回答
6

在 2016 年 12 月，也就是 3 年半之后，这应该不再是问题了。
请参阅Ben Balter发布的“ GitHub 页面的相对链接” ：

在 GitHub.com 上创作 Markdown 时，您已经能够使用相对链接一段时间了。

（从 2013 年 1 月开始）

现在，这些链接在通过GitHub Pages发布时将继续有效。

如果您的存储库中有一个 Markdown 文件docs/page.md，并且您希望从该文件链接到docs/another-page.md，您可以使用以下标记进行操作：

[a relative link](another-page.md)

当您在 GitHub.com 上查看源文件时，相对链接将像以前一样继续有效，但现在，当您使用 GitHub Pages 发布该文件时，该链接将被静默翻译docs/another-page.html以匹配目标页面的发布 URL .

在后台，我们使用的是开源Jekyll 相对链接插件，默认情况下所有构建都会激活该插件。

GitHub Pages 上的相对链接还考虑permalink: /docs/page/了文件 YAML 前端内容中的自定义永久链接（例如，），并在适当的情况下预先添加项目页面的基本 URL，确保链接在任何上下文中继续工作。

并且不要忘记，自 2016 年 8 月以来，您可以直接从master分支（并非总是在gh-pages分支）发布您的页面

自2016 年12 月以来，您甚至不需要Jekyll或index.md. 简单的降价文件就足够了。

于 2016-12-13T18:21:17.377 回答
4

Github Pages 似乎反应不是很灵敏。尽管它使新文件立即可用，但由于缓存或其他原因，修改后的文件不会立即出现。

等待15分钟左右后，一切都很好。

于 2013-08-27T10:06:53.573 回答
1

现在最好的选择是relative_url过滤器：

<link href="{{ '/assets/css/common.css' | relative_url }}" rel="stylesheet">
于 2018-12-07T05:36:52.667 回答
1

另一种选择是专门为 github.io 网页创建一个新的 repo。如果您将 repo 命名为[user].github.io在 github 上，那么它将发布在https://[user].github.io并且您可以完全避免在 URL 路径中包含 repo 名称。显然缺点是每个 github 用户只能有 1 个这样的 repo，所以它可能不适合你的需要，我不确定。

于 2017-10-29T11:54:23.473 回答