Instructions for windows setup
- http://installfest.railsbridge.org/installfest/ this step is for ruby to install jekyll and node.js for npm commands
- https://github.com/shakyShane/jekyll-gulp-sass-browser-sync
- npm install -g gulp
- gem install jekyll
- gem install redcarpet
- gem install pygment.rb
- npm install in folder
- Add C:\Python27 to System Variables search “System Variables” in start menu and look for “Environment Variables” window
- button
- Allow using .jade files instead of .html files,
- npm install gulp-jade --save-dev save-dev used to keep the same version consistent
- make _jadefiles folder in project
- make _includes folder in project
- Put this line of code into gulpfile.js:
- Then input this line of code into the ‘watch’ task
- this is used to watch for any change in in a .jade file within _jadefiles
var gulp = require('gulp-jade');
// Inputting Jade into the environment gulp.task('jade', function(){ return gulp.src('_jadefiles/*.jade') .pipe(jade()) .pipe(gulp.dest('_includes')); });
gulp.watch('_jadefiles/*.jade', ['jade']);
Below this are instructions for the starter-kit I used
jekyll-gulp-sass-browser-sync
A starter project including full setup for Jekyll, GulpJS, SASS, AutoPrefixer & BrowserSync
Here's a 1.5min screencast showing what you get.
And here's a GIF showing the CSS injecting.
System Preparation
To use this starter project, you'll need the following things installed on your machine.
- Jekyll -
$ gem install jekyll
- NodeJS - use the installer.
- GulpJS -
$ npm install -g gulp
(mac users may need sudo)
Local Installation
- Clone this repo, or download it into a directory of your choice.
- Inside the directory, run
npm install
.
Usage
development mode
This will give you file watching, browser synchronisation, auto-rebuild, CSS injecting etc etc.
$ gulp
jekyll
As this is just a Jekyll project, you can use any of the commands listed in their docs
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());
});