为github项目页面配置Jekyll

Question

我已经快要绝望了。我一直在尝试查看所有其他示例github项目页面，甚至博客，但没有一个展示出我遇到的问题。首先，我正在尝试为我的存储库创建一个项目页面。我通过按照通常的教程，创建项目存储库中的gh-pages分支并进行推送来完成这个操作。

我设法完成了这些工作并且模板化了我的文件。我甚至成功使用了HAML和SASS（它们仍然都转换为HTML / CSS，并将其推送到存储库，因此没有问题）。我只是觉得我正在错误地配置jekyll。首先，我在其他人的页面中没有看到任何使用config.yml上的baseurl或url的配置。

我的问题出在循环我的帖子时：

{% for post in site.posts %}
  <a href="{{ post.url }}">{{ post.title }}</a>
{% endfor %}

它总是将href生成为href="/post-title"

我的_config.yml只有这个:

permalink: /exercises/:title

这个问题在于，当我点击链接时，它总是指向http://corroded.github.com/exercises/title-here，而实际上应该是http://corroded.github.com/projectname/exercises/title-here。

我曾尝试硬编码路径：<a href="http://corroded.github.com{{ post.url }}"> 这样做确实可以。它会转到帖子，但它以纯文本形式显示，而不是生成的HTML格式。我知道我在这里错过了一些非常简单的东西，但我似乎找不到它，并且我已经在整个周末与此搏斗。

哦，我忘了补充：在我的本地主机上进行此操作，我可以访问以下所有内容：http://localhost:4000/ 点击链接将使我进入http://localhost:4000/exercises/title-here ，它可以正常工作。所以我有一个很好的猜测，它与配置有关。

- corroded

---

你尝试过更改 my_config.yml 文件中的行吗：permalink: /exercises/:title 为 permalink: /projectname/exercises/:title 吗？虽然我对 GitHub 页面一无所知，但这似乎是一个显而易见（太显而易见了？）的尝试。 - vlasits

这似乎有点显而易见，但仅适用于帖子。当我创建一个链接到关于页面时，它仍然引用/about，该链接指向http://corroded.github.com根目录。更不用说我还必须为我的CSS和JS文件硬编码该路径，而所有其他示例仅显示“/css/stylesheet.css”。 - corroded

Answer 1

编辑：此答案已添加到Jekyll文档的http://jekyllrb.com/docs/github-pages/。

---

如果您正在寻找标准的GitHub Pages URL解决方案(username.github.io/project-name/)，我最终找到了技巧。这是需要执行的操作:

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

现在，您需要更改模板和文章中的链接方式，按以下两种方式进行：

引用JS或CSS文件时，请使用以下方式：{{ site.baseurl }}/path/to/css.css--请注意在变量（"path"之前）之后立即加上斜杠。

当做永久链接或内部链接时，请使用以下方式：{{ site.baseurl }}{{ post.url }}--请注意两个变量之间没有斜杠。

最后，如果您想要在提交/部署之前使用jekyll serve预览您的站点，请确保将空字符串传递给--baseurl选项，以便您可以正常查看localhost:4000上的所有内容（不带/project-name混入其中搞乱一切）：jekyll serve --baseurl ''

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

有关此问题的更多讨论，请参见issue #332。

- mjswensen

---

为什么这还没有被选为正确的答案呢？ - Kelly J Andrews

Answer 2

当你在永久链接的开头加上斜线时，它意味着所有的URL都应该是相对于网站根目录的。这就是为什么它会跳转到http://corroded.github.com/exercises/title-here而不是http://corroded.github.com/projectname/exercises/title-here。试着去掉第一个斜线：

permalink: exercises/:title

任何使用HTML创建的URL都适用于同样的方法。例如，如果您有以下内容：

<a href="/about">

它将始终转到域的根目录（例如http://corroded.github.com/about）。如果您的项目名为“projectname”，则可以使用类似于HTML的代码

<a href="/projectname/about">

直接链接到页面（例如http://corroded.github.com/projectname/about）。

当然，您也可以使用相对URL（即没有前导斜杠的URL）。您只需要注意您在目录树中的位置。

- Alan W. Smith

---

另一个有用的事情是完全从您的配置中删除“永久链接”。这将让您看到所有内容在其默认模式下的行为，并可能让您更好地理解发生了什么。 - Alan W. Smith

我实际上尝试过删除永久链接，就像我说的，在所有那些研究中，我忘记了最基本的部分：删除那个正斜杠。我一直认为我需要输入正斜杠，只是需要设置baseurl，并且忘记了删除正斜杠。感谢你指出这一点。非常感谢！ - corroded

不幸的是，我发现将项目名称添加到固定链接的开头会在站点输出中生成一个额外的子文件夹（如预期），并不能真正解决问题。我在下面的答案中发布了一个不同的解决方法。 - mjswensen