Impatient Jekyll
Professional & easy to use Jekyll v3 starter kit.
Fast local workflow, fast website in production.
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 webpagetest.org
How to use it ?
Work & iterate fast locally
$ git clone https://github.com/bdavidxyz/impatient-jekyll/
$ 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 git@github.com:[githubID]/[repoID].git
# In config.prod.yml, set baseurl to [repoID]
$ gulp deploy
# Your website is available at
# https://[githubID].github.io/[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,_config.prod.yml is added for production-only variables.Task automation
gulpfile.js is where automation happens,package.json and node_modules/ folderare 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...
<script/>
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<!--startjs-->
{% include my-js-file.html %}
<!--endjs-->
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 fontThe 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.