Awesome Hugo Boilerplates

3 minute read Updated

Hugo starter kits, tools and themes to kick your development into high gear.

In the fashion of Awesome React Boilerplates is comin’ atcha with a new list of awesome boilerplates, sometimes known as starter kits or seeds — this time for the one and only Hugo static site generator.

Let us not waste any more time. Here they are in all their glory! And as always, feel free to drop your submissions in the comment section below to promote your FOSS product for the benefit of others.

I learned about Atlas from a well-timed comment from @chrisgeary92 while having a short discussion about pulling Gulp from Victor Hugo. Like Victor Atlas is heavily integrated with Netlify so it probably won’t get you very far with a headless CMS like Prismic or Dato. But what you lose in portability you gain in speed to market. Plus it comes with a slick logo, shown here:

Atlas logo

Victor Hugo
Created by the team at Netlify, Victor Hugo is probably the most popular boilerplate for Hugo projects to date. It comes with a Gulp build pipeline and melds it together with Webpack. While I’m not sure Netlify is dogfooding this internally, I believe they created this when they took Smashing Magazine off WordPress—however a ridiculous choice that actually was. Just remember, sometimes you need to take two steps back to take a step forward.

Hugo Lambda
Whilst it isn’t actively maintained, the concept behind this boilerplate is sensational—to leverage FaaS tech from Amazon to deploy Hugo under a serverless architecture. If and when I decide to automate deployments with Hugo this is probably the approach I will take. But for now I simply run a single task to deploy from the CLI.

What is Serverless? Learn more in the serverless crash course.

Hugo + Gulp starter kit. Includes BrowserSync, does image optimization stuff, asset fingerprinting (total overkill IMHO when you can simply deploy from AWS), your choice between Less and SASS, autoprefixer and more. What’s really interesting about this kit is it’s inclusion of Docker — probably my favorite DevOps tool ever next to DevilBox or Helm.

Huggle is a generator and a reduced boilerplate mixed into a single tool. Shown here, Huggle churning out a GitHub Pages-friendly Hugo site with a single command from the CLI:

animation of command line installation
Demo of Huggle in action

Check out the Huggle website to learn more. Just remember… Don't forget the fabric softener!

Web Starter Hugo
This engineering marvel has been around almost as long as Hugo itself but doesn’t get much attention. Created by @adrinux Web Starter Hugo bases itself off the one and only HTML5 Boilerplate and includes goodies such as a Gulp build pipeline for responsive image generation, PostCSS and an extensible build of Modernizer. Holy moly that’s awesome!!

Brunch With Hugo
Are tools like Webpack starting to feel like your Achilles’ heel? Then this is the boilerplate for you. Created by my main man @Jayphen and leveraging the deceptively simple and ultra fast Brunch by Paul Miller and friends, BWH provides BrowserSync and plugs right in with the entire Brunch ecosystem to help you get to where you’re going without dealing with tooling trivialities.

After Dark
No awesome list would be complete if I didn’t selfishly promote some of of my own stuff amirite!? I built after Dark specifically to create my Hack Cabin website. It uses a design concept I call Deceptive Simplicity and introduces some bleeding edge Web tech without going overboard on tooling.

Tranquil Peak
Wait, can Hugo themes also be boilerplates??? You bet they can! And this one from first-time Java dev turned Web dude introduces a sophisticated and highly extensible theme and build toolkit all roped into one. Check out the demo site then click the title link above to dig into the source code.

Ledger Nano X - The secure hardware wallet