my site stack

published on the 3rd of Sep, 2017

Note: This article has been updated throughout time, with its latest edit in November 2019

I feel like this is the Hello World! post for every/any developer who's managed to set up a blog with a static-site generator. Since I'm an avid generator-hopper, I've broken this post down to different eras:

But first...

...static sites?

I'm an avid advocate of KISS and that should also apply to your tech stack. Now, that doesn't have to mean that you wear a tinfoil hat and command people to FTP files labelled index-old-old-old.html to your production server. But it does mean doing away with the technical overhead that your stack might be haunted by.

A great place to usually start is your project's/company's public website. Or a (marketing?) landing page you manage. Or even a complex app, because nowadays you can JAM-ify anything.

Since I really do love the JAM stack (and alongside it, anything static-first or progressively enhanced), I feel it's my duty to quickly sell you on some benefits.

  • Time to Interactive (or at least perceived) performance gains
  • Less expensive, if not free (πŸ‘‹ Netlify!)
  • A robust stack that doesn't confuse you 6 months later
  • Host-it-and-forget-it, which is especially nice for a typical devloper's or designer's portfolio/CV sites
  • Maybe a sense of pride, knowing that your site is not just human-friendly, but also accessible to a wide range of readers/parsers? πŸ€–

Metalsmith

This was my first hands-on experience with a SSG. I had looked and fiddled with Jekyll before, but to me it wasn't really approachable or hackable, since (being a simple front-end developer then) Ruby was rather foreign to me. But Metalsmith clicked. It was simple enough out-of-the-box and had a whole universe of possibilities circling around it with its rich plugin ecosystem. I also really liked how it taught you from the getgo to write plugins on your own and there really was no magic to it. I have even published one on my own.

Metalsmith was actually my first step into the magical world of running JavaScript outside of the browser. I remember feeling such power and enthusiasm. It was truly me falling head-over-heels in love with programming all over again.

But as with most relationships, time changes its parties. As my Metalsmith config grew, so did the build times. And it was a bit limiting on the browser side. Adding turbolinks and messing with page transitions ultimately worked to achieve my goal, but at a hefty cost. After avoiding updating my home page for a bit over a year, Metalsmith didn't pass my Do you get what's going on in this pigsty? test.

Vuepress

When Vuepress was announced, I went bonkers for it. I immediately hopped on the early beta release and refactored my whole repo.

It was not a great fit though. More on this later.

Eleventy

More on this soon.

Saber

I currently use (and love!) Saber. It strikes a perfect balance in easy setup and what it can achieve as a framework. I cannot wait for it to mature even further (given how young the project is). Definitely more on this Soonβ„’.


Bonus round:

  • The awesome-sauce that is Netlify
  • Building a JAM stack (this site really isn't one, but we'll talk a bit about what a JAM stack is)
  • Stuff other similar posts don't usually mention
    • Service workers and are they worth it on a static site?
    • Generating a sitemap, RSS feed and other tidbits
    • Adding a CMS (Netlify-CMS)

Find me on

Proudly generated with Saber,

safely hosted on Netlify.