Integrating bourbon to default octopress theme

Question

I'd like to make my octopress blog template with thoughtbot's bourbon & neat. I couldn't find any documentation that covers theming in octopress (or its root, jekyll) from scratch. So, I decided to customise octopress default theme.

I've added related gems to the Gemfile like:

gem 'compass', '~> 1.0.0.rc.1' # to make compass work with sass 3.3
gem 'sass', '~> 3.3' # unnecessary but better to be placed hier
gem 'bourbon'
gem 'refills'
gem 'neat'
gem 'bitters'

Then, I've copied default theme under .themes path like:

ls .themes/classic .themes/bourtlen # so, new theme name is bourtlen :)

I've made sass folder under bourtlen empty. Then inside sass, I've run:

bourbon install  

All bourbon assets are now under sass. Then, I've added screen.scss under sass:

@import 'compass';

@import 'bourbon/bourbon';
@import 'base/base';
@import 'neat/neat';

@import 'custom/custom'; # for customization, it's also created in sass folder as _custom.scss

After all, I've installed my newborn theme, but when I hit command to generate the site, I got these warnings & errors:

❯ bin/rake generate --trace     
** Invoke generate (first_time)
** Execute generate
## Generating Site with Jekyll
/home/ekrem/.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches/browser_support.rb:1:in `require': cannot load such file -- sass/script/node (LoadError)
    from /home/ekrem/.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches/browser_support.rb:1:in `<top (required)>'
    from /home/ekrem/.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches.rb:2:in `require'
    from /home/ekrem/.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches.rb:2:in `block in <top (required)>'
    from /home/ekrem/.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches.rb:1:in `each'
    from /home/ekrem/.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-0.12.2/lib/compass/sass_extensions/monkey_patches.rb:1:in `<top (required)>'
    from /home/ekrem/.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-0.12.2/lib/compass/sass_extensions.rb:9:in `require'
    from /home/ekrem/.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-0.12.2/lib/compass/sass_extensions.rb:9:in `<top (required)>'
    from /home/ekrem/.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-0.12.2/lib/compass.rb:5:in `require'
    from /home/ekrem/.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-0.12.2/lib/compass.rb:5:in `block in <top (required)>'
    from /home/ekrem/.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-0.12.2/lib/compass.rb:4:in `each'
    from /home/ekrem/.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-0.12.2/lib/compass.rb:4:in `<top (required)>'
    from /home/ekrem/.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-0.12.2/bin/compass:20:in `require'
    from /home/ekrem/.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-0.12.2/bin/compass:20:in `block in <top (required)>'
    from /home/ekrem/.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-0.12.2/bin/compass:8:in `fallback_load_path'
    from /home/ekrem/.rbenv/versions/2.1.1/lib/ruby/gems/2.1.0/gems/compass-0.12.2/bin/compass:19:in `<top (required)>'
    from /home/ekrem/.rbenv/versions/2.1.1/bin/compass:23:in `load'
    from /home/ekrem/.rbenv/versions/2.1.1/bin/compass:23:in `<main>'
Notice: for 10x faster LSI support, please install http://rb-gsl.rubyforge.org/
Configuration file: /home/ekrem/ws-rails/blog-new/_config.yml
            Source: source
       Destination: public
      Generating... 
     Build Warning: Layout 'nil' requested in blog/categories/ruby/atom.xml does not exist.
     Build Warning: Layout 'nil' requested in blog/categories/rails/atom.xml does not exist.
     Build Warning: Layout 'nil' requested in blog/categories/ember/atom.xml does not exist.
     Build Warning: Layout 'nil' requested in atom.xml does not exist.
     Build Warning: Layout 'nil' requested in robots.txt does not exist.
     Build Warning: Layout 'nil' requested in blog/categories/ruby/atom.xml does not exist.
     Build Warning: Layout 'nil' requested in blog/categories/rails/atom.xml does not exist.
     Build Warning: Layout 'nil' requested in blog/categories/ember/atom.xml does not exist.
                    done.

Site runs on local after all but no effect because of (probably) these errors & warnings. I wonder what is missing.

Answer 1

I am trying to do the exact same thing right now (setting up my custom Octopress theme using Bourbon and Neat) and I just managed to resolve the same issue you're experiencing.

The 'nil' error:

As detailed here since version 2.2 Jekyll has an issue with the layout validation, so you will manually have to change nil to null in 2 files:

1. source/atom.xml
2. source/_includes/custom/category_feed.xml

This will sort out Jekyll and it will stop hicking up :)

The Compass errors:

I had quite a bit of a nightmare when I was trying to upgrade Compass, so that Bourbon can be installed. It seems that Compass was locked to an old version of SASS, which was locked to an old version of listen, which could not be updated...

I eventually had to delete ALL versions of Compass I had installed, and then install version 1.0.1.

In my case another issue was that I had the gems installed globally, and not per project, so I had to add a .bundle/config file to tell Bundler where to clone the gems for the Octopress repo.

The contents of my Bundler config file:

---
BUNDLE_PATH: vendor/bundle
BUNDLE_DISABLE_SHARED_GEMS: '1'

After carrying out with these changes Octopress should be happy to work with Bourbon.

I hope it helps.

Answer 2

For the 'nil' warnings:

Create an empty "nil.html" file in the _layouts folder

(Jekyll started validating layouts...)