jekyll-gulp-boilerplate

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).

System Preparation

To use this starter boilerplate project, you'll need the following things installed on your machine.

1. Jekyll - $ gem install jekyll
2. NodeJS - use the installer.
3. jekyll-minifier - $ gem install jekyll-minifier

Local Installation

1. Clone this repo, or download it into a directory of your choice.
2. From the root of the project

$ npm install

Note: This project is using gulp-sass and the latest version is not compatible with Node 10.x because it depends on an older version of node-sass. If you have Node 10.x installed, you will have to update node-sass dependency in gulp-sass directory.

1. In your terminal (from the root of the project)

$ cd node_modules/gulp-sass
$ npm install node-sass@latest

Usage

I have two Yaml configuration files: _config.yml and _config.dev.yml that when running in development mode the dev configuration file overrides baseurl and jekyll-minifier default values.

Development Mode

Running development mode will not minify your HTML or Javascript.

Also if you are deploying to GitHub Pages - Project Pages, overriding the baseurl to empty ("") is essential to display the website correctly in localhost.

$ npm run dev

Jekyll

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)

To accomplish this I am using gulp-gh-pages and the final site will have HTML, CSS and Javascript minified.

In a nutshell, you need to have your project in GitHub and deploy to to a gh-pages branch. Then to deploy just run

$ npm run 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.

Important: Change baseurl and url in _config.yml to reflect your repo URL.

Getting Your Branch Prepared

$ git init
$ git add .
$ git commit -m 'First Commit'
$ git remote add origin [email protected]: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

$ npm run 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.

$ npm run clean

or simply Right Click -> Delete that directory to delete it.

Screenshots

This is how the boilerplate template looks like.

Link to deployed template: https://esausilva.github.io/jekyll-gulp-boilerplate/

Credits

This boilerplate was built upon shakyShane starter project.

Miscellaneous

More information on Twitter Cards.

Twitter Cards validator tool lets you preview your card.

Facebook Sharing Debugger lets you preview your Open Graph tags.

Giving Back

If you would like to support my work and the time I put in making tutorials, you can click the image below to get me a coffee. I would really appreciate it (but is not required).

-Esau Silva