TLDR

I am switching my blog from Jigsaw to Hugo so I can learn a bit more about webpack, bundlers, postcss, purgecss etc.

Longer version

Let me start by saying, I think Jigsaw is a fantastic static site generator, if you’re a Laravel developer, you’ll feel right at home using it.

TailwindCSS version 1 is baked into the Jigsaw blog scaffolding, and when I began updating it to version 2, I noticed how much magic was going on under the hood that I didn’t understand.

The only super important features I need for TailwindCSS, are PurgeCSS and making class components. For the life of me, I couldn’t seem to get it right on Jigsaw. When I finally read through a few tutorials I got it, but I had no idea how I accomplished that.

So - I wanted to go back to basics on this, and start with just the 2 features that I really wanted, PurgeCSS with TailwindCSS.

TailwindCSS Setup

I asked on Twitter and got a fantastic response.

Static Site Generator Setup

After getting this initial setup, I started making a simpler option for static site generation with Go where I’d have a directory structure like this

/build / the output directory that would get served
|-index.html
|-post1.html
|-...html
/includes
|-header.html
|-footer.html
/source
|-index.html
|-posts/
|--post1.html
|--post2.html
/assets
|-css/
|--style.css

the go program would loop through the source directory and prepend header.html and append footer.html to every file in the source, and then copy them to the build folder

The problem with this is things like meta tags, or titles, or partials that need data from another directory, so I looked and found Hugo.

It’s written in go, it’s wicked fast. I don’t use all the features (eg - I’m not using a theme, I created the layouts myself using TailwindCSS), but I think it results in much less magic I don’t understand under the hood.

If you want to see the code behind website - check out davidhallin.com on GitHub

Deployment using Netlify

I figured as well, while doing this, rather than playing with all the gh-pages deployment branch stuff for using GitHub pages, I’d move to Netlify - so I did that as well.

If you want to see how I setup Jigsaw to be hosted on GitHub pages, check out Deploying a static site on GitHub Pages

Wrapping up

Doing some of this stuff got me closer to my code, and removed a lot of the magic from the build process which has been good. I’m going to start a template file which has this code setup automatically, and then people can dump their tailwind code into this hugo repository.

I’ll post a link to it on the projects page.