Jekyll Gulp Sass Foundation
A starting point for a Jekyll site that uses the Foundation Sass framework and includes modern front-end tools like gulp.js and BrowserSync that streamline your work flow
Thanks to @shakyShane for the amazing BrowserSync package and the Jekyll example he provided here
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)
- Bundler -
gem install bundler
(mac users may need sudo)
Local Installation
- Clone this repository, or download it into a directory of your choice.
- Inside the directory, run
npm install
.
- Inside the directory, run
bundle install
.
Usage
- Start Gulp –
gulp
This will build your Jekyll site, give you file watching, browser synchronization, auto-rebuild, CSS injecting etc.
- Generate icon font –
gulp iconfont
This will look for SVG files in the assets/icons directory and generate them into an icon font into the assets/fonts directory. The SCSS needed to use the icon font will automatically be updated in scss/base/_icons.scss.
- Prettify HTML –
gulp prettify-html
This will take Jekyll's compiled HTML and prettify it up!
- Push to S3 Bucket –
gulp push-to-s3
First, you'll need to copy .s3config.example to .s3config and add your AWS S3 credentials. Now you can run gulp push-to-s3
and your site will be pushed to your S3 bucket and set to be publicly accessible.
- Deploy –
gulp deploy
This will conveniently run both gulp-prettify
and gulp push-to-s3
sequentially.