You might notice this blog loads blazingly fast, looks snazzy, but what’s even better is that it’s free to host and took me half an hour to set up. In this article I’ll show you how.

In the world of web development, there’s too much choice. Static site or SSR? JavaScript or TypeScript? Angular? Next.js? React? Blogging platforms add more: WordPress, Medium, Ghost – the list goes on.

When looking for a technology to host my blog, I valued three principles:

  1. Simplicity
  2. Style
  3. Cost

Hugo and Netlify met all of these.

What’s Hugo?

It’s a static HTML and CSS website generator written in Go.

Hugo is open-source (free!) and comes with a neat CLI that makes quick work of creating content and building the site. Here are a few of its features:

  • Ultra-fast site builds.
  • Pre-built and customisable themes.
  • Shortcodes to make your markdown neater.

You can easily get started with just a few commands.

Start a development server to view your site and draft posts locally.

hugo server -D

Then build a static site when you are ready to publish your content.

hugo --gc --minify

How do I create content?

With Hugo, you write your posts in markdown. This is a blessing, because it means you can use whatever text editor you like and don’t have to fiddle around with a UI. I write my content in VSCode and neovim and it works great.

Create a new post.

hugo new posts/my-favourite-food.md

This will create an (almost) empty file that looks like this:

---
title: "My Favourite Food"
date: 2023-02-24T18:05:36Z
draft: true
---

Write your markdown content below the dashes, and you’ll see live updates on the development server. When you’re ready to publish your content, set draft to false and it’ll appear when you rebuild the site with the command from earlier.

What about styling?

Hugo uses themes to style content. If, like me, you’re not the best web designer and just want something that looks nice out-of-the-box then you can pick a pre-built theme from the Hugo Themes website. These work great – this blog uses Hugo PaperMod.

All I need to do is write my markdown and configure a few options, and the theme will do the rest.

If you want full control over the HTML and CSS of your site, you can write your own theme. Themes make use of Go templating, so you’d better brush up on that first.

So where does Netlify come into this?

We’ve discussed Hugo and how you can use it to generate a static site for your blog. The only step left is to take that static site and serve it to your readers.

There are endless options for doing this: use a paid-for hosting provider, self-host it, upload it to an S3 bucket, pass it to a friend on a USB stick. They all have unique advantages and disadvantages (except the USB one, which might just have disadvantages).

I host mine on a serverless platform called Netlify. Here’s why.

A generous free tier

I currently host multiple sites on Netlify’s free tier. It provides up to 100GB of bandwidth per month, as well as 300 build minutes (we’ll get to that shortly).

For a personal blog, that’s plenty. No need to pay a monthly fee. See Netlify’s pricing model for more information.

Netlify will also provide a free Let’s Encrypt SSL certificate, but it’s worth noting that you’ll still need to register a domain.

A first-class GitHub integration

To make things even easier, Netlify includes a customisable build and deploy pipeline. I keep this blog in source control, so it’s as easy as pointing Netlify at my GitHub repository and telling it how to build the site. Netlify will automatically rebuild and deploy my changes.

It’s simple to set up following Netlify’s Hugo guidance.

Builds do take time, and that’s where the build minutes mentioned above come in. If you’re building complex sites or applications, you’ll hit the 300 minute threshold pretty quickly. I barely scratch the surface though – Hugo is fast and I’m just a one person team.

Content served at the edge

The cherry on top is that Netlify deploys sites onto their global edge network, even on the free tier. This means that my site will always be served from as close to you, the reader, as possible. That keeps latency down and makes browsing the site snappier from anywhere in the world.

In summary, Netlify and Hugo are a perfect match for developers who value simple solutions. There are plenty of options out there and no one size fits all solution, but this evaluation shines a light on why Netlify and Hugo are a good choice.