We’ve used Jekyll and GitHub Pages to host DesignOpen.org since we published the first line of code and although we love our setup, we haven’t taken full advantage of the system; until last week’s pull request. After making said pull request, and being drunk on the power of a Google PageSpeed Insights score of 96, I made this hasty declaration to Una on our team Slack:

[11:25 PM]
I got travis hooked up on the site
[11:25 PM]
and minified everything
[11:25 PM]
I AM A JEKYLL GOD!
[11:26 PM]
I get full of myself when I stay up late
I need to go to bed.

Although it’s a bit of a stretch to declare myself a Jekyll God, you too can become one, following these simple steps that other people have published and that I have taken advantage of by compiling them in this article.

Open Blog Requirements

Design Open is an open source blog; it is designed to allow community members to publish articles and front end contributions by making pull requests to our main GitHub repository. Also, we want new contributions to go live as soon as we accept the pull request. This requirement means we don’t use any custom Jekyll plugins or local build steps. No Gulp, Grunt, Rake, or manual stuff. We thought this would mean we’d have to compromise on loading speed, but we’ve found some great workarounds.

Minify and Inline the Styles

Jekyll and GitHub Pages now support Sass and CoffeeScript by default, so you can take full advantage of the file size optimization available with Sass.

In your _config.yml you can configure Sass to output compressed css; checkout the style: compressed line of our configuration file:

1
2
3
4
5
6
7
8
9
10

1
2
3
4
5
6
7
8
9
10
11
12

1
2
3
4
5
6
7
8

1
2
3

1
2
3
4
5
6
7

1
2
3
4
5
6
7

1
2
3
4
5
6
7
8