Hugo + webpack: ❤️

Building super fast and maintainable static websites using the latest and greatest tools.

I’ve recently revamped my build process for multiple websites I maintain.

Previously I had sites split across multiple different systems, tools and platforms. My static generated sites (non-WordPress) were mostly built using JekyllPhenomic,or plain-old PHP. Each of these sites had their own build processes for assets.

I’ve now streamlined and simplified my processes and rebuilt these sites using Hugo and webpack.

Hugo

Hugo is an open-source static site generator built in Go.

Part of my reasoning for moving to Hugo was the sheer simplicity of getting up and running. As Hugo is built in Go, all you need is the single binary file to run a copy. Updating Hugo is a simple as overwriting this file with the latest downloaded version.

On MacOS, I’m using brew to manage all of this for me:

$ brew install hugo

Compared with Jekyll, Hugo is lightning fast. The community is huge, and updates appear to be frequent. These are positive signs for any open source tool. I’m also a big fan of the way the system works, and developer happiness is a key metric in choosing my tools.

webpack

Whilst I’m a huge fan of Gulp as a task runner, I can no longer deny the fact that webpack has taken over as the task runner of choice for most major JavaScript projects.

My use of it is fairly simple, just combining, minifying, and moving assets – and the plugins I need are well documented.

In truth, webpack is an incredibly complex tool that most newcomers (such as myself) may find completely overwhelming. I recommend diving deep on tutorials and finding a base setup that works for you and duplicating this across projects. I feel I now have a base level of understanding and can edit my webpack.config.js without fear.

Combining Hugo and webpack

Where these two tools work well for me, is their distinct separation of concerns. Hugo builds the site and reloads the browser (for local development), whilst webpack takes care of all the assets.

A particular favourite feature of mine is the webpack-manifest-plugin which allows me to have immutable assets names based on the content of my assets. Hugo can read this manifest file and output the correct asset on each generation.

For an example of this, see the following files:

As stated previously, the key component for me is developer happiness. My enjoyment of these two tools comes from the fact that once I’ve set up a project, I can easily add and modify to fit any requirement with ease.