jekyll-boilerplate

A modern and customizable asset pipeline for Jekyll projects. Processes your SASS/SCSS, JavaScript, images and makes your development workflow a lot easier.

Experiencing any issues or do you have ideas what could be added / improved? Report an issue.

Table of contents

• Introduction
• Features
• Installation
• Usage
  • File structure
  • CSS
  • JavaScript
  • Images
  • Jekyll
• Used libraries
• License

Introduction

Ever developed a website using Jekyll or any other static site generator and struggled because...

• ...you wanted to write the latest JavaScript using all these cool new features, but had problems configuring Babel or concatenating the files?
• ...you had a few unoptimized images which slowed down your site loading, so you had to compress them manually?
• ...you had to prefix your CSS to make it work in older browsers?
• ...you where just too lazy to properly configure your assets and ended up serving them as is?

This boilerplate project might be something for you then. Without any configuration, you can start building your Jekyll website and let it handle your JavaScript, CSS and images. Thanks to Gulp and a simple config file, setting up the development process is pretty much a piece of cake.

Features

• Compiles SASS / SCSS into regular CSS.
• Minifies CSS and JS for a faster page loading.
• Removes unused CSS.
• Prefixes new CSS for older browsers (based on your preference).
• Generates sourcemaps for JavaScript and CSS.
• Compiles EcmaScript 6/7/8 and upwards into EcmaScript 5 using Babel.
• Concats different JS files into one (NOT JS modues).
• Optimizes images for a faster page loading.
• Converts images into WEBP.
• Handles the Jekyll build and serve commands.
• Let's you choose the output file names and paths.
• Sets a basic folder structure for Jekyll to get you started.

Installation

Download this repository as a ZIP using your browser.

Usage

File structure

• config.js - The global configuration file. In here you specify whether and how you want to compile your assets and in which directories they belong.
• gulpfile.js - This pipeline is using Gulp. In this file all of the Gulp tasks are specified.
• package.json & package-lock.json - Dependencies for the build scripts.
• assets/ - In here you'll find the raw and unprocessed JavaScript, SASS and images. You'll be coding in here.
• .babelrc - Specifies the Babel environment.
• _config.yml - The default Jekyll configuration
• Gemfile & Gemfile.lock - Version and dependency management for Jekyll

CSS

// config.js
// ---------------------------------
// CSS configuration

var  css  = {
  input: {
    path: 'assets/scss',
    filename: 'styles.scss'
  },
  output: {
    path: 'css',
    filename: 'styles.min.css'
  },
  options: {
    compressed: true,
    prefixed: true,
    purge: true,
    sourcemap: true,
    browserSupport: ['last 2 versions']
  }
};

JavaScript

// config.js
// ---------------------------------
// JavaScript configuration

var  js  = {
  input: {
    path: 'assets/js',
    filename: 'app.js'
  },
  output: {
    path: 'js',
    filename: 'app.min.js'
  },
  options: {
    minify: true,
    concat: false,
    babel: true,
    sourcemap: true,
  }
};

Images

// config.js
// ---------------------------------
// Image configuration

var  images  = {
  input: {
    path: 'assets/images',
    filename: '**/*.{png,gif,jpg,jpeg}'
  },
  output: {
    path: 'images'
  },
  options: {
    compress: true,
    webp: true,
    imagemin: {
      progressive: true,
      optimizationLevel: 5,
      svgoPlugins: [{ 'removeViewBox': true }]
    }
  }
};

Jekyll

// config.js
// ---------------------------------
// Jekyll configuration

var  jekyll  = {
  deployDir: '_site',
  port: 4000
};

Used libraries

• gulp
• gulp-sass
• gulp-purgecss
• gulp-autoprefixer
• gulp-sourcemaps
• gulp-rename
• gulp-if
• gulp-babel
• gulp-concat
• gulp-uglify-es
• gulp-webp
• gulp-imagemin
• del

License

MIT © Andreas Remdt