CODEWITHSUNDEEP
githubsassjekyllgithub-pages
Pedro Marins
Pedro Marins

Reputation: 25

Jekyll hosted on Github not rendering my css generated file

I'm trying to host my jekyll static website at github pages and almost everything is working fine. I tried everything to make my CSS generated file (from SASS) to work. But could not do it.

My website is on this URL: http://pedromarins.github.io/

My github repo is here: https://github.com/pedromarins/pedromarins.github.io/

My _config.yml is setted up as

baseurl: ""

and 

url: "http://pedromarins.github.io"

also my sass folder is setted up as 

sass:
  sass_dir: assets/_sass
  style: compressed

I can't see what is wrong. If someone could help and point what is wrong I appreciate!

UPDATE 1 - 18h37 29-April-2017

Installed ghpages gem. Now my Gemfile looks like this: 

source "https://rubygems.org"

require 'json'
require 'open-uri'

gem 'jekyll'
gem 'github-pages'
gem "json", "2.0.2"

group :jekyll_plugins do
    gem 'jekyll-livereload'
end

Upvotes: 0

Views: 845

Answers (1)

bntzio
bntzio

Reputation: 1324

Ok, after some hours trying to make your site work I found a solution.

What I figured out was that Jekyll only looks for the css directory at root level, so in order to make your site to work properly you need to add the css directory at root level and place in there your style.sass file.

After that, the Jekyll build process will generate the style.css file in that directory, so you just need to include that file in the head.html partial.

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

And your site will just work as expected, no css rendering problems at all, you can leave your sass dir as assets/_sass with no problem, that directory is just to tell the css/style.sass file that the sass @imports are found in there.

So you can reference them just like you are doing:

---
---
@import "layout"
@import "components/header"
@import "components/now"
...

Now, another workaround is to have your style.sass file in your assets folder, but not in the css folder, just leave it in the assets folder, and access it from your head.html partial as:

<link rel="stylesheet" href="/assets/style.css">

And it will work too.

Just remember to set the correct path for your other non-css assets like images, icons or fonts.

Upvotes: 2

Related Questions