Start building websites with Hugo

s I’m coming from a current working environment of modern JavaScript development, and before that I had 2 years working as a PHP/SQL developer with a healthy amount of custom WordPress stuff. I love working in modern application devleopment. Its great fun and it’s staggering how much business logic happens on the client these days. But my first and trusest love in web dev is still crafting old fashioned websites.

A good website is a simple mix of great imagery, snappy content organised by beautiful design. Old school website builds are still something I find myself loving to do for pleasure and profit but there are tonnes of way to build one.

My personal website is static HTML; and I’ve also built some small sites in static HTML as a freelancer. I’ve built some decent custom WordPress sites, and despite the shitty wrap it has - it’s still a best in class CMS with a powerful, albeit clunky PHP abstraction for everything you’d need to build a solid website for any SME. I still work on some Laravel websites which are fun.

I have built some websites in Modern JavaScript but honestly I’ll never do this by choice. For the most part, I think JS is the wrong tool for building a website that will be 95% static. I’m all about that progressive enhancement. JavaScript is still my go to for any complex UI work.

Enter Hugo

Hugo is a static site generator written in Go.

It’s a popular alternative to dynamic website engines like WordPress because it generates plain HTML files for all directories in it’s content structure.

The rendered files can then be served directly by a web server, which often makes your website FAST… like REALLY FAST.

Why Hugo?

  1. Build time: Hugo is known for its lightning-fast build times, making it ideal for large websites and blogs with many pages.

  2. Content management: Hugo has a simple and intuitive file and directory structure which it uses to generate the rendered website.

  3. Built-in shortcodes: Hugo provides a variety of built-in shortcodes to handle nearly every kind of content you’d need. And you can build your own.

  4. Customizable: Hugo is highly customizable and can be extended with custom templates, partials, and functions.

  5. Cross-platform compatibility: Hugo is written in Go, making it cross-platform compatible and easy to install on a variety of operating systems.

  6. Built-in dev server and cli: development server with blazing fast site generation with reload on all changes and a full featured CLI for content management, site config management, and so much more.

First Impressions - The context of this entire blog category

I’m still a relatively green developer (~3 years xp at the time of writing) and never found myself dabbling with Jekyll, or any static site generator as I just hadn’t found a need for them. Now I’m building up a steady freelance stream - I wanted something to make the layout building aspect of simple static websites easier. For the small local website projects that really are just a fancy online brochure and perhaps a contact form and email sign-up - I want markup, styling, dope images and some JS to speak to an SMTP api for example. That’s it. In 2023 (and probably for the forseeable future) I think JAM stack is the way to go for these types of project.

Of those things that I really do care about for these types of project, Hugo seems to have it all covered with a powerful standard toolset. The templating is refreshingly simply. I’m silently crying over the amount of time I’ve spent copying headers, footers, navs into new templates for the few static HTML websites I have to my name. Obviously for anyone in webdev templating isn’t a new concept but for the most simple brochure sites we end up building as a devleoper; server-rendered pages or sites built with modern component based javascript frameworks aren’t required. Just fast, static, lean web pages.

Out of the box Scss compiling is another bonus; plus you can minify and fingerprint the source scss files directly onto your template and hugo will generate a stylesheet link for the asset. Oh - and Postcss too!

{{ $style := resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "sass/main.scss" . | resources.ToCSS |
  resources.Minify | resources.Fingerprint -}}

  <link rel="stylesheet" href="{{ $style.RelPermalink }}" />

This was the moment where it really started to sink in to me how much the team behind the hugo we use today had thought about what makes a great DX for building traditional static web layouts in todays world.

Obviously everyone wants speed and thats another area where Hugo just MURDERS the competition. I’ve lately added Vite to the toolbox for both work and personal projects and thats a breath of fresh air for the module bundling experience in JavaScript. Vite has become quite famous for how quickly dev servers spin up and projects build time, but build time for Hugo sites is like ChatPGT scary fast.

I do realise with the speed comparison that I’m comparing apples to oranges, but time saved is still time saved and if I find myself building a project with Vue/Nuxt that could easily be built out in Hugo with some added Vue where its needed then I sure as shit know what option I’m reaching for.