All Projects → sandoche → Jekyll Webpack Boilerplate

sandoche / Jekyll Webpack Boilerplate

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

Projects that are alternatives of or similar to Jekyll Webpack Boilerplate

Webxr Webpack Boilerplate
Starter Kit for building rich, immersive WebXR projects (featuring A-Frame) PWA with Webpack and SASS
Stars: ✭ 48 (-73.63%)
Mutual labels:  webpack, boilerplate, pwa
Preact Starter
Webpack3 boilerplate for building SPA / PWA / offline front-end apps with Preact
Stars: ✭ 384 (+110.99%)
Mutual labels:  webpack, boilerplate, pwa
Pwa
An opinionated progressive web app boilerplate
Stars: ✭ 353 (+93.96%)
Mutual labels:  webpack, boilerplate, pwa
Jekyll Boilerplate
Helpful files to get started working on a new Jekyll website
Stars: ✭ 30 (-83.52%)
Mutual labels:  webpack, jekyll, boilerplate
Preact Boilerplate
🎸 Ready-to-rock Preact starter project, powered by Webpack.
Stars: ✭ 959 (+426.92%)
Mutual labels:  webpack, boilerplate, pwa
Suicrux
🚀 Ultimate universal starter with lazy-loading, SSR and i18n. [not maintained]
Stars: ✭ 958 (+426.37%)
Mutual labels:  webpack, boilerplate, pwa
Thinkful Workshop React Redux Node Mongodb Webpack2
Stars: ✭ 12 (-93.41%)
Mutual labels:  webpack, boilerplate, pwa
Tris Webpack Boilerplate
A Webpack boilerplate for static websites that has all the necessary modern tools and optimizations built-in. Score a perfect 10/10 on performance.
Stars: ✭ 1,016 (+458.24%)
Mutual labels:  webpack, boilerplate, pwa
Universal Native Boilerplate
Build apps for every native platform with React and React Native
Stars: ✭ 131 (-28.02%)
Mutual labels:  webpack, boilerplate, pwa
Kirby Webpack
💪 A Kirby CMS starter-kit with modern frontend tools
Stars: ✭ 150 (-17.58%)
Mutual labels:  webpack, boilerplate
Workflow Reactjs
My workflow with ReactJS + Webpack 3+
Stars: ✭ 150 (-17.58%)
Mutual labels:  webpack, boilerplate
Spring React Boilerplate
An example of an isomorphic application using Java + Spring with React, React Router and Redux
Stars: ✭ 156 (-14.29%)
Mutual labels:  webpack, boilerplate
React Redux Styled Hot Universal
react boilerplate used best practices and focus on performance
Stars: ✭ 147 (-19.23%)
Mutual labels:  webpack, boilerplate
Awesome Chrome Extension Boilerplate
Use react + typescript + webpack to enhance your chrome extension development experience
Stars: ✭ 146 (-19.78%)
Mutual labels:  webpack, boilerplate
React Webpack 5 Tailwind 2
React 17 Boilerplate with Webpack 5, Tailwind 2, using babel, SASS/PostCSS, HMR, dotenv and an optimized production build
Stars: ✭ 155 (-14.84%)
Mutual labels:  webpack, boilerplate
Js Stack Boilerplate
Final boilerplate code of the JavaScript Stack from Scratch tutorial –
Stars: ✭ 145 (-20.33%)
Mutual labels:  webpack, boilerplate
Awesome Vue Cli3 Example
🦅 Awesome example for rapid Vue.js development using vue-cli3 .
Stars: ✭ 160 (-12.09%)
Mutual labels:  webpack, pwa
Javascriptstuff Db
Lists of JavaScript resources: tools, tutorials, starter projects, example code, etc.
Stars: ✭ 163 (-10.44%)
Mutual labels:  webpack, boilerplate
Iceberg
Front-End Boilerplate built with React + Babel + Webpack + SASS
Stars: ✭ 144 (-20.88%)
Mutual labels:  webpack, boilerplate
React Boilerplate
A slightly opinionated yet dead simple boilerplate for React 17.x, Webpack 5 and React Router v5
Stars: ✭ 158 (-13.19%)
Mutual labels:  webpack, boilerplate

Jekyll-webpack-boilerplate

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

  • Webpack working along with Jekyll
  • BrowserSync live reload

Optimized Style and SASS

  • SASS Style
  • PostCSS Auto Preffixer
  • CSS minified
  • Critical CSS Path added to the main template (using the command with optim)

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

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
│   ├── optimization-fix <--- A fix for optimization, do not delete this folder
│   ├── 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.optim.js <--- This is used to add the css critical path in the default template
│   ├── webpack.prod.js <--- Prod Webpack environment config file
│   └── webpack.pwa.js <--- Please edit this file if you want a PWA
├── _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/webpack.pwa.js
  • 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 of the plugin Jekyll multiple language plugin

Build

Optimized website

To build the website run the following line

npm run build

# or if you want the critical css
npm run build:optim

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/webpack.pwa.js The built website will be in _site folder.

npm run build:pwa

# or if you want the critical css
npm run build:pwa:optim

Clean assets & _site folders

This will remove the generated folders

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
  • The critical CSS Path may show some weird behavior when the page is loading that is why there are separated npm scripts

Websites using Jekyll Webpack Boilerplate

Other documentations

⭐️ Show your support

Please ⭐️ this repository if this project helped you!

patreon.png

🍺 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)
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].