Github 页面未呈现 CSS 上的 Jekyll

Question

我一直在试验使用 Octopress 进行部署的 Jekyll。我已经让它在本地主机上完美运行，但由于某些原因，当站点加载到 Github 页面时，CSS 没有加载。如果能帮助我理解原因，我将不胜感激。

当我在 Github 页面 url 查看站点加载时，它显示 main.css 的 404 错误。启动器列（使用 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:4000
|-css
|   |-main.css
|
|-(index)

问题显然与 main.css 文件在 Github 页面上的引用方式有关。我假设索引文件中样式表的 link 不起作用，因为 main.css 不在预期的相对路径 /css/main.css 中。它在本地有效，但在 Github 页面站点上无效。但我不明白为什么，因为站点树似乎是正确的，没有从 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

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

像原来的 octopress 一样调用 css：

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

Answer 2

对于我的情况（不使用 octopress），当我通过 inspect element 在我的博客中检查呈现的 html 时，head 标记中 css 的 link 是这样的：

'/css/main.css'

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

因此，将 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/

Answer 3

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

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

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

Github 页面未呈现 CSS 上的 Jekyll

Jekyll on Github Pages not rendering CSS

jekyll

github-pages