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.
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
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
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.