A workflow for building a website with a static site generator (or SSG)

A few months ago, I shared some tips and tricks for working with static site generators (or SSGs). It was primarily focused on creating and publishing content, and the mechanics of day-to-day use.

One of the most common questions I’ve gotten in response to that article is how I actually build a website with an SSG. Specifically, how do I compile and bundle my CSS and JavaScript, and reload the site to test how it looks.

Today, let’s talk about that!

Build tools

I use my Build Tool Boilerplate to compile Sass files into CSS and bundle JavaScript modules into a single file. It also handle minification for me.

(Aside: if you want to learn how to create your own build tools setup, I’ve got a course all about that.)

When I’m actively doing development, I use that.

Sometimes, I set it up to watch for changes to my Sass and JS files and automatically run a build. But more often, I make a bunch of updates and then manually run npm run build. I don’t know why I prefer to manually run it, but I just do.

Hugo, my SSG of choice, now includes tools that will process Sass and compile JS files, but I run an older version that doesn’t do those things. And even if I had a newer version, I prefer the flexibility of running my own system.

Eleventy, another popular choice, does not currently have any compiling tools baked in.

Watching for updates

With a static site generator, you will have a folder that you can put static assets. These are files that should be copied over as-is.

I tell my build tool to compile all of my files into that directory.

Hugo and Eleventy both have a built-in server you can use to view a local version of your project. They also both have commands you can run to watch for changes in your project and recompile the site.

In Hugo, I run hugo --watch.

Eleventy has a similar --watch command, but requires a bit of configuration about which files to watch. You might also want to add a delay to Eleventy’s build to make sure your CSS and JS finish compiling before it runs.

That’s it, really

Just to recap, I use my own build tool to compile my CSS, JavaScript, and more.

Then I use my SSG’s --watch command to detect when the build tool generates new files, and load them into a local server.

There are probably more sophisticated systems, but in my opinion, simpler is better, even if it involves just a touch more manual work on my end.