Awesome Hugo Boilerplates

Awesome Hugo starter kits to kick your site development into high gear.

3 minutes read

Tired of reinventing the wheel? So am I. In the fashion of Awesome React Boilerplates habd.as is comin’ atcha with an all new evergreen list of awesome boilerplates—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.

Atlas
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. Cool logo not included.

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.

Hugulp
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
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:

Huggle CLI running in terminal animation

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 man main @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 cutting edge Web tech without going overboard on tooling. Check out After Dark for a wild trip back in time, when Geocities and Angelfire reined supreme.

After Dark logo

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.


Find or build something awesome and wanna gush about it? As well you should. And you can do so in the comment section just 👇🏼 below. And when you’re all settled and looking for some inspiration on shiny toys to add to your site check out the full list of JAMStack Frameworks, Tools and Tips.

Leave a Comment