Question

我一直在试用Jekyll使用Octopress进行部署。我已经在localhost上完美地工作了，但由于某些原因，当网站加载到Github Pages时，CSS没有被加载。我很感激任何帮助，理解为什么。

当我在Github Pages网址上查看网站加载时，它显示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上查看该站点时，站点树是：

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

对于我的情况（不使用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为/并且我不确定发生了什么错误但是停止了为内部页面工作。但下面的解决方案有效。注意：在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 2

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

像原来的章鱼一样调用css：

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

Answer 3

我正在使用jekyll和github的个人网站生成器。将以下代码添加到下面的_config.yml文件中，解决了我的CSS无法在生产环境中呈现的问题。不确定为什么。会喜欢一个解释。：）

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

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

Jekyll on Github Pages不能渲染CSS

3 个答案: