generator-jekyll-cssnext

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.

Features

Tools

• CSS using cssnext
• Upload your site to either Amazon S3 or to your server with Rsync
• Jekyll with sane configurations and lots of extras

Developing

• 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

Getting started

Installation

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.

Usage

gulp

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.

gulp check

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

gulp build

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.

gulp publish

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.

gulp deploy

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

Individual tasks

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.

Deploying

Amazon AWS

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.

Rsync

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.

GitHub Pages

If you are using GitHub Pages note that currently only personal repositories are supported (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 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

Bower

Currently not implemented

Roadmap

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

Changelog