Inline CSS in Jekyll

I have long been a fan of Jekyll. It has some flaws and is not always the best tool for the job, however, it can be a great tool for some situations. I have lost count of how many websites I have built with it.

Recently, I made yet another site with Jekyll, this time for Simplified JavaScript Jargon and I found myself facing a not so atypical issue — inlining styles in the <head>.

The Need

You may have heard of critical CSS. The idea behind the concept is to provide critical styles (the ones responsible for the look of the top and main content areas of the page) as soon as possible to the browser so that there is no delay before accessing the content.

There is a common rule that says it is good to send what is needed to render the top of the page in under 14kb, because that is roughly how much the server can handle in one roundtrip. Google PageSpeed Insights gives more information about this in their documentation, so feel free to have a look if you want to know why it works this way.

To that extent, if your CSS is small enough (like it is for SJSJ), you could inline it all in the <head> and send it all together in the first roundtrip without even bothering with an external stylesheet. That is not super common, but when it is, it’s pretty rad.

Back to Jekyll

So my idea was to include styles inside a <style> tag in the head of the document, and skip an external stylesheet altogether. My first bet was to build the site, then move the generated CSS file inside the _includes folder so that it can be included with the {% include %} block. It worked, but was a bit tedious as a process.

Then I realised that if I was able to inline all my styles in the head of the page, it was because I did not have so many of them, so I could definitely tackle the problem the other way around.

Instead of moving my styles inside the _includes folder after the build, I could create them directly inside that folder. I could then have a CSS file imported inside the head of the document from there.

/* _includes/styles.css */

.foo-bar {
  color: pink;
}

And then:

<!-- _includes/head.html -->

<style>
{% include styles.css %}
</style>

Tada! It gives us just what we want:

<!-- … -->
<style>
.foo-bar {
  color: pink;
}
</style>
<!-- … -->

Continue reading %Inline CSS in Jekyll%


Source: Sitepoint