Giter Club home page Giter Club logo

jekyll-webpack-boilerplate's Introduction

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

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
│   ├── 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 of the plugin Jekyll multiple language plugin

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

  • 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

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)

jekyll-webpack-boilerplate's People

Contributors

dependabot[bot] avatar duleorlovic avatar j0eii avatar jordan-t avatar sandoche avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jekyll-webpack-boilerplate's Issues

Meta Description for Multiple Languges

Hello,

unfortunately meta description with multiple language doesn't work out of the box. Or am I missing something?

I tried:
main folder: A description variable in YAML front matter (f.e. home.md) works fine - but its not language dependency.
lang sub folder: A description variable in the translation files f.e. es/home.md is ignored and rendered as plain text.

Thank you for your help,
malmr

Bug: for imagemin-Webpack-pluning !

I encountered a bug in the package.json file with the version of imagemin-Webpack-pluning.
On npm, it offers version 1.5.0-beta.1.
It's OK for me!
Thank you for your project

Critical CSS not working on netlify?

First of all, love this project and thank you for creating it! It was just what I was looking for.

I've ran into an issue where my critical CSS is being inlined locally when I run npm run build:pwa:optim but when I run this as my build command for netlify, it doesn't inline any of the critical css. Any ideas why? No errors of notice in the log.

You can see the site here: https://mailtolink.me/ . If you check out the source you can see theres no inlined css. Only the css in app.css.

Adding font loading to webpack issue

Hi there, I was just updating to your latest files (since 2018), an issue I am having is that I can't seem to get it to process font files via webpack.

Eg. file in _scss/_font.scss

url('../_fonts/blah/blah_std_bd-webfont.ttf')  format('truetype');

The file is then placed in _font/blah/etc,

However it is never processed and placed in the output assets folder. Do you have any idea how I can fix this?

how to use _data folder?

Hello, this is great and I am attempting to start a website with it, my only concern is how can I use the standard jekyll _data folder for common variables?

I attempted to remove the language plugin but got a bit lost after this as it wasn't reading the data folder so I was left without the yml files.

Problem including jQuery plugin

Hey,

thank you very much for your helpful boilerplate. Im facing a problem when I try to use jQuery in the navigation.html file, the console outputs

ReferenceError: $ is not defined

I installed jQuery with npm i jquery --save. Then I adjusted the config/webpack.common.js by adding:

const webpack = require('webpack');
...
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),

I also tried to use jQuery in the index.js file, but resulting in the same error.
What am I missing?
Thanks in advance!

Can't host on Netlify

Hi @sandoche,

Thanks for this super awesome project! I tried Deploy on Netlify but seems like there's an error:

2:09:32 AM: Either installing with `--full-index` or running `bundle update nokogiri` should
2:09:32 AM: fix the problem.
2:09:32 AM: In Gemfile:
2:09:32 AM:   amp-jekyll was resolved to 1.0.2, which depends on
2:09:32 AM:     nokogiri
2:09:32 AM: Error during gem install
2:09:32 AM: Error running command: Build script returned non-zero exit code: 1
2:09:33 AM: Failing build: Failed to build site
2:09:33 AM: failed during stage 'building site': Build script returned non-zero exit code: 1
2:09:33 AM: Finished processing build request in 27.549211835s

and these are the deploy settings:

Build command npm run-script build
Publish directory _site/
Production branch master

Any help?

jekyll webpack boilerplate modernization

Hello!

The small business I run ( https://www.controlshiftlabs.com/ ) is potentially interested in sponsoring the work of updating jekyll-webpack-boilerplate to webpack v4 and the latest js dependencies generally (many of the older dev dependencies currently in use look like they have security warnings).

Is that work any of the maintainers would be interested in doing on a paid basis? We use the boilerplate for a few static sites we maintain and if we can sponsor the update work upstream, it could benefit the whole community.

Nathan

Menu order

Hello,
how to change the menu order (for individual sorting, not in alphabetical order)?
Thanks in advance,
malmr

slow build

I noticed that it is very slow compared to blank jekyll project (with same 3.6.3 version)

time jekyll b
real	0m25.643s

I think it is because of octopress/minify-html#4 when I disable it works nice

echo "minify_html: false" >> _config.yml
time jekyll b
real	0m1.270s

I would remove this gem 'octopress-minify-html'
or at least disable by default and enable on production

Support for `_src/template/default.html` compiling to `_layouts/default.html` in development server

In reference to the issue #9 , I found a boolean setting for webpack-dev-server which enables writing the changed files to disk. You just need to add writeToDisk: true to the devServer part in webpack.dev.js:

  devServer: {
    contentBase: [
      path.resolve('_site'),
    ],
    hot: true,
    writeToDisk: true,
  },

The docs for the relevant option is here: https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-

Missing script

Hi!
I've downloaded the repo, installed dependencies, everything good except when I run yarn start I get

npm run-script clean:project; concurrently "webpack --env=dev --progress --profile --colors; webpack-dev-server --env=dev" "bundle exec jekyll serve"
npm ERR! missing script: clean:project;

0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Users\Daniel\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run-script',
1 verbose cli 'clean:project;',
1 verbose cli 'concurrently',
1 verbose cli 'webpack --env=dev --progress --profile --colors; webpack-dev-server --env=dev',
1 verbose cli 'bundle exec jekyll serve' ]
2 info using [email protected]
3 info using [email protected]
4 verbose stack Error: missing script: clean:project;
4 verbose stack at run (C:\Users\Daniel\AppData\Roaming\npm\node_modules\npm\lib\run-script.js:151:19)
4 verbose stack at C:\Users\Daniel\AppData\Roaming\npm\node_modules\npm\lib\run-script.js:61:5
4 verbose stack at C:\Users\Daniel\AppData\Roaming\npm\node_modules\npm\node_modules\read-package-json\read-json.js:115:5
4 verbose stack at C:\Users\Daniel\AppData\Roaming\npm\node_modules\npm\node_modules\read-package-json\read-json.js:418:5
4 verbose stack at checkBinReferences_ (C:\Users\Daniel\AppData\Roaming\npm\node_modules\npm\node_modules\read-package-json\read-json.js:373:45)
4 verbose stack at final (C:\Users\Daniel\AppData\Roaming\npm\node_modules\npm\node_modules\read-package-json\read-json.js:416:3)
4 verbose stack at then (C:\Users\Daniel\AppData\Roaming\npm\node_modules\npm\node_modules\read-package-json\read-json.js:160:5)
4 verbose stack at C:\Users\Daniel\AppData\Roaming\npm\node_modules\npm\node_modules\read-package-json\read-json.js:280:12
4 verbose stack at C:\Users\Daniel\AppData\Roaming\npm\node_modules\npm\node_modules\graceful-fs\graceful-fs.js:78:16
4 verbose stack at tryToString (fs.js:514:3)
5 verbose cwd C:\Users\Daniel\Downloads\99Designs\Jekyll-webpack-boilerplate-master
6 verbose Windows_NT 6.1.7601
7 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Users\Daniel\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run-script" "clean:project;" "concurrently" "webpack --env=dev --progress --profile --colors; webpack-dev-server --env=dev" "bundle exec jekyll serve"
8 verbose node v8.5.0
9 verbose npm v5.8.0
10 error missing script: clean:project;
11 verbose exit [ 1, true ]

Add webpack-cli

After run: npm run start i get this error.

[0] The CLI moved into a separate package: webpack-cli
[0] Please install 'webpack-cli' in addition to webpack itself to use the CLI
[0] -> When using npm: npm i -D webpack-cli
[0] -> When using yarn: yarn add -D webpack-cli
[0] internal/modules/cjs/loader.js:638
[0]     throw err;
[0]     ^
[0]
[0] Error: Cannot find module 'webpack-cli/bin/config-yargs'
[0]     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
[0]     at Function.Module._load (internal/modules/cjs/loader.js:562:25)
[0]     at Module.require (internal/modules/cjs/loader.js:692:17)
[0]     at require (internal/modules/cjs/helpers.js:25:18)
[0]     at Object.<anonymous> (/mnt/d/Cloud/GitHub/matheu.srv.br/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
[0]     at Module._compile (internal/modules/cjs/loader.js:778:30)
[0]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
[0]     at Module.load (internal/modules/cjs/loader.js:653:32)
[0]     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
[0]     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
[0] webpack-dev-server --env=dev exited with code 1
[1] Configuration file: /mnt/d/Cloud/GitHub/matheu.srv.br/_config.yml
[1]             Source: /mnt/d/Cloud/GitHub/matheu.srv.br
[1]        Destination: /mnt/d/Cloud/GitHub/matheu.srv.br/_site
[1]  Incremental build: disabled. Enable with --incremental
[1]       Generating...
[1] Building site for default language: "pt-br" to: /mnt/d/Cloud/GitHub/matheu.srv.br/_site
[1] Loading translation from file /mnt/d/Cloud/GitHub/matheu.srv.br/_i18n/pt-br.yml
[1]   Liquid Exception: No such file or directory @ rb_sysopen - /mnt/d/Cloud/GitHub/matheu.srv.br/_i18n/pt-br.yml in /_layouts/default.html
[1] jekyll 3.6.3 | Error:  No such file or directory @ rb_sysopen - /mnt/d/Cloud/GitHub/matheu.srv.br/_i18n/pt-br.yml
[1] bundle exec jekyll serve exited with code 1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Then it works.

Webpack Configuration Error

Created a new github repo of the project. Starting the project from a clone. Followed the directions in the README.md. I keep getting an error before making any real changes.

Setup:

I've tired

node 10 and node 12 on to separate clean repos

Commands:
Bundler install 
Run yarn build to start the development server (or use yarn start).```

It usually asks me to install webpack cli 

` yarn add -D webpack-cli`

Then on yarn start it breaks. 

``` 「wds」: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'mode'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           mode: ...
         }
       })
     ]
webpack-dev-server --env=dev exited with code ```

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.