This project allows the user to build a Jekyll site with NPM packages using Gulp. This package comes includes Autoprefixer, Bootstrap, Browser-Sync, Jekyll & SASS.

Get Jekyll-Gulpified on GitHub

I decided to remake this portfolio site using Jekyll for a few reasons:

  1. Adding portfolio items would require less time thanks to the liquid templating system
  2. I could add a blog to my website
  3. I wanted to learn how to use a static site generator

When researching Jekyll however, I realised that it was missing a few things, such as auto-refreshing the browser when I save a file and concatenating my JS files. This seemed like the perfect time to learn how to properly use Gulp.js.

I stumbled upon jekyll-gulp-sass-browser-sync by shakyShane quickly enough, but needed to customise it to be able to automate my own workflow. For starters, I wanted to use Bootstrap and jQuery, which Jekyll-gulp-sass-browser-sync didn’t include. I used shakyShane’s project as a baseline for creating my own workflow automation. After making slight tweaks to his gulpfile I added a ‘scripts’ task, which takes scripts for jQuery, Popper.js & Bootstrap and concatenates them with my own script files. I also added simpler tasks to pipe other assets such as downloads and images into the _site directory. The original project also needed some slight modifications such as watching for updates to .md files.

After creating all of this I released it to the public to allow anybody creating a Jekyll site to use the same automated workflow that I am.