A boilerplate project including full setup for Jekyll, GulpJS, SASS, PostCSS, BrowserSync, Autoprefixer and deploy to GitHub Pages using Gulp.
The boilerplate is loaded with Bootstrap and jQuery (via CDN) to get you started with your projects. I have also included some SEO optimizations and Open Graph tags / Twitter Cards tags to tell Facebook and Twitter how shares to your site should display (Note: Look at
_includes/metas.html and change accordingly).
To use this starter boilerplate 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)
- jekyll-minifier -
$ gem install jekyll-minifier
- Clone this repo, or download it into a directory of your choice.
- Inside the directory, run
I have two Yaml configuration files:
_config.dev.yml that when running in development mode the dev configuration file overrides
jekyll-minifier default values.
Also if you are deploying to GitHub Pages - Project Pages, overriding the
baseurl to empty ("") is essential to display the website correctly in localhost.
$ NODE_ENV=dev gulp
As this is just a Jekyll project, you can use any of the commands listed in their docs
Deploy with Gulp to GitHub Pages (Production Mode)
In a nutshell, you need to have your project in GitHub and deploy to to a gh-pages branch. Then to deploy just run
$ NODE_ENV=prod gulp deploy
$ gulp deploy
Something to note is that in the gulp deploy task
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.
Getting Your Branch Prepared
$ git init $ git add . $ git commit -m 'First Commit' $ git remote add origin email@example.com:username/repository-name.git $ git push -u origin master $ git checkout --orphan gh-pages $ git rm -rf . $ touch README.md $ git add README.md $ git commit -m "Init gh-pages" $ git push --set-upstream origin gh-pages $ git checkout master
And finally you can deploy to GitHub Pages
$ gulp deploy
After deploying run the Gulp
clean task since while deploying
gulp-gh-pages creates a .publish directory with your entire site, and in my opinion it just a waste of hard disk space to leave it alone.
$ gulp clean
or simply Right Click -> Delete that direcotry to delete it.
This is how the boilerplate template looks like.
And here's a GIF showing the CSS injecting.
This boilerplate was built upon shakyShane starter project.
More information on Twitter Cards.
Twitter Cards validator tool lets you preview your card.
Facebook Sharing Debugger lets you preview your Open Graph tags.