Jekyll & Gulp + Pug Template

A starter project including full setup for Jekyll, Gulp, Pug, SASS, Autoprefixer & BrowserSync

Creating Content

Place working SASS, Images and JS files into _assets directory. Once site is built the files will be compiled and compressed to assets and _site/assets folders.

Using Pug

Create .pug files in _pugfiles directory and will be converted to html format in the _includes directory.

System Preparation

To use this starter project, you'll need the following things installed on your machine.

1. Jekyll - $ gem install jekyll
2. NodeJS - use the installer.
3. GulpJS - $ npm install -g gulp (mac users may need sudo)

Local Installation

1. Clone this repo, or download it into a directory of your choice.
2. Inside the directory, run npm install.

Usage

Development mode

This will give you file watching, browser synchronisation, auto-rebuild, CSS injecting etc etc.

$ gulp

Deploy with Gulp

You can easily deploy your site build to a gh-pages branch. First, follow the instructions at gulp-gh-pages to get your branch prepared for the deployment and to install the module. Then, in gulpfile.js you'll want to include something like the code below. gulp.src() needs to be the path to your final site folder, which by default will be _site. If you change the destination in your _config.yml file, be sure to reflect that in your gulpfile.

var deploy = require("gulp-gh-pages");

gulp.task("deploy", ["jekyll-build"], function () {
    return gulp.src("./_site/**/*")
        .pipe(deploy());
});