Aka building my own static site generator from scratch (don't try this at home)

Introducing my new personal site, a static SPA built without a framework 🚀

2 minute readLast updated

Visit the site to boost my SEO ✨

Check out the repo to see how I tackled this challenge 👨‍💻

After months of over-engineering and nitpicky designing, I'm excited (and relieved) to show off this baby to the world 😁

This was a much more difficult undertaking than it may seem, or even needed to be. Rather than using a sexy static site generator like Hugo or Gatsby, I challenged myself to pull off...

Static page generation for quick page loads

Client-side routing for that single page app (SPA) feel

Progressive enhancement so the entire site still works without JS enabled

Page transitions for added spice

... all without frameworks or component libraries.

I still leaned on a couple libraries like SCSS and Pug templating to make my life a little easier. But in the end, it's just a bunch of vanilla JS, a build script, and some probably bad practices keeping this thing together.

Well, to be honest, I was tired of sitting on the shoulders of giants to build feature-rich, hyper-optimized websites. It's so easy to get lost in the docs of your favorite framework that you forget all the fundamentals actually tying everything together. Plus, it was nice to tackle all of these problems on my own, since now I don't have to check back on someone else's framework in a year to see what breaking changes I need to fix!

I also had that naive thought of "how hard can it be?" that I just couldn't shake. Answer: extremely hard. Please don't try this at home unless you have some time and a healthy dose of insanity on your hands 😬

Needless to say, this was an absolutely incredible learning experience on how all of these concepts actually work under the hood. And now, I'm ready to share all my learnings with you. I just posted my first major takeaway from this experiment which you can find below. More entries soon to come!

Learn a little something? Share this post on Twitter!

Hand drawn portrait of Ben Holmes
is a web developer + UI designer by trade from Charleston SC. He's been tinkering with JavaScript and CSS since 2014, and has lead a full stack bootcamp curriculum used by universities across the country. Now, he's working fulltime at Peloton and teaching the world a bit of web whimsy in his spare time.