|
1 | | -<a href="http://dylanhuang.com"> Visit it live! </a> |
| 1 | +Instructions for windows setup |
| 2 | +================================== |
| 3 | +<ol> |
| 4 | + <li>http://installfest.railsbridge.org/installfest/</li> |
| 5 | + this step is for ruby to install jekyll and node.js for npm commands</li> |
| 6 | + <li>https://github.com/shakyShane/jekyll-gulp-sass-browser-sync</li> |
| 7 | + <li>npm install -g gulp</li> |
| 8 | + <li>gem install jekyll</li> |
| 9 | + <li>gem install redcarpet</li> |
| 10 | + <li>gem install pygment.rb</li> |
| 11 | + <li>npm install in folder</li> |
| 12 | + <li>Add C:\Python27 to System Variables</li> |
| 13 | + search “System Variables” in start menu and look for “Environment Variables” window</li> <li>button</li> |
| 14 | + <li>Allow using .jade files instead of .html files,</li> |
| 15 | +<ul> |
| 16 | + <li>npm install gulp-jade --save-dev</li> |
| 17 | + --save-dev: Package will appear in your devDependencies. |
| 18 | + <li> make _jadefiles folder in project </li> |
| 19 | + <li> make _includes folder in project </li> |
| 20 | + <li>Put this line of code into gulpfile.js:</li> |
| 21 | +</ul> |
| 22 | + |
| 23 | +var gulp = require('gulp-jade'); |
| 24 | + |
| 25 | +// Inputting Jade into the environment |
| 26 | +gulp.task('jade', function(){ |
| 27 | + return gulp.src('_jadefiles/*.jade') |
| 28 | + .pipe(jade()) |
| 29 | + .pipe(gulp.dest('_includes')); |
| 30 | +}); |
| 31 | + |
| 32 | +<ul> |
| 33 | + <li>Then input this line of code into the ‘watch’ task</li> |
| 34 | +</ul> |
| 35 | + |
| 36 | +gulp.watch('_jadefiles/*.jade', ['jade']); |
| 37 | + |
| 38 | +<ul> |
| 39 | +<li>this is used to watch for any change in in a .jade file within _jadefiles</li> |
| 40 | +</ul> |
| 41 | +</ol> |
| 42 | + |
| 43 | + |
| 44 | +Below this are instructions for the starter-kit I used |
| 45 | + |
| 46 | +jekyll-gulp-sass-browser-sync |
| 47 | +============================= |
| 48 | + |
| 49 | +A starter project including full setup for Jekyll, GulpJS, SASS, AutoPrefixer & BrowserSync |
| 50 | + |
| 51 | +Here's a 1.5min [screencast](http://quick.as/pvrslgx) showing what you get. |
| 52 | + |
| 53 | +And here's a GIF showing the CSS injecting. |
| 54 | + |
| 55 | + |
| 56 | + |
| 57 | +## System Preparation |
| 58 | + |
| 59 | +To use this starter project, you'll need the following things installed on your machine. |
| 60 | + |
| 61 | +1. [Jekyll](http://jekyllrb.com/) - `$ gem install jekyll` |
| 62 | +2. [NodeJS](http://nodejs.org) - use the installer. |
| 63 | +3. [GulpJS](https://github.com/gulpjs/gulp) - `$ npm install -g gulp` (mac users may need sudo) |
| 64 | + |
| 65 | +## Local Installation |
| 66 | + |
| 67 | +1. Clone this repo, or download it into a directory of your choice. |
| 68 | +2. Inside the directory, run `npm install`. |
| 69 | + |
| 70 | +## Usage |
| 71 | + |
| 72 | +**development mode** |
| 73 | + |
| 74 | +This will give you file watching, browser synchronisation, auto-rebuild, CSS injecting etc etc. |
| 75 | + |
| 76 | +```shell |
| 77 | +$ gulp |
| 78 | +``` |
| 79 | + |
| 80 | +**jekyll** |
| 81 | + |
| 82 | +As this is just a Jekyll project, you can use any of the commands listed in their [docs](http://jekyllrb.com/docs/usage/) |
| 83 | + |
| 84 | +## Deploy with Gulp |
| 85 | + |
| 86 | +You can easily deploy your site build to a gh-pages branch. First, follow the instructions at [gulp-gh-pages](https://github.com/rowoot/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. |
| 87 | + |
| 88 | + |
| 89 | + |
| 90 | +```javascript |
| 91 | +var deploy = require("gulp-gh-pages"); |
| 92 | + |
| 93 | +gulp.task("deploy", ["jekyll-build"], function () { |
| 94 | + return gulp.src("./_site/**/*") |
| 95 | + .pipe(deploy()); |
| 96 | +}); |
| 97 | +``` |
0 commit comments