Reese Schultz

Coding, gaming and rambling.

A Static Site Generation Stack for Frontend Grumps

My 2020 guide for people who hate frontend web development.

Created on May 23, 2020.

The Problem

If you're anything like me, frontend development is a begrudging activity of self-loathing. You don't do it for its own sake⁠—you just need a website up and running⁠—hence why static site generation tools exist. With them, we can build consistently styled webpages from templates, reducing code duplication and, in theory, effort. But, most tools demand such a steep learning curve and so much troubleshooting that the disadvantages often outweigh the advantages of this workflow.

That's why I present you with my favorite stack.

The Grump Stack

Here's what I use after spending untold hours regrettably trying other tools:

  • Eleventy, the Node-based, core static site generator.
  • Tailwind CSS, turning commonly-used styles into utility classes.
  • Sass, basically programmatic CSS.
  • Lavarel Mix, watching and compiling your site (it's an easy-to-use wrapper for the monstrosity known as Webpack).
  • PurgeCSS, purging unused styles from the deployed site.

I left out a specific templating engine, because you can use whatever you want with Eleventy. Personally I like Embedded JavaScript templating (EJS) the best, since you can literally embed JavaScript wherever. Many people prefer Nunjucks, which is maintained by Mozilla. There's also Pug (formerly known as Jade). Some people like Handlebars.

But Where to Start?

Integrating said tools together is a lot of work—work you don't have to do—because someone else did.

Use a Starter Project!

Eleventy procures a list of starter projects with tools already integrated for you. After all, that's the draw of Eleventy: use it with your favorite tools, even if those differ from mine. Conveniently, the starter projects are well-maintained Git repositories you can fork and go about your work. My favorite is Skeleventy, since it fully adheres to my preferred stack. It's on GitHub.

Be Stylish

Arrange. You'll likely want to overhaul whatever starter project you choose. That's why Tailwind is great. I find the most straightforward method to arrange page elements is via Flexbox, which eliminates the need for most of the CSS hacks we collectively despise. The best guide that I refer to religiously (since I can't ever remember how anything works) is CSS Tricks' A Complete Guide to Flexbox by Chris Coyier, one of the only frontend-dedicated people I follow. He co-founded CodePen.

Color. If, like me, you have zero understanding of how color works, I also recommend borrowing a color palette. Lospec has a wonderful list of community-curated color palettes you can use in your work. Color Hunt is good for that as well. Furthermore, Adobe Color is a fantastic web app for finding colors that work together, especially if you're trying to extend an existing palette.

Hosting

This is tangential, but if you're curious, you'll find the cheapest and most convenient hosting with the following:

You can evaluate them on their own merits since their terms change over time, although Netlify is by far the most powerful and flexible, especially if at some point your static site grows to require a backend. Regardless, each host provides build automation, so you shouldn't need to spend much time, if any, on CI/CD.

Custom Domains

This is also tangential, but all of those hosting options permit custom domains. I prefer Google Domains for the best customer experience—and I am in no way being compensated to say that. In fact, they're not always the cheapest, but Google has thus far impressed me since they don't resort to any underhanded tactics. They provide fair warning about expiry dates and make domain management simple. But that's just my opinion after comparing my experience using them versus seedy competitors.

Conclusion

This was a bit of a knowledge dump, but I hope this article soothes your inner frontend grump. As needed, I'll update this in case you consider referring back to it. Have fun!

© Reese Schultz

My code is released under the MIT license.