网站根目录：Github Pages与`jekyll --server`的区别

Question

当我运行jekyll --server时，我的网站可以在http://localhost:4000/上访问，但是当我部署到GitHub项目页面时，它可在http://username.github.com/projectname/上访问。

这意味着我不能在引用样式表和其他资源时使用绝对URL。相对URL会在例如index.html和2012 / 01/01/happy-new-year.html 使用相同布局时出现问题。向GitHub项目页面存储库添加样式表和其他资源的接受/好方法是什么？

跨发布到GitHub问题。

- Andres Riofrio

---

使用相对URL地址，而不是绝对URL地址？ - James Allardice

如果例如/index.html和/2012/01/01/happy-new-year/使用相同的布局，则相对URL会中断。 - Andres Riofrio

如果您的项目根目录中有一个 assets 目录，则 /assets/whatever.js 可以从任何位置访问。有关更多细节，请参阅我的答案。 - James Allardice

Answer 1

这个问题的原因是根目录始终是用户URL（user.github.com），无论是在用户页面还是项目页面。我找到了一个解决办法：将 _config.yml 文件中的 url 变量配置为 GitHub 项目页面：

safe: true
...
url: "http://user.github.io/project-name"

然后，在布局中，使用绝对引用来实现此目的，使用site.url变量：

<link rel="stylesheet" href="{{ site.url }}/css/styles.css">

使用以下命令运行服务器：

$jekyll --server --url=http://localhost:4000

在本地模式下，命令行选项会覆盖配置文件中的设置。使用这些设置，可以获取指向正确位置的所有链接，无论是托管在GitHub还是在本地模式下。

---

更新：Jekyll 1.0自从Jekyll达到1.0版本后，前述选项server和url及其对应的命令行选项--server和--url已被弃用。请参照以下说明进行新版本的操作：

在_config.yml文件中添加变量baseurl（不带斜杠）：

baseurl: "http://user.github.io/project-name"

在布局或页面中，使用绝对引用，使用site.baseurl变量：

<link rel="stylesheet" href="{{ site.baseurl }}/css/styles.css">

然后，运行本地服务器（baseurl选项是故意留空的）：

$ jekyll serve --watch --baseurl=

有关更改的详细信息，请参阅文档。

- Pablo Navarro

---

这个 --url 已经被弃用了。我不知道该怎么解决。我也遇到了同样的问题。 - Sergey Romanov

它禁用自定义插件。如果您使用Github页面，则所有插件都将被禁用。 - Pablo Navarro

虽然这样可能可行，但我认为使用--baseurl选项的预期方式实际上像@SergeyRomanov在他的答案中所描述的那样。 - Eric Hansander

在两个答案中，选项的使用方式相同，用于指定项目的基本URL。这个问题是关于如何处理在本地和github中使用github页面作为项目页面的。 - Pablo Navarro

Answer 2

由于命令行中的--url已经被弃用，现在有另一种解决方案。

假设您的URL路径是repo，在您的http://name.github.io/repo中。现在，在所有链接中使用绝对URL，如：

<link rel="stylesheet" href="/repo/css/syntax.css">

或链接

<a href="/repo/license/">License</a>

你现在需要做的就是在本地运行命令时，将--baseurl加入到命令行中。

jekyll --server --baseurl /repo/

- Sergey Romanov

---

我在文档中找不到“url”命令行选项的弃用说明，但我认为这个解决方案更好。你能提供一个参考吗？ - Pablo Navarro

你可以看到在关于 configuration 的文档中，--url 甚至没有被提及。 - Sergey Romanov

救星。我整个早上都在头痛，你的答案是唯一有效的东西。需要更多的文档/简单示例来快速入门。谢谢！ - scniro

Answer 3

在最新版本的jekyll（1.1.2）中，我发现最好从原始文件中创建一个单独的配置文件。唯一的区别是URL（或baseurl变量）。

默认的_config.yml文件如下：

url: myurl.com

新的配置文件（我们称之为_preview_config.yml）：

url: localhost:4000

这将根据您使用的配置重新分配所有绝对链接。现在，要使用预览配置运行服务器，请使用以下命令：

jekyll serve -w --config _preview_config.yml

完整的解释请参见我的博客。

- jaredwolff

---

+1，除非您使用jekyll serve --config _config.yml,_preview_config.yml，否则您可以保留其他设置。在这种情况下，_preview_config.yml仅包含url行。 - Gilly

Answer 4

简要回答您的问题：在_config.yml中添加baseurl:'/project-name' 对于CSS/JS链接：{{ site.baseurl }}/css/styles.css 对于其他所有链接：{{ site.baseurl }}{{ post.url }} 官方Jeykll GH-Pages答案在这里：http://jekyllrb.com/docs/github-pages/ 摘要：

项目页面URL结构

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

1. 在_config.yml中，将baseurl选项设置为/project-name - 注意前导斜杠和尾随斜杠的缺失。例如：baseurl: '/my-proj' 2. 引用JS或CSS文件时，像这样做：{{ site.baseurl}}/path/to/css.css - 注意紧跟变量后面的斜杠(就在“path”之前)。

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

4. 最后，如果您想在使用jekyll serve预览网站之前提交/部署，请确保将一个空字符串传递给--baseurl选项，这样您就可以正常查看localhost:4000(没有/project-name开头)的所有内容。例如：jekyll serve --baseurl '' 这样，您就可以从本地站点根目录在本地预览站点，但当GitHub从gh-pages分支生成您的页面时，所有URL都将以/project-name开头并正确解析。

- Eric Steinborn

Answer 5

我使用jekyll-bootstrap，并在本地端口4000上部署，但我的github pages网址是user.github.com...我认为这取决于您最初创建存储库的方式。最初，我使用了github提供的自动页面构建程序，它以非常向导般的方式创建了存储库。

我只需按照以下步骤进行：

http://jekyllbootstrap.com/

希望这有所帮助。

- dc_coder

---

我在谈论的是GitHub项目页面，而不是GitHub用户页面。 - Andres Riofrio