Webpack 4 + Hugo boilerplate

tips & tricks
1

I am just starting with Hugo, and found out a lot of cool features in GoHugo. However, i think there should be the place for Hugo to have a seperate pipeline if possible. For now, i creating this boilerplate to bundle and minimize css and js.

This is a much similar compare to victor-hugo boilerplate, the only different is that i only using webpack 4 and bash script to run. So only linux, mac(maybe?) for now. Haven’t tried out Windows yet.

Supported features:

  • Using webpack 4, Hugo 0.41.
  • Service Worker for caching.
  • Auto bundle from the src folder.
  • PostCSS with Sass compiler.
  • Dev with hugo serve and webpack --watch.
  • UglifyJS and MiniCSS plugins with webpack.
  • Auto bundle manifest.json from config.toml

Any criticism and questions are welcome! Check it out here: https://gitlab.com/anhdle14/hugo-webpack.

1 Like
2

No problems with Mac. I have a template (inspired by victor-hugo as well) as starting point for all customer projects which consists of a bit of gulp, some webpack (for testing) and several bash scripts.

3

I hope that is the case, but i haven’t tested it yet, and i am still under development stage. Hoping that someone could confirm for the issue.

For now, i am going to finish it by next week if possible. There are still problem with the npm scripts, i put everything on webpack for ease of use but i don’t think that is a good idea. Looking for improvements and suggestions.

4

Cool. Thanks for sharing, always useful to have some “outer” tools available for when things get a little more complex.

Currently, I’ve not had to go beyond a simply npm script and Netlify is doing just enough bundling to get me by. But doubtless I’ll want to improve things in the future. Especially as I’m still looking for the best way to integrate my Tweets into the blog.

5

Thank you, glad that you liked it. I am currently updating it for the first release.