An asset pipeline is a key component of a web stack these days, since most people don’t want to manually run preprocessors, resize images, and concatenate files. And while it may not be a big deal for a static website, depending on the site, saving time for yourself and your user is never a bad idea.
Adding the Asset Pipeline
The jekyll-assets library is a wonderful asset pipeline plug-in designed for Jekyll. It supports a wide range of preprocessors, allows for easy asset compression, can automatically resize images, and more. Plus it’s built on top of the popular sprockets library resulting in a rock solid foundation.
First we’ll need to add the
jekyll-assets dependency to our
Gemfile to begin.
And then we just need to load it as a Jekyll plug-in by creating a simple
The basic configuration is great, but we can do better. Let’s simplify our Sass with Bourbon, enable CSS and JS compression to save our users time, and cache the compiled files to save us time.
First let’s add the
bourbon library for Sass mixins and the
We need to require
jekyll-assets/bourbon to enable Bourbon. Note that there is mention of removing this in a future version of
Now we can add our asset configuration to our Jekyll
_config.yml file to enable caching and compression.
If you do cache the assets you will want to add
.jekyll-assets-cache to your
A jazzy asset pipeline isn’t much use if it’s not in use. The README provides a great explanation of the tags and filters available to us. But for a quick explanation, let’s say we have the following asset files.
_assets/images/logo.png— Our website logo.
_assets/stylesheets/application.scss— The global CSS for our site.
We can render tags for them in a template with the new Liquid tags.
By default the pipeline will prepend
/assets/ to the asset path, but there may be certain cases when an absolute URL is neccessary. We can change the base URL for assets in the Jekyll configuration. And this is useful if you’re using a separate domain or CDN for your assets.
While this is an easy change, we don’t want to try loading our local assets from our production server. The handy
configuration setting we added in the second part of the series allows us to add the setting to
_config_production.yml and use it when deploying remotely.
Improving HTTP Caching
While the asset pipeline will help minify our CSS and JS file sizes, we can also add gzip compression and improve the HTTP caching for all assets. Note that since any asset URL will contain a digest making it unique, we can cache them far into the future.
For any further performance, the Google PageSpeed Tools can be helpful.
We now have a full asset pipeline complete with performance improvements, which is sure to make our website insanely fast to load. See the jekyll-vps-server repository for the complete Chef source code, with the part-4 branch being specific to this article. The website source code is available in the jekyll-vps-website repository, with the part-4 branch being relevant.
In the next part we’ll switch to be HTTPS only. E-mail me if you have any tips, comments, or questions.