Static assets combine with jekyll

Posted on July 29, 2014 • 2 minutes • 226 words

If you have several css files, each for different purpose, combining it into one would minimize HTTP requests and improve load times significantly. jekyll mades it very easy with include tag.

Here’s how you do it.

Move all the css files you want to include to _includes folder.
You create a new layout in _layouts folder called style.html and includes the needed css there.

{% raw %}

---
layout: nil
---
 
/* syntax css, base css, or whatever you need to include */
{% include css/style.css %}
{% include css/syntax.css %}

{% endraw %}

This file is basically your base css file, including all the frequently used files.

Next, create your css file like below, include it in your head tag and you’re done. All your css files are now included in the layout style which you used as a base css for your main css.

---
layout: style
---

/* Your custom css goes here */

Alternatively, if your css file is rather small, you can embeded them right into the HTML file/layout like this. I’m not a fan of this as it would look a bit mess up, even just in the source code.

<head>
<title>Your page title</title>
  <style>
    /* include it here. It will be replaced as your css file content */
  </style>
</head>

Last step: check your PageSpeed score again and smile.