Jekyll with Rails assets

14 May, 2015

Jekyll is the great static website generator, that can be easily used for blogs, portfolio pages, galleries and others simple projects. It`s very simple, flexible tool that can be upgraded with hundreds powerful plugins.

If you like Ruby on Rails, you might want to use Rails assets pipeline when you work with front-end in Jekyll. If so, here are jekyll-assets. This project allows you to use some Rails-like assets pipeline functionality:

//=require 'jquery'
//=require 'slideout'
//=require 'parallax'

But what if you also wants to use popular Bower packages with Jekyll and jekyll-assets?
First, you need Rails assets project, that allows you to use any Bower modules with Bundler. You just need to add required packages in your Gemfile like this:

source 'https://rails-assets.org' do
  gem 'rails-assets-jquery'
  gem 'rails-assets-normalize-scss'
  gem 'rails-assets-slideout.js'
end

It works greatly with Ruby on Rails, but you need some hack to use it with jekyll-assets - by default, jekyll-assets configuration does not include rails-assets paths. To fix this, you can load paths with Sprockets in your Jekyll plugin file (_plugins/ext.rb) .

require 'jekyll-assets'
require 'bundler/setup'

Bundler.require(:default, 'development')

if defined?(RailsAssets)
  RailsAssets.load_paths.each do |path|
    Sprockets.append_path path
  end
end

When you’ve completed setup, you can manage your assets almost like in Ruby on Rails.