Jekyll workflow with Gulp, SASS, AutoPrefixer, asset optimization and cache busting and much more. Can you really want more?
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 doctorand 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 (
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.
for what it looks for in
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
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
clean:prod and then runs the
copy commands (
html to optimize your site and
copy to copy over some
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
gulp html and it won't run any of the tasks used with
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
username.github.io), however if you want to use it for project
repositories there are some things you need to do:
- Change the branch that the
gulp deploypushes to
- Change the URL settings for Jekyll. Note that the fourth step
isn't required as Jekyllized will automatically serve your local site on
Currently not implemented
- Write more documentation
- Implement Bower functionality
- And more things