首页 文章

Jekyll在Github Pages上没有渲染CSS

提问于
浏览 次
5

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

当我在Github Pages 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 ） .

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

[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

jekyll github-pages

3 回答

  • 3

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

    像原来的octopress一样调用css：

    <link rel="stylesheet" href="{{ root_url }}/css/main.css">
    回复于
  • 4

    对于我的情况（不使用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

    EDIT: 奇怪的是，我正在努力保持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/

    回复于
  • 0

    我正在使用jekyll和github的个人网站生成器 . 将以下代码添加到我的_config.yml文件中解决了我的css无法在 生产环境 中渲染的问题 . 不完全确定为什么 . 会喜欢解释 . :)

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

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

    回复于

相关问题