Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sandoche/Jekyll-webpack-boilerplate

⚡️ A boilerplate with Jekyll and Webpack to make the most performant static websites
https://github.com/sandoche/Jekyll-webpack-boilerplate

boilerplate jekyll jekyll-webpack-boilerplate pwa webpack

Last synced: about 1 month ago
JSON representation

⚡️ A boilerplate with Jekyll and Webpack to make the most performant static websites

Host: GitHub
URL: https://github.com/sandoche/Jekyll-webpack-boilerplate
Owner: sandoche
License: mit
Created: 2017-07-25T12:01:04.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2023-04-18T19:09:58.000Z (over 1 year ago)
Last Synced: 2024-07-27T18:52:15.123Z (about 1 month ago)
Topics: boilerplate, jekyll, jekyll-webpack-boilerplate, pwa, webpack
Language: HTML
Homepage:
Size: 1.18 MB
Stars: 188
Watchers: 9
Forks: 57
Open Issues: 12
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

Jekyll-webpack-boilerplate

![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)
[![Telegram](https://img.shields.io/badge/chat-Telegram-blue.svg)](https://t.me/JekyllWebpack)
[![Medium Badge](https://badgen.net/badge/icon/medium?icon=medium&label)](https://medium.com/@sandoche)
[![Twitter: sandochee](https://img.shields.io/twitter/follow/sandochee.svg?style=social)](https://twitter.com/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**
* Webpack working along with Jekyll
* BrowserSync live reload

**Optimized Style and SASS**
* SASS Style
* PostCSS Auto Preffixer
* CSS minified

**ES6 & Optimization**
* ES6 Babel
* JS minified and uglified
* ES Lint

**Images optimized**
* Imagemin, images optimizations

**Write less code**
* Theme color in config
* Favicon generated automatically
* Google Analytics setup in config file (optional)
* Doorbell setup in config file (optional)
* Cookie consent setup in config file (optional)

**SEO Ready**
* SEO Plugin Jekyll
* Sitemap generated
* Accelerated Mobile Pages enabled for Posts

**Write better code**
* Internationalization plugin

**Progressive Web Apps (optional)**
* Generation of the Manifest
* Generation of Service worker

**CMS Admin panel**
* Works with Netlify CMS

**Easy to deploy**
* Easy deployment with Netlify

## Prerequisites
The following tools should be installed before starting:
* NodeJS, npm
* Ruby, Gem, Bundler
* Jekyll
* Sass
* Distro package build-essential libpng-dev

## 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](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/sandoche/Jekyll-webpack-boilerplate)

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
* The required configurations are all in `_config.yml`
* Also edit `package.json` the name is used in the meta tags
* If you want a `manifest.json` file please edit `config/manifest.json`
* Replace the different icon by yours in `_images` and in the root folder

### Assets
* SCSS partials should be located in `_scss` for better reading
* Put all your images in `_images` the content of this folder will be moved to the `_site/assets/images` so you can access them with this path `/assets/images/**` in your templates, check the examples
* Put all your Javascript files inside `_src` and import them from `index.js` or you can also add them as a new entry point in your webpack configuration file

### Internationalization
* All the posts should be there in inside `_i18n` folder inside its language, check the boilerplate examples
* You can put your variables inside `_i18n/en.yml` (replace en with your language) and call them in your template with `{% t variable_name.sub_variable %}`
* You can remove the plugin by removing `gem 'jekyll-multiple-languages-plugin'` from `gemfile` and `jekyll-multiple-languages-plugin` from `plugins` in `_config.yml`
* We invite you to read the very good [official documentation](https://github.com/Anthony-Gaudino/jekyll-multiple-languages-plugin) of the plugin Jekyll multiple language plugin

## Build

### Optimized website
To build the website run the following line

```sh
npm run build
```
The built website will be in `_site` folder.

You can also run a local server to test it with this command
```sh
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.
```sh
npm run build:pwa
```

### Clean assets & \_site folders
This will remove the generated folders
```sh
npm run clean:project
```

## Known issues
* Jekyll watch doesn't reload / rebuild when a translation file is updated inside `_i18n` folder, I recommand to remove `jekyll-multiple-languages-plugin` if you don't want a multi language website and if you want to watch / rebuild faster. Otherwise close and start `npm run start` to rebuild and see your changes from `_i18n`
* Wsl2 requires to run `sudo apt install -y build-essential libpng-dev` in order to fix the `pngquant failed to build, make sure that libpng-dev is installed` issue

## Websites using Jekyll Webpack Boilerplate
* Learning Lab - https://learn.uno
* Invitecode.is - http://invitecode.is
* Typster - https://typster.xyz
* TEDxMarseille - https://tedxmarseille.com
* Motive network - https://motive.network
* CoinGenerator - https://coingenerator.sh

## Other documentations
* [Jekyll](https://jekyllrb.com/)
* [Webpack](https://webpack.js.org/)
* [Jekyll multiple languages plugin](https://github.com/Anthony-Gaudino/jekyll-multiple-languages-plugin)
* [Jekyll SEO tag](https://github.com/jekyll/jekyll-seo-tag)
* [BrowserSync Webpack plugin](https://www.npmjs.com/package/browser-sync-webpack-plugin)
* [PostCSS](http://postcss.org/)

## ⭐️ Show your support
Please ⭐️ this repository if this project helped you!

[![patreon.png](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/sandoche)

## 🍺 Buy me a beer
If you like this project, feel free to donate:
* PayPal: https://www.paypal.me/kanbanote
* Bitcoin: 19JiNZ1LkMaz57tewqJaTg2hQWH4RgW4Yp
* Ethereum: 0xded81fa4624e05339924355fe3504ba9587d5419
* Monero: 43jqzMquW2q989UKSrB2YbeffhmJhbYb2Yxu289bv7pLRh4xVgMKj5yTd52iL6x1dvCYs9ERg5biHYxMjGkpSTs6S2jMyJn
* Motive: MOTIV-25T5-SD65-V7LJ-BBWRD (Get Motive Now: https://motive.network)