jekyll GitHub user page build error

Question

I am trying to host a blog on GitHub Pages using Jekyll. I was able to run the blog locally without trouble. I am using the username.github.io/username repository. I created new blog using the following commands:

git clone https://github.com/xxx/xxx.github.io.git
jekyll new blog
cd blog
jekyll serve

This works locally. I've then committed and pushed to the git repo using the commands below:

cd ..
git add *
git commit -m "testing"
git push

The page build failed with the following error:

The file blog/css/main.scss contains syntax errors. For more information, see https://help.github.com/articles/page-build-failed-markdown-errors.

If you have any questions please contact us at https://github.com/contact.

The main.scss is as below,

---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";



// Our variables
$base-font-family: Helvetica, 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%);

// 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"
;

I think the problem is that the css are not generated from the scss. I am not sure though. Whats the problem here?

I don't know anything about Jekyll, but those dashes and hash style comments at the top of the file are not valid Sass. — cimmanon
@cimmanon I removed the dashes. I did not get an error but I could not see any styling in the blog. Just a simple text page. — NEO
in the _site/css folder its still main.scss. Should that be compiled to CSS? [Anyone who is familiar to jekyll can tell me about this] — NEO
Can you provide a code repository url ? It's quickest to get a rapid view and find a solution. – — David Jacquel
Which version of jekyll are you using and are you using the github-pages gem locally? — Robin James Kerrison

Gina Gina · Accepted Answer · 2015-11-18T02:02:44

You need to specify a _sass directory. Check out my project which has a main.scss (located in css/main.scss) file which imports partials from the _sass directory --> https://github.com/wiredsister/wiredsister.github.io

jekyll GitHub user page build error

1 Answers