Question

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

我使用Sublime文本在本地创建网站，我的问题是当它被推送到GitHub时，所有指向javascrips，images和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的一部分，但这会阻止我的网站在开发过程中在本地工作。

知道怎么处理这个吗？

Answer 1

您需要use Jekyll。

逐字复制relevant documentation：

有时候在推送你的Jekyll网站之前预览你的网站是很好的   gh-pages分支到GitHub。但是，类似于子目录的URL   结构GitHub用于项目页面使正确的复杂化   URL的解析。这是一种利用GitHub的方法   项目页面URL结构（username.github.io/project-name/）while   保持在本地预览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生成你的页面时   分支所有网址将以/project-name开头并解析   正常。

（显然有人认为这是only a few months ago。）

Answer 2

您使用的是哪种浏览器？你确定会发生这种情况吗？因为它不应该。如果在链接中包含相对URL，则会相对于包含该链接的文档的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，即它确实包含回购名称。

Answer 3

这不应该是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发布该文件时，该链接将被静默转换为{{1} }匹配目标网页的已发布网址。

我们正在使用开源Jekyll Relative Links插件，默认情况下会为所有版本激活。

GitHub页面上的相对链接还会考虑文件的YAML前端中的自定义永久链接（例如docs/another-page.html），并在适当的前提下添加项目页面的基本URL，以确保链接在任何上下文中继续有效

不要忘记since August 2016, you can publish your pages right from the master branch（并非总是permalink: /docs/page/分支）

自Dec. 2016以来，您甚至不需要gh-pages或Jekyll。 Simple markdown files are enough.

Answer 4

你可以放

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

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

您还可以通过设置：

来改进此解决方案

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

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

Answer 5

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

等了15分钟后，一切都很好。

Answer 6

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

Answer 7

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

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

GitHub页面和相对路径

7 个答案: