Jekyll blog folder won't compile on github pages but works offline

Question

I set up a github user page repo at myuser.github.io . I put up a regular html static website in there and it works great. (I also set a custom domain with a CNAME file and CNAME DNS record so that myuser.github.io goes to www.example.com)

Then I also made a /blog folder in that repo and I put in a jekyll blog template.

Running jekyll build serve or bundle exec jekyll serve locally gives me no errors. I can make new posts and they show up on localhost:4000/blog/ .

But when I push my blog folder to github, these things happen:

• I get an email from github saying "The file b2/css/main.scss contains syntax errors. For more information, see https://help.github.com/articles/page-build-failed-markdown-errors ."
• If I try to access www.example.com/blog/index.html I get a 404.
• If I try, with the /blog/ and the error still in the repo, to make any new changes to my repo (eg change the title of my main, non-blog page, or change a random image etc) and I push, the changes do not register online at all (though they show on github.com in the repo file tree).

This means that github freaks out due to that error and won't update until it's fixed.

How can I figure out what that "main.scss" error is? Since it's fine locally. I am new to jekyll (and github pages) but I followed the documentation as best I could.

This is my main.scss:

---
layout: null
# Only the main Sass file needs front matter (the dashes are enough)
#http://sassmeister.com/
---
@charset "utf-8";


// Our variables
$base-font-family: "Raleway",Arial,sans-serif;
$base-font-size:   16px;
$small-font-size:  $base-font-size * 0.875;
$base-line-height: 1.5;

$spacing-unit:     30px;

$text-color:       #111;
$background-color: #fdfdfd;
$brand-color:      #2a7ae2;

$grey-color:       #828282;
$grey-color-light: lighten($grey-color, 40%);
$grey-color-dark:  darken($grey-color, 25%);
$blue-color:       #515865;

// Width of the content area
$content-width:    800px;

$on-palm:          600px;
$on-laptop:        800px;



// Using media queries with like this:
// @include media-query($on-palm) {
//     .wrapper {
//         padding-right: $spacing-unit / 2;
//         padding-left: $spacing-unit / 2;
//     }
// }
@mixin media-query($device) {
    @media screen and (max-width: $device) {
        @content;
    }
}



// Import partials from `sass_dir` (defaults to `_sass`)
@import
        "base",
        "layout",
        "syntax-highlighting"
;

PS: this is the jekyll blog theme I am using: https://github.com/smallmuou/Jekyll-Pithy

Answer 1

Github pages is generating from the root. If you've put your Jekyll in a /blog folder, your _setting.yml is not discovered and scss import path can be messed up.

If you want to reproduce locally you have to recreate the same folder architecture and fire the jekyll serve --trace from the root, not from /blog.

The solution is to create a blog repository and to push your jekyll in the gh-pages branch.