CSS Minfication plugin for use with Jekyll
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.



Generates minified CSS using the juicer gem for use with the static site generator Jekyll. It's basically a wrapper for juicer (which in turn makes use of YUI compressor) that is called automatically when the site is compiled.

This came about when I wanted to minify some CSS but couldn't find any way to automatically do it, using Jekyll. I did a few quick searches for a plugin or liquid filter, but came up with nil.

Here is my quick solution.



  1. Place the CssMinify.rb plugin into your <root>/_plugins directory so that Jekyll can load it
  2. Create a new path <root>/css.
  3. Follow the Usage instructions below.
  4. Compile your site with jekyll


Specifying source files

The simplest way of specifying source files for minification is to place them all into a <root>/css folder


Alternatively, you can create a configuration called 'CssMinify.yml' in your <root> directory. In this configuration file you can use the following syntax to list source files:

files: [

Note that this second method also allows you to specify the order in which files should be added to the output. This is especially handy if you want to make sure that your reset file is always first.

Updating your HTML files

As the filename for the generated CSS output changes each time, you need to update your layout file. Simply, link to the minified css file by using the parameter {% minified_css_file %}:

<link rel="stylesheet" href="{% minified_css_file %}">

Specifying an alternative output destination

If, for whatever reason, you wish to override the default output location for your generated, minified file. Create a configuration called 'CssMinify.yml' in your <root> directory. In this configuration file you can use the following syntax to set a destination directory (relative to the Jekyll site output directory):

css_destination: '/alternative_location/css/'


Reads all the css files in the css directory or CssMinify.yml configuration file and creates a single, minified file into your site's destination directory (unless overridden in the configuration file).

The file name is based on the current date and time, in order to ensure that any updates are automatically cache-busted.

Using the default settings, for example:


When the site is compiled using jekyll, the minified css file will be in the css folder of your site's destination directory.


What this plugin does is equivalent to (using the above example):

juicer merge -f css/style.css css/syntax.css -o _site/css/site.min.css


This plugin is in an early stage and put together quickly with my limited Ruby knowledge. If there are any suggestions or criticisms about the code, open up an issue :D

  • there's an issue where jekyll --server --auto seems to constantly regenerate files, could be because of the hackery used to keep jekyll from blowing away the minified file (see: https://github.com/mojombo/jekyll/issues/268)
  • have a nice way to include all the non-minified css, since it doesn't always have to be minifed