Jekyll on Github Pages not rendering CSS

Question

I've been experimenting with Jekyll using Octopress for deployment. I've got it working perfectly on localhost, but for some reason the CSS isn't getting loaded when the site loads on Github Pages. I'd appreciate any assistance understanding why.

When I view the site loading at the Github Pages url it shows a 404 error for main.css. The initiator column (using developer tools in Chrome btw) indicates this comes from the index.html file, at the line in the HTML head:

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

The tree for the _site directory on my local machine is:

.
├── 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

This tree matches exactly in the Github repository after the site has been pushed up (I used jekyll build followed by octopress deploy).

When I look at the Sources tab in developer tools, for the deployed site, the tree shows as:

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

But when I view the site on localhost, the site tree is:

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

The issue clearly seems to have something to do with the way the main.css file is being referenced on Github Pages. I assume that the link to the stylesheet in the index file is not working because main.css isn't in the relative path /css/main.css as expected. It works locally, but not on the Github Pages site. But I can't understand why, since the site tree appears to be correct, hasn't been modified from Jekyll defaults, and is the same locally as well as on the remote.

For good measure, including the _config.yml file below. It is essentially unchanged from the default settings at install, though I added some Octopress settings:

# 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

For reference, the repository is publicly available at: https://github.com/bg-scro/octo-5

score 15 · Answer 1 · answered Mar 09 '19 at 17:56

15

I'm using jekyll and github's personal website generator. Adding the following code to my _config.yml file below solved the issue of my css not rendering in production. Not exactly sure why though. Would love an explanation. :)

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

Repo: https://github.com/kaeland/kaeland.github.io

answered Mar 09 '19 at 17:56

kaeland

191
2
9

Awesome! No prob! – kaeland Nov 06 '20 at 19:08
1

it took few secs to see changes live on github.. but it worked! :)) – shiraz27 Nov 10 '21 at 09:34
@shiraz I'm glad it worked! – kaeland Nov 30 '21 at 20:30

master_dodo · Answer 2 · 2016-04-20T21:50:32.453

For my case(not using octopress), When I checked the rendered html in my blog by inspect element, link for css in head tag was this:

'/css/main.css'

This seems to be in correct to me because css/main.css or ./css/main.css worked on index.html. But it broke things on other post pages.

So, kept the css path to be default BUT changed the root in _config.yml as

root: /

Now, everything works fine on local and after publishing on git with this as root.

But yes, in your case, it is what previous answer told,

root: /octo-5

EDIT: Strangely, I was working with keeping root as / and I am not sure what happened wrong but that stopped working for internal pages. But this below solution works. Note: In default project ofr jekyll, baseurl and url given in _config.yml are commented, so put it according to you.

In case user site

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

or

In case project site

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

See difference between user site and project site here https://help.github.com/articles/user-organization-and-project-pages/

score 6 · Accepted Answer · answered Nov 10 '15 at 16:40

6

In _config.yml, set root: /octo-5.

Call css like the original octopress :

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

answered Nov 10 '15 at 16:40

David Jacquel

51,670
6
121
147

2

That was it. I just chose to use the `baseurl` setting rather than `root` as you suggested, since that was already in the `_config.yml` and in the various other layout and includes files. Note that I had to include the entire url to the github page. Thanks for the quick answer! – Scro Nov 10 '15 at 18:07
One comment/question after further thought: should the link to the CSS file not be relative rather than absolute? The way the `baseurl` is prepended within the Jekyll templates it is an absolute reference, no? I suppose it doesn't matter but it seems like relative path would be easier to work with. interesting article on that point here: http://ricostacruz.com/til/relative-paths-in-jekyll.html – Scro Nov 10 '15 at 18:17
1

`root` is octopress way, `baseurl` is the Jekyll one. As links to css are in an include, it applies to any page independently of his position in site architecture. Definitely the easiest way with jekyll. – David Jacquel Nov 10 '15 at 21:00

Jekyll on Github Pages not rendering CSS

3 Answers3