Jekyll workflow with Gulp, SASS, AutoPrefixer, asset optimization and cache busting and much more. Can you really want more?


Development is happening on the beta branch!

Waiting for Jekyll 3.0 and Gulp 4.0 to land, take a look if you want to! It's also published on NPM under a 0.8-beta branch so you can start using it today, however be warned that Gulp 3.x and Gulp 4.0 does not play nice together right now!

Stylized and opinionated Jekyll development

Jekyllized is an opinionated Yeoman generator for building Jekyll based websites. Easy scaffolding via Yo to get started quickly, Bower for managing frontend packages and Gulp to automate and optimize developing your site.

Based on Jekyll, Jekyllized is ideal for building highly optimized static sites and prototyping sites. Quickly review changes with LiveReload, optimize your stylesheets and images automatically and detect errors and unused code in your project.

  • SASS using libsass
  • AutoPrefixer for automatic vendor prefixing
  • Upload your site to either Amazon S3 or to your server with Rsync
  • Lanyon theme based on Poole from mdo
  • Jekyll with sane configurations and lots of extras
  • Have your sites automatically refreshed across multiple devices with BrowserSync
  • Detect errors and potential issues with your code using jekyll doctor and JShint
  • Optimize your assets and site: your CSS and JS is automatically concatenated, both your CSS, JS and HTMl is minifiyed and all your text files are gzipped for optimal performance. Your images are run through imagemin to optimize them as well
  • Cachebusting for your assets

To install you need Node.js (>0.10.0) and Ruby (> 1.9) for Jekyll. Install Jekyllized via NPM: npm install -g generator-jekyllized and finally run yo jekyllized in the directory you want to install in.

The default task, this will automatically compile and open the site in your browser. A watch task runs in the background and detects when any files change, recompiles them if nessecary and updates your browser with BrowserSync.

Check the health of your JavaScript, CSS and Jekyll. You can change the settings for what it looks for in .jshintrc.

Almost the same as the default gulp task, but this won't start up a preview/LiveReload server and open the browser, it will only build your site.

This will first run gulp build to make sure the changes you've made to your site are included and then optimize all your assets (images, HTML, CSS, JS++). If you want to display your optimized site to make sure everything is working run gulp serve:prod to see the changes.

This will either upload your site to Amazon S3, Rsync your files to your server or push them to GitHub Pages.

A lot of the tasks are built up of smaller tasks that can be run individually. For example, the gulp publish task first runs gulp build (that also runs jekyll:prod, styles and images) and clean:prod and then runs the html and copy commands (html to optimize your site and copy to copy over some files that html misses). If you want to you can run any of these tasks without invoking their "parent" task. If you only wanted to optimize your assets and such, run gulp html and it won't run any of the tasks used with gulp publish.

For all the different tasks that can be run, see the gulpfile and look through the code. Everything is commented and you can edit, change or remove what you want/need.

If you are using Amazon S3 make sure you change the region you want to use in the aws-credentials.json and have created a bucket already. If you don't want to use Cloudfront you'll have to uncommend the last line in the gulp deploy task. For Rsync it should be automatic as long as your details are correct.

If you are using Rsync make sure the credentials are filled out in the rsync-credentials.json file, otherwise all you have to do is to run gulp deploy and your site will be synced to your server. NOTE: For the moment your site is not gzipped while uploading, this is going to be fixed in the future.

If you are using GitHub Pages note that currently only personal repositories are supported (, however if you want to use it for project repositories there are some things you need to do:

  • Change the branch that the gulp deploy pushes to
  • Change the URL settings for Jekyll. Note that the fourth step isn't required as Jekyllized will automatically serve your local site on localhost:4000

Currently not implemented

  • Write more documentation
  • Implement Bower functionality
  • And more things