This is the boilerplate that Major League Hacking (MLH) uses in the development of static websites. It combines Jekyll with Gulp to speed up common development tasks.
Before you start, make sure you have npm installed and the relevant version of Ruby (probably using rvm).
You will also need gulp and bundler eventually, so lets get those now too.
$ npm install -g gulp
$ gem install bundlerNow let's install the development dependencies by running the NPM installer and bundler:
$ npm install
$ bundle installNote: These steps may require the use of sudo depending on your
environment.
To launch the development server, just run gulp:
$ gulpAn overview of the Gulp commands available:
Builds the site into the _site directory.
- Cleans any precompiled assets in
_site - Lints and compiles SASS
- Lints and compiles Javascript
- Optimizes images
- Compiles the Jekyll site
Spins up the Jekyll server for local development
- Watch the
js/,_sass/, andimg/directories for changes and run related tasks - Spin up the Jeykll server with
--watchand--incrementalenabled - Watch the
_site/directory for changes and sync to browser
├── .gitignore # Defines which files Git should diregard
├── .ruby-version # Defines the required version of Ruby
├── .scss-lint.yml # Rules for linting SASS files
├── Gemfile # Ruby Dependencies
├── Gemfile.lock # Ruby Dependencies with explicit versions
├── README.md # How to use this project
├── _config.yml # Jekyll configuration
├── _includes/ # Jekyll HTML partials
└── head.html # HTML for the <head> tag
├── _layouts/ # Jekyll HTML layouts
└── default.html # The default template for HTML pages
├── _sass/ # Stylesheets directory
├── _base.scss # Base styles
├── _layout.scss # Grid system
├── _typography.scss # Typography tyles
├── _util.scss # SASS helper functions
├── lib/ # External CSS libraries
├── animate.mn.scss # CSS animations
└── reset.min.scss # CSS reset
└── main.scss # Variable definitions and list of SASS partials to compile
├── gulpfile.js # Defines gulp tasks for development
├── img/ # Images and SVGs
├── index.html # The default HTML page
├── js/ # Javascript libraries and scripts
├── app.js # The default Javascript file
├── app.min.js # The minified default Javascript file
└── lib/ # External JS libraries
└── jquery-2.2.2.min.js # jQuery
└── package.json # Javascript DependenciesBig shout out to the Minimill Project Template for inspiring this project.