CSS file not found when clicking Jekyll project on remote branch of gh pages and using jekyll-compass

Question

I built my site using css, and everything worked fine, both locally and remotely. Then I wanted to switch to sassi. I installed jekyll-compass and now my sass files are output as css files to the _site / css folder. Everything works fine locally, but when I click them on Github my styles are not applied and I get 404 in this css file. What am I doing wrong?

Answer 1

Instead of outputting your processed SASS files to /_site/css , set only /css (the root level of the site) for output.

What happens is that locally SASS is working fine and output to your /_site/ directory, as you expected. But when creating on GitHub pages (where jekyll-compass gem is not supported), your CSS is not displayed on /_site at all, because the plugin does not execute there.

It doesn’t matter that it works locally from there, because GitHub Pages runs the jekyll build command jekyll build after clicking and creating /_site/ again. So everything that it does not support (i.e. Jekyll-compass) does not fall into the production version of your /_site folder.

The workaround I suggested works because, instead of outputting the final CSS to a directory that is rewritten when you click on the GitHub pages, it instead writes it to a directory that is saved even with the new build /_site/ .

Also note that Jekyll 2.0 will support SASS, and you can even use 2.0 alpha gem locally if you want (although GH Pages won 'before upgrading to 2.0 until it is officially released).

Answer 2

Very few plugins are supported by GitHub pages, this was not the case, but now there are three. See this page for more details.

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