Home

Awesome

<p align="center"> <img src="https://github.com/sandoche/Jekyll-webpack-boilerplate/blob/master/icon.png?raw=true" width="200"/> </p> <h1 align="center"> Jekyll-webpack-boilerplate </h1>

GitHub Telegram Medium Badge Twitter: sandochee

A Jekyll boilerplate supercharged with Webpack to build modern performant websites (including Progressive Web Apps). Read more about how this boilerplate has been built: https://medium.com/learning-lab/5-how-i-learnt-webpack-3-and-created-a-jekyll-and-webpack-boilerplate-edd86645fd5e

Features

Improved workflow

Optimized Style and SASS

ES6 & Optimization

Images optimized

Write less code

SEO Ready

Write better code

Progressive Web Apps (optional)

CMS Admin panel

Easy to deploy

Prerequisites

The following tools should be installed before starting:

Quick start

  1. Make sure you have all the prerequisites above installed.
  2. Clone this repo using git clone https://github.com/sandoche/Jekyll-webpack-boilerplate.git
  3. Move to the appropriate directory: cd Jekyll-webpack-boilerplate.
  4. Run npm install and bundler install in order to install dependencies and clean the git repo.
  5. Run npm start to start the development server (or use npm start).

Quick deployment

Deploy to Netlify

Here is a demo of the Netlify build: https://dazzling-swartz-9738b5.netlify.com

Netlify CMS

It also works with Netlify CMS after enabling Identity service and Git Gateway: https://www.netlifycms.org/docs/add-to-your-site/#enable-identity-and-git-gateway

See admin/config.yml for more customization.

Development

To start the development server just run npm start

Folder structure

.
├── 404.html
├── about.md
├── blog.md
├── config <--- This folder contains the different Webpack config files
│   ├── manifest.json <--- Please edit this file if you want a PWA
│   ├── postcss.config.js <--- Post css config
│   ├── sw.config.js <--- The service worker config file
│   ├── webpack.common.js <--- The common Webpack config file for all the environment
│   ├── webpack.dev.js <--- Dev Webpack environment config file
│   ├── webpack.prod.js <--- Prod Webpack environment config file
│   └── webpack.pwa.js
├── _config.yml <--- The Jekyll config file that you need to set up
├── Gemfile
├── Gemfile.lock
├── _i18n <--- Contains your posts and data in the language you need (check below how to remove it)
├── _images <--- Put all your images here, you will access them with this path /assets/images/
│   ├── icon.png <--- Replace this with your icon
│   └── large-icon.png <--- Replace this with your Facebook Open Graph picture
├── icon.png <--- Same with this one
├── _includes
├── index.md
├── _layouts
│   ├── amp.html <--- The layout for Accelerated mobile page
│   ├── blog.html
│   ├── home.html
│   ├── page.html
│   └── post.html
├── LICENSE
├── package.json <--- Update this file with your information especially the name which is used for the meta tags
├── README.md
├── _scss <--- Put your partials here
│   └── _default.scss
├── _src <--- This folder contains your JS and SASS entry points
│   ├── index.js
│   ├── index.scss
│   └── template
│       └── default.html <--- Here is the main default template, feel free to edit it but do not delete it
├── webpack.config.js
└── package-lock.json

You can see above the basic structure of the boilerplate and the main differences with the official Jekyll folder structure

Configurations

Assets

Internationalization

Build

Optimized website

To build the website run the following line

npm run build

The built website will be in _site folder.

You can also run a local server to test it with this command

npm run serve:dist

PWA

If you want to build a PWA (including the manifest.json and the service worker) run the following. Please ensure to have configured this file config/manifest.json The built website will be in _site folder.

npm run build:pwa

Clean assets & _site folders

This will remove the generated folders

npm run clean:project

Known issues

Websites using Jekyll Webpack Boilerplate

Other documentations

⭐️ Show your support

Please ⭐️ this repository if this project helped you!

<a href="https://www.patreon.com/sandoche">patreon.png</a>

🍺 Buy me a beer

If you like this project, feel free to donate: