CSS file not found when pushing a Jekyll project to gh-pages remote branch and using jekyll-compass

Question

I was building my site with css and everything was working fine, both locally and remotely. Then I wanted to switch to sass. I installed jekyll-compass and now my sass files are being output as css files in my _site/css folder. Everything works well locally, but when I push them to Github, my styles are not being applied and I get a 404 on that css file. What am I doing wrong?

Answer 1

Instead of setting the output of your rendered SASS files to /_site/css, set the output to just /css (the site root level).

What is happening is that locally SASS is running just fine and outputting into your /_site/ directory as you'd expect. But in production on GitHub pages (where the jekyll-compass gem isn't supported) your CSS isn't being output into /_site at all because the plugin isn't being executed there.

It doesn't matter that it works locally from there because GitHub Pages runs the jekyll build command again once you push and generates /_site/ afresh. So anything it doesn't support (i.e. jekyll-compass) doesn't make it into the production version of your /_site folder.

The workaround I've suggested works because instead of outputting the final CSS into a directory that gets overwritten when you push to GitHub pages, it will instead write it to a directory that is preserved even with a fresh build of the /_site/ directory.

Also of note, Jekyll 2.0 will support SASS, and you can even use the 2.0 alpha gem locally if you want (although GH Pages won't be updated to 2.0 until it's officially released).

Answer 2

Very few plugins are supported by GitHub pages, it used to be none but now there are three. See this page for more information.

You will need to compile the SASS and commit the generated CSS files.