search

sandoche / Jekyll-webpack-boilerplate

⚡️ A boilerplate with Jekyll and Webpack to make the most performant static websites
MIT License
188 stars 57 forks source link

Why isn't the _src/template/default.html compiling to _layouts/default.html except on production builds? #9

Closed yuchant closed 5 years ago

yuchant commented 6 years ago

Hey there,

Thank you so much for this boilerplate. I have attempted the same thing and just keep hitting roadblocks getting this exact setup online. Mad respect.

I'm wondering why and how the source default.html can be updated live to the jekyll folder during development, without building?

Thank you! Owe you a beer.

sandoche commented 6 years ago

Hey,

Thanks, I am glad it's usefull. It makes me save a lot of time also!

The following command is triggered when you run yarn start:

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

Here is what really happen:

  1. The compiled _site and assets folders are deleted
  2. Webpack runs without the dev server to compile '_src/template/default.html' and put it's compile version inside '_layouts/' this will basicaly add to the default template the right CSS and JS file path.
  3. Then Jekyll and Webpack Dev Server are launched

Jekyll will keep looking at changes of files linked to Jekyll (new pages, new posts, new images, new files into _includes and trigger recompile if needed. Webpack Dev Server will recompile when the SASS or JS files linked to the _src/index.js file.

Basically what is needed to have the live update is to have something watching at changed on '_src/template/default.html', and trigger webpack --env=dev --progress --profile --colors.

I didn't manage and find the need to do it since you can just create new template that extends default and that's enough to get the live reload!