Github Pages上的Jekyll无法呈现CSS

Question

我一直在尝试使用Octopress进行部署的Jekyll。我已经在localhost上很好地工作了，但是由于某些原因，当站点在Github Pages上加载时CSS没有被加载。感谢您对理解原因的任何帮助。

当我查看在Github Pages网址上加载的网站时，显示的404错误main.css。启动器列（使用Chrome btw中的开发人员工具）指示这来自index.html文件，位于HTML标题行中：

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

_site我的本地计算机上目录的树是：

.
??? 2015
?   ??? 11
?       ??? 09
?           ??? another-jekyll-blog.html
?           ??? fifth-time-is-the-charm.html
?           ??? jekyll-and-octopress-is-this-thing-on.html
??? about
?   ??? index.html
??? css
?   ??? main.css
??? feed.xml
??? index.html
??? jekyll
    ??? update
        ??? 2015
            ??? 11
                ??? 09
                    ??? welcome-to-jekyll.html

在站点被推上后，该树与Github存储库中的完全匹配（我使用，jekyll build之后使用octopress deploy）。

当我查看开发人员工具中的“源”选项卡时，对于已部署的站点，树显示为：

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

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

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

显然，该问题似乎与在Github Pages上引用main.css文件的方式有关。我假设索引文件中样式表的链接不起作用，因为main.css不在/css/main.css预期的相对路径中。它可以在本地使用，但不能在Github Pages网站上使用。但是我不明白为什么，因为站点树看起来是正确的，没有根据Jekyll的默认设置进行修改，并且在本地和远程都相同。

采取适当措施，包括以下_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

作为参考，该存储库可从以下位置公开获得：https : //github.com/bg-scro/octo-5

Answer 1

我正在使用 jekyll 和 github 的个人网站生成器。将以下代码添加到下面的 _config.yml 文件中解决了我的 css 未在生产中呈现的问题。不完全确定为什么。想要一个解释。:)

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

回购：https : //github.com/kaeland/kaeland.github.io

Answer 2

中_config.yml，设置root: /octo-5。

像原来的 octopress 一样调用 css ：

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

Answer 3

对于我的情况（不使用 octopress），当我通过检查元素检查我博客中呈现的 html 时，head 标签中的 css 链接是这样的：

'/css/main.css' 

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

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

root: /

现在，在本地和以 root 身份在 git 上发布后一切正常。

但是，是的，就您而言，这就是之前的答案所说的，

root: /octo-5

编辑： 奇怪的是，我正在将 root 保持为 / 并且我不确定发生了什么问题，但这对内部页面不起作用。但是下面的解决方案有效。注意：在jekyll的默认工程中，_config.yml中给出的baseurl和url是有注释的，所以根据你的情况来写。

如果用户站点

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

或者

万一项目现场

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

在此处查看用户站点和项目站点之间的区别 https://help.github.com/articles/user-organization-and-project-pages/