generator-jekyll-helix

NOTE: Currently using gulp 4.0 which is in beta!

Introduction

generator-jekyll-helix is a very opinionated Yeoman generator built with Jekyll and gulp. You will be able to quickly scaffold your site and start developing. As you are working on your site your assets will automatically be updated and injected into your browser as well as your posts. When you are done developing and want to publish it you are two commands away from having everything optimized and published.

Features

Yeoman

Ditch your startket stored in hithub and repedative setup tasks you do at the start of each project. Yeoman asks you a few simple questions and scaffolds out a project ready to go, with just what you need.

Jekyll

Built on top of Jekyll 3, you get a mature and stable base with the full power that Jekyll brings you. You should be using a static site generator or templating system if you're making more then a single page. Its 2016, get with it.

Browser Sync

While developing locally everything you change will automatically be updated and injected into your browser. Changing your SCSS or JavaScript files will automatically updated them, create sourcemaps and inject them. Writing or editing posts and pages for your website will do the same.

Gulp Asset Pipeline

This is a big improvement over teh standard Jekyll pipeline. When you are done developing you can have your assets optimized and injected correctly into your HTML. Your assets will be minified, compressed with gzip, and cached. Your images will be run through compressors to save space and even your HTML will be minified.

Bower

Bourbon + Neat

Deploying

Finally, once everything is done and you are ready to publish your site, you can do it via either Amazon S3, Github Pages or Rsync. With a single command your new/updated site is uploaded to your platform of choice.

Getting started

Installation

Dependencies

• Ruby: >2.0 with Bundler >1.10
• Node: >4.2 and Yo >1.7.0
• Gulp: Since the release candidate is running Gulp 4.0 you need to install gulp-cli: npm install gulp-cli -g
• Jekyll-Helix : Then install Jekyll-Helix: npm install generator-jekyll-helix -g

Install

• Scaffold: Run yo jekyll-helix in the directory you want scaffold your site in
• Start: Run gulp and watch the magic unfold

Usage

gulp

This is the default command, and probably the one you'll use the most. This command will build your assets and site with development settings. You'll get sourcemaps, your drafts will be generated and you'll only generate the last 10 posts (for speed). As you are changing your posts, pages and assets they will automatically update and inject into your browser via BrowserSync.

--prod

Once you are done and want to verify that everything works with production settings you add the flag --prod and your assets will be optimized. Your CSS, JS and HTML will be minified and gzipped, plus the CSS and JS will be cache busted. The images will be compressed and Jekyll will generate a site with all your posts and no drafts.

gulp build [--prod]

This command is identical to the normal gulp [--prod] however it will not create a BrowserSync session in your browser.

gulp deploy

When you're done developing and have built your site with either gulp --prod or gulp build --prod you can deploy your site to either Amazon S3, Github Pages or with Rsync.

Subtasks

All of the subtasks lives in their own files in the gulp directory and are named after what they do. You can edit or look at any of them to see how they actually work. They're all commented.

Some sub tasks are:

gulp check

Lints your JavaScript files using ESLint with XO Space settings and run jekyll doctor to look for potential errors.

gulp clean

Deletes your assets from their .tmp directory as well as in dist and deletes any gzipped files. NOTE: Does not delete your images from .tmp to reduce the time to build your site due to image optimizations.

gulp rebuild

Only use this if you want to regenerate everything, this will delete everything generated. Images, assets, your Jekyll site. You really shouldn't need to do this.

check the project gulp file for a details on all availible subtasks

Frequently Asked Questions