Github页面上的Jekyll不渲染CSS
我一直在试用Jekyll，使用Octopress进行部署。我已经让它在localhost上工作得很好，但由于某些原因，当站点加载到Github页面时，CSS无法加载。如果能帮助我理解原因，我将不胜感激。
当我在Github Pages url上查看站点加载时，它显示了main.css的404错误。initiator列(使用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页面上引用main.css文件的方式有关。我假设到索引文件中的样式表的链接不起作用，因为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
回答 3
Stack Overflow用户
发布于 2015-11-11 00:40:23
在_config.yml中，设置root: /octo-5。
像最初的章鱼一样调用css：
<link rel="stylesheet" href="{{ root_url }}/css/main.css">Stack Overflow用户
发布于 2019-03-10 01:56:52
我使用的是jekyll和github的个人网站生成器。将下面的代码添加到下面的_config.yml文件中，解决了我的css无法在生产环境中呈现的问题。不过，我不太确定原因。想要一个解释。:)
baseurl: /PROJECT
url: http://USERNAME.github.ioStack Overflow用户
发布于 2016-04-20 22:15:45
对于我的例子(不是使用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编辑：奇怪的是，我的工作是保持根目录为/，我不确定发生了什么问题，但这对内部页面不起作用。但是下面的解决方案是可行的。注意:在default的默认项目中，_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/
https://stackoverflow.com/questions/33634520
复制相似问题
腾讯云开发者
