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: [email protected]
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

Answer 1

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

Answer 2

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

Call css like the original octopress :

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