GitHub 页面和相对路径答案

【问题标题】：GitHub pages and relative pathsGitHub 页面和相对路径
【发布时间】：2013-04-25 08:13:14
【问题描述】：

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

我使用 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 的一部分，但这会阻止我的网站在开发过程中在本地工作。

知道如何处理吗？

【问题讨论】：

这发生在我身上。你找到原因了吗？
注意：2016 年 12 月，GitHub 页面发生了很大变化。见my answer below

标签： html github

【解决方案1】：

您需要use Jekyll。

从relevant documentation逐字复制：

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

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

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

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

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

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

（显然有人想出了这个only a few months ago。）

【讨论】：

是的，这个应该是公认的答案。对于一个常见的 Jekyll 用例来说似乎有点令人费解——我想知道他们默认不使用 site.baseurl 是否有原因？
虽然这已经有几年的历史并且文档已经改变，但这个解决方案对我来说比 Jekyll 文档中推荐的使用 {{ site.github.url }}

【解决方案2】：

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

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

在http://www.foo.com/bar/doc.html 的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 名称。

【讨论】：

你如何处理href="/"？

【解决方案3】：

你可以放这个

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

在<head>标签里面，就解决了这个问题。

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

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

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

【讨论】：

如果你不想和 Jekyll 混在一起，这是最好的解决方案
谢谢！但你能提供一些参考吗？特别是关于这个site.baseurl？我的意思是，我可以从控制台访问这个site 吗？

【解决方案4】：

在 2016 年 12 月，也就是 3 年半之后，这应该不再是问题了。
见“Relative links for GitHub pages”，由Ben Balter发布：

在创作 Markdown on GitHub.com for a while 时，您已经能够使用相对链接。

（从 2013 年 1 月开始）

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

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

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

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

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

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

别忘了since August 2016, you can publish your pages right from the master branch（并非总是gh-pages 分支）

因为Dec. 2016，你甚至不需要Jekyll 或index.md。 Simple markdown files are enough.

【讨论】：

您的回答中有很多很好的信息 - 谢谢。但是在阅读了所有链接的文章之后，我仍然不明白为什么我的 .md 文件中的 html table 中的相对链接在 github 页面过程中没有转换为 .html。 IE。在我的 .md 文件中是一个 html 表，其中包含到我的 repo 中其他 .md 文件的相对链接。该表在 github.com 上正确呈现，但在 github 页面中，相关链接仍保留为 .md 文件。 Why?
@Seamus 我从未在 html 元素（如表格）中看到过这种转换。我假设仅在使用纯 markdown 页面时才转换相对链接，而不是在 markdown 和 HTML 元素的混合中。
显然是这样。但似乎我不得不在丑陋的不平衡表和未正确转换的链接之间做出选择。有什么建议/answers？

【解决方案5】：

Github Pages 似乎反应不快。虽然它使新文件立即可用，但由于缓存或其他原因，修改后的文件不会立即出现。

等待 15 分钟左右后，一切正常。

【讨论】：

我也是这样
@AndreyMikhaylov-lolmaus：似乎赞成票也不是很敏感:)

【解决方案6】：

另一种选择是专门为 github.io 网页创建一个新的 repo。如果你在 github 上将 repo 命名为[user].github.io，那么它将发布在https://[user].github.io，你也可以avoid having the repo name in the URL path completely。显然缺点是每个 github 用户只能有 1 个这样的 repo，所以它可能不适合你的需要，我不确定。

【讨论】：

我只能冒险猜测投票者认为您的回答没有解决问题。但是，我发现它很有用，所以 +1 ！

【解决方案7】：

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

<link href="{{ '/assets/css/common.css' | relative_url }}" rel="stylesheet">

【讨论】：