CODEWITHSUNDEEP
jekyllgithub-pages
Scro
Scro

Reputation: 1443

Jekyll on Github Pages not rendering CSS

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

Upvotes: 28

Views: 15348

Answers (3)

kaeland
kaeland

Reputation: 341

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

Upvotes: 20

master_dodo
master_dodo

Reputation: 1347

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/

Upvotes: 7

David Jacquel
David Jacquel

Reputation: 52829

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

Call css like the original octopress : 

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

Upvotes: 6

Related Questions