Impatient Jekyll

Professional & easy to use Jekyll v3 starter kit.
Fast local workflow, fast website in production.

► Watch demos Download on GitHub → GitHub →

Top Features


    Great coding comfort. Livereload in dev mode, no more need to manually refresh browser on each code change.
    Highly configurable assets. Keep Liquid templating intact, so parameterize HTML, CSS, JS and other assets as much as you like.
    Extreme ease of use. All complexity is hidden, so even if you don't know JS automation tools : only one command to launch dev mode, one command to deploy to github pages.
    Blazing fast rendering Strongly optimized so that you start with high score on Google Page Speed Insights, and an excellent SpeedIndex on

How to use it ?

Work & iterate fast locally

$ git clone
$ cd impatient-jekyll
$ npm install
$ gulp
# ta-da ! the browser launches itself,
# and will rebuild and live-reload each time you
# change a CSS, JS, or HTML file

Make it visible to the world

# Do 'git clone' and 'cd' as above
# Go on github, and a create a new repo [repoID]
$ rm -rf .git
$ git init && git add . && git commit -m 'first commit'
$ git remote add origin[githubID]/[repoID].git
# In, set baseurl to [repoID]
$ gulp deploy
# Your website is available at
# https://[githubID][repoID]
# Test it on Google Page Speed Insight,
# It rocks !!

How does it works ?

In dev mode

    1. A normal jekyll build occurs
    2. CSS files are compiled & concatenated in one single file,
    but not minified, handy for debugging.
    3. JS files are left "as is", handy for debugging.
    4. browserSync launches the browser automatically
    5. A gulp task watch all project's file. If you change & save a file, it relaunches all previous steps above automatically, no need to refresh the browser !

Production mode works with Github gh-pages

    1. A normal jekyll build occurs
    2. CSS are concatenated, minified, unused CSS are removed, remaining CSS are inlined inside HTML, in the head part.
    3. JS files are concatenated, minified, and inlined inside HTML, just before the body closing tag.
    4. HTML is compressed.
    5. The whole _site directory is pushed to the github repository, on branch gh-pages

How to customize it ?

There are very few changes compared to a plain old jekyll v3 project

Jekyll configuration

In addition to the regular _config.yml, is added for production-only variables.

Task automation

gulpfile.js is where automation happens,
package.json and node_modules/ folder
are only here for the gulpfile to work properly
Feel free to modify the gulpfile as you wish.

Add a CSS file

In dev mode there are no difference with Jekyll.
Just as a reminder : css/main.scss is the main entry point.
In this file you can inject user-defined properties - a property in _config.yml can be avaible in this file by injecting a template like this : {{site.main_color}}

Add a JavaScript file

To add a JavaScript file to your project, add an HTML file into the _includes/ folder, and write JS inside a script tag, like this :
<script type="text/javascript">
  // any JS here...
Doing so will allow you to inject user-defined properties, the same way as CSS above.
Then, add the file to _layout/default like this
{% include my-js-file.html %}
Note the startjs and endjs comments : any JS between these will be optimized in production

Add any assets, other than CSS & JS

What if you want more than CSS & JS ? Maybe fonts or image ?
Let's see an example with font Montserrat.
Simply insert fonts/Montserrat.oft at the root.
And the following code inside css/main.scss
@font-face {
  font-family: 'Montserrat-Light';
  src: url('{{site.baseurl}}/fonts/Montserrat-Light.otf');
Note the use of site.baseurl to retrieve the font

The story behind Impatient-Jekyll

I already knew and used Jekyll in the past (mostly v2).

Then I worked for front-end projects with all modern tooling like webpack, browsersync, etc.

Back to Jekyll (v3), I couldn't believe that the default build command still be so painful to the developer, and that the final build had such a very low score at Google Page Speed Insight.

I started to google around, and found very clever approaches here and there, but none of them combined the full workflow I needed

  • Respect the default Jekyll build, it allows to inject any user-defined vars into SCSS and template.
  • Have all the JS and CSS livereloaded, and allow to easily add any other assets
  • Have a skyrocketing score at Google Page Speed Insight. Without a healthy build when starting your project, you end up with a performance optimization nightmare.


David Boureau (@bdavidxyz), Web Dev based in Paris, FR

Learn more about my work →