Github页面上的Jekyll未呈现CSS

我一直在尝试使用Octopress部署Jekyll。我已经让它在localhost上运行得很好，但是由于某些原因，当站点加载到Github页面时，CSS没有被加载。我非常感谢任何能帮助我理解原因的人

当我在Github页面url查看站点加载时，它显示了

main.css

的404错误。initiator列（使用Chrome btw中的开发人员工具）指出它来自index.html文件，位于html头部的行：

  <link rel="stylesheet" href="/css/main.css">

在站点被推上之后，这个树在Github存储库中完全匹配（我使用了

jekyll build

，然后是

octopress deploy

）

当我在developer tools中查看已部署站点的Sources选项卡时，该树显示为：

[USER].github.io
|-css
|   |-main.css
|
|-octo-5
|   |-(index)

但当我在localhost上查看站点时，站点树是：

localhost:4000
|-css
|   |-main.css
|
|-(index)

这个问题显然与Github页面上引用main.css文件的方式有关。我假设指向索引文件中样式表的链接不起作用，因为main.css不在相对路径

/css/main.css

中。它可以在本地工作，但不能在Github页面站点上工作。但是我不明白为什么，因为站点树看起来是正确的，没有从Jekyll默认值修改，并且在本地和远程都是相同的

为了更好地测量，包括下面的

\u config.yml

文件。虽然我添加了一些Octopress设置，但与安装时的默认设置基本相同：

# Site settings
title: Test Site
email: your-email@domain.com
description: > # this means to ignore newlines until "baseurl:"
  Site description here...
baseurl: "" # the subpath of your site, e.g. /blog
url: "http://yourdomain.com" 
twitter_username: jekyllrb

## --- Octopress defaults --- ##
# Default extensions for new posts and pages
post_ext: markdown
page_ext: html

# Default templates for posts and pages, found in _templates/
post_layout: post
page_layout: page

# Format titles with titlecase?
titlecase: true

# Change default template file (in _templates/)
post_template: post
page_template: page
draft_template: draft

---

为了便于参考，存储库可在以下位置公开获取：

在

\u config.yml

中，设置

根目录：/octo-5

像最初的octopress一样调用css：

<link rel="stylesheet" href="{{ root_url }}/css/main.css">

对于我的案例（不使用octopress）， 当我通过inspect元素检查博客中呈现的html时，head标记中css的链接如下：

'/css/main.css' 

这对我来说似乎是正确的，因为css/main.css或./css/main.css在index.html上工作。但它破坏了其他帖子页面上的内容

因此，将css路径保留为默认路径，但将_config.yml中的根更改为

root: /

现在，一切都可以在本地运行，并且在git上以root的形式发布之后

但是是的，在你的情况下，这是前面的答案告诉我们的

root: /octo-5

---

编辑： 奇怪的是，我一直在使用root作为/和我不确定发生了什么错误，但这停止了内部页面的工作。但下面的解决方案是有效的。注意：在RJekyll的默认项目中，_config.yml中给出的baseurl和url都会被注释，所以请根据您的要求进行注释

如果是用户站点

baseurl: /
url: http://USERNAME.github.io

或

在项目现场

baseurl: /PROJECT
url: http://USERNAME.github.io

请参见此处的用户站点和项目站点之间的差异

---

我正在使用jekyll和github的个人网站生成器。将以下代码添加到下面的_config.yml文件中，解决了我的css在生产中无法呈现的问题。但我不太清楚为什么。我想要一个解释。：）

---

回购：

就是这样。我只是选择使用

baseurl

设置，而不是像您建议的那样使用

root

，因为它已经在

\u config.yml

和各种其他布局中，并且包括文件。请注意，我必须包含github页面的整个url。谢谢你的快速回答！进一步思考后的一个评论/问题是：指向CSS文件的链接是否应该是相对的而不是绝对的？在Jekyll模板中，

baseurl

是一个绝对引用，不是吗？我想这没关系，但相对路径似乎更容易处理。关于这一点，这里有一篇有趣的文章：

root

是octopress方式，

baseurl

是Jekyll方式。由于css的链接包含在一个include中，所以它适用于任何页面，与他在站点架构中的位置无关。绝对是杰基尔最简单的方法。太棒了！没问题！

baseurl: /PROJECT
url: http://USERNAME.github.io

baseurl: /PROJECT
url: http://USERNAME.github.io