{"id":13611552,"url":"https://github.com/sandoche/Jekyll-webpack-boilerplate","last_synced_at":"2025-04-13T04:34:56.015Z","repository":{"id":26934577,"uuid":"98301470","full_name":"sandoche/Jekyll-webpack-boilerplate","owner":"sandoche","description":"⚡️ A boilerplate with Jekyll and Webpack to make the most performant static websites","archived":false,"fork":false,"pushed_at":"2023-04-18T19:09:58.000Z","size":1242,"stargazers_count":190,"open_issues_count":12,"forks_count":57,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-10T01:14:09.559Z","etag":null,"topics":["boilerplate","jekyll","jekyll-webpack-boilerplate","pwa","webpack"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sandoche.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":null,"patreon":"sandoche","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":"https://www.paypal.me/kanbanote"}},"created_at":"2017-07-25T12:01:04.000Z","updated_at":"2025-02-02T03:24:04.000Z","dependencies_parsed_at":"2024-01-19T10:16:41.118Z","dependency_job_id":"168c1688-2d9f-4ba6-b0ad-dc993923f294","html_url":"https://github.com/sandoche/Jekyll-webpack-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandoche%2FJekyll-webpack-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandoche%2FJekyll-webpack-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandoche%2FJekyll-webpack-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandoche%2FJekyll-webpack-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sandoche","download_url":"https://codeload.github.com/sandoche/Jekyll-webpack-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248665157,"owners_count":21142118,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","jekyll","jekyll-webpack-boilerplate","pwa","webpack"],"created_at":"2024-08-01T19:01:57.531Z","updated_at":"2025-04-13T04:34:55.972Z","avatar_url":"https://github.com/sandoche.png","language":"HTML","funding_links":["https://patreon.com/sandoche","https://www.paypal.me/kanbanote","https://www.patreon.com/sandoche"],"categories":["HTML"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/sandoche/Jekyll-webpack-boilerplate/blob/master/icon.png?raw=true\" width=\"200\"/\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003e\n  Jekyll-webpack-boilerplate\n\u003c/h1\u003e\n\n\n![GitHub](https://img.shields.io/github/license/mashape/apistatus.svg)\n[![Telegram](https://img.shields.io/badge/chat-Telegram-blue.svg)](https://t.me/JekyllWebpack)\n[![Medium Badge](https://badgen.net/badge/icon/medium?icon=medium\u0026label)](https://medium.com/@sandoche)\n[![Twitter: sandochee](https://img.shields.io/twitter/follow/sandochee.svg?style=social)](https://twitter.com/sandochee)\n\nA Jekyll boilerplate supercharged with Webpack to build modern performant websites (including Progressive Web Apps).\nRead 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\n\n## Features\n\n**Improved workflow**\n* Webpack working along with Jekyll\n* BrowserSync live reload\n\n**Optimized Style and SASS**\n* SASS Style\n* PostCSS Auto Preffixer\n* CSS minified\n\n**ES6 \u0026 Optimization**\n* ES6 Babel\n* JS minified and uglified\n* ES Lint\n\n**Images optimized**\n* Imagemin, images optimizations\n\n**Write less code**\n* Theme color in config\n* Favicon generated automatically\n* Google Analytics setup in config file (optional)\n* Doorbell setup in config file (optional)\n* Cookie consent setup in config file (optional)\n\n**SEO Ready**\n* SEO Plugin Jekyll\n* Sitemap generated\n* Accelerated Mobile Pages enabled for Posts\n\n**Write better code**\n* Internationalization plugin\n\n**Progressive Web Apps (optional)**\n* Generation of the Manifest\n* Generation of Service worker\n\n**CMS Admin panel**\n* Works with Netlify CMS\n\n**Easy to deploy**\n* Easy deployment with Netlify\n\n## Prerequisites\nThe following tools should be installed before starting:\n* NodeJS, npm\n* Ruby, Gem, Bundler\n* Jekyll\n* Sass\n* Distro package build-essential libpng-dev\n\n## Quick start\n1. Make sure you have all the prerequisites above installed.\n2. Clone this repo using `git clone https://github.com/sandoche/Jekyll-webpack-boilerplate.git`\n3. Move to the appropriate directory: `cd Jekyll-webpack-boilerplate`.\n4. Run `npm install` and `bundler install` in order to install dependencies and clean the git repo.\n5. Run `npm start` to start the development server (or use `npm start`).\n\n## Quick deployment\n[![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)\n\nHere is a demo of the Netlify build: https://dazzling-swartz-9738b5.netlify.com\n\n### Netlify CMS\n\nIt 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\n\nSee `admin/config.yml` for more customization.\n\n## Development\nTo start the development server just run  `npm start`\n\n### Folder structure\n```\n.\n├── 404.html\n├── about.md\n├── blog.md\n├── config \u003c--- This folder contains the different Webpack config files\n│   ├── manifest.json \u003c--- Please edit this file if you want a PWA\n│   ├── postcss.config.js \u003c--- Post css config\n│   ├── sw.config.js \u003c--- The service worker config file\n│   ├── webpack.common.js \u003c--- The common Webpack config file for all the environment\n│   ├── webpack.dev.js \u003c--- Dev Webpack environment config file\n│   ├── webpack.prod.js \u003c--- Prod Webpack environment config file\n│   └── webpack.pwa.js\n├── _config.yml \u003c--- The Jekyll config file that you need to set up\n├── Gemfile\n├── Gemfile.lock\n├── _i18n \u003c--- Contains your posts and data in the language you need (check below how to remove it)\n├── _images \u003c--- Put all your images here, you will access them with this path /assets/images/\n│   ├── icon.png \u003c--- Replace this with your icon\n│   └── large-icon.png \u003c--- Replace this with your Facebook Open Graph picture\n├── icon.png \u003c--- Same with this one\n├── _includes\n├── index.md\n├── _layouts\n│   ├── amp.html \u003c--- The layout for Accelerated mobile page\n│   ├── blog.html\n│   ├── home.html\n│   ├── page.html\n│   └── post.html\n├── LICENSE\n├── package.json \u003c--- Update this file with your information especially the name which is used for the meta tags\n├── README.md\n├── _scss \u003c--- Put your partials here\n│   └── _default.scss\n├── _src \u003c--- This folder contains your JS and SASS entry points\n│   ├── index.js\n│   ├── index.scss\n│   └── template\n│       └── default.html \u003c--- Here is the main default template, feel free to edit it but do not delete it\n├── webpack.config.js\n└── package-lock.json\n```\nYou can see above the basic structure of the boilerplate and the main differences with the official Jekyll folder structure\n\n### Configurations\n* The required configurations are all in `_config.yml`\n* Also edit `package.json` the name is used in the meta tags\n* If you want a `manifest.json` file please edit `config/manifest.json`\n* Replace the different icon by yours in `_images` and in the root folder\n\n### Assets\n* SCSS partials should be located in `_scss` for better reading\n* 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\n* 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\n\n### Internationalization\n* All the posts should be there in inside `_i18n` folder inside its language, check the boilerplate examples\n* 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 %}`\n* You can remove the plugin by removing `gem 'jekyll-multiple-languages-plugin'` from `gemfile` and `jekyll-multiple-languages-plugin` from `plugins` in `_config.yml`\n* 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\n\n## Build\n\n### Optimized website\nTo build the website run the following line\n\n```sh\nnpm run build\n```\nThe built website will be in `_site` folder.\n\nYou can also run a local server to test it with this command\n```sh\nnpm run serve:dist\n```\n\n### PWA\nIf 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`\nThe built website will be in `_site` folder.\n```sh\nnpm run build:pwa\n```\n\n### Clean assets \u0026 \\_site folders\nThis will remove the generated folders\n```sh\nnpm run clean:project\n```\n\n## Known issues\n* 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`\n* 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\n\n## Websites using Jekyll Webpack Boilerplate\n* Learning Lab - https://learn.uno\n* Invitecode.is - http://invitecode.is\n* Typster - https://typster.xyz\n* TEDxMarseille - https://tedxmarseille.com\n* Motive network - https://motive.network\n* CoinGenerator - https://coingenerator.sh\n\n## Other documentations\n* [Jekyll](https://jekyllrb.com/)\n* [Webpack](https://webpack.js.org/)\n* [Jekyll multiple languages plugin](https://github.com/Anthony-Gaudino/jekyll-multiple-languages-plugin)\n* [Jekyll SEO tag](https://github.com/jekyll/jekyll-seo-tag)\n* [BrowserSync Webpack plugin](https://www.npmjs.com/package/browser-sync-webpack-plugin)\n* [PostCSS](http://postcss.org/)\n\n## ⭐️ Show your support\nPlease ⭐️ this repository if this project helped you!\n\n\u003ca href=\"https://www.patreon.com/sandoche\"\u003e[![patreon.png](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/sandoche)\u003c/a\u003e\n\n## 🍺 Buy me a beer \nIf you like this project, feel free to donate:\n* PayPal: https://www.paypal.me/kanbanote\n* Bitcoin: 19JiNZ1LkMaz57tewqJaTg2hQWH4RgW4Yp\n* Ethereum: 0xded81fa4624e05339924355fe3504ba9587d5419\n* Monero: 43jqzMquW2q989UKSrB2YbeffhmJhbYb2Yxu289bv7pLRh4xVgMKj5yTd52iL6x1dvCYs9ERg5biHYxMjGkpSTs6S2jMyJn\n* Motive: MOTIV-25T5-SD65-V7LJ-BBWRD (Get Motive Now: https://motive.network)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandoche%2FJekyll-webpack-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsandoche%2FJekyll-webpack-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandoche%2FJekyll-webpack-boilerplate/lists"}