Over the years of trying to build this site just right and build my various other apps, I've used dozens of different frameworks and technologies. Vue, React, Nuxt, Python, Django, Flask, FastAPI, WordPress, Bootstrap, Vanilla Javascript, etc. I think I've finally found something that strikes just the right balance for this and most sites. I also want to be sure that I understand what anything I use is doing under the hood. This way I can minimize bugs and be sure that I can fix them as they come up.

Static/Jamstack Sites

For sites that aren't updated super frequently and don't have advanced functionality, a static or Jamstack site is best. It's the fastest for the user and cheapest to host. Here's how I build mine.

Eleventy

As much as the idea of building sites directly in HTML, hand-coded, line-by-line sounds romantic, in practice, it's a huge pain. The main problems are repeated code and mixing content and templates. This makes it difficult to maintain because if you make layout or theme changes, you have to remember to fix them on every page. No, Thank you. Using a site generator lets me build re-usable templates and components and keep the content separate from the templates/styling. For this blog, all the posts are markdown files in one folder, and I can change everything about how they look without editing a single one.

The great thing about this, is that I still get flat HTML output, served statically: no heavy frameworks, or slow backends. Frameworks and backends are great for frequently-changing and/or dynamic content, but I don't need it, so I don't use it.

Eleventy is my choice of site generator because it's extremely flexible, un-opinionated, and lets me use basically any template languages that I want.

Nunjucks

My favorite template language for HTML is Jinja2. Sadly, it's Python-only, and Eleventy is JavaScript based. Nunjucks uses very similar syntax and features, is open source, and created by Mozilla, who are great. Of course, if I change my mind, or something better becomes available, I can start using the new language immediately without updating any of my old templates and Eleventy will render everything.

Alpine

Once again, hand-coding everything directly in JavaScript sounds cool, but it's just such a waste of time. Alpine is the tiniest framework ever, but provides a ton of commonly-used utilities. Basic things like state-management, transitions, loops, conditional rendering are super-easy. With Alpine, what would be dozens of lines of JavaScript are just a few words added to the HTML. It saves a ton of time and complexity, and doesn't harm performance. Perfect.

Tailwind

See a pattern developing? TailwindCSS makes building sites much faster and easier with their concept of utility classes. It provides almost everything I would want to do in CSS. Where it falls short, I can always write my own classes. It also automatically removes any unused CSS, so it has basically zero bloat compared to hand-coded css. In fact, because it uses utility classes rather than syntax classes, there is likely a lot less CSS needed, compared to other approaches.

Formspark

Even on the most static site, you probably need a form or two. There are tons of approaches and services for handling forms, but I like Formspark. It's super easy to set up, and I really like their simple billing model. It's easy to set up a simple contact form, but can also be connected to numerous other APIs and services.

Headless CMS

Generating new content is a huge benefit for websites so that the Google-bots don't think you're getting stale. Blogging is a great way to do this, but writing markdown files in src/ isn't that user-friendly. Headless Content Management Systems like Forestry and NetlifyCMS are not as feature rich as WordPress, SquareSpace, or Ghost, but they give a nice interface for generating new content while maintaining the benefits of static websites.

Dynamic Sites/Apps

Sometimes legitimately need more than a Jamstack site can offer (though you can do blogging and eCommerce with Jamstack).

Nuxt

I do really like Vue.js for more advanced apps. Nuxt is just Vue with some added benefits and server-side rendering. It's a joy to work with, when you really need it, but gets complex fast compared to a static-site generator.

FastAPI

My one true love will always be Python, and FastAPI uses everything that makes Python great and allows you to build rich APIs...fast. It's also very performant because of its asynchronous nature. One of my favorites, but far more than most people need.

Ghost

When you need finer control over content layouts and richer content, or just update the site so frequently that a Headless CMS becomes annoying (i.e. multiple times per day), you need a true CMS. I really like Ghost because it's clean and fast and has great support for subscriptions and newsletters. This is my go-to for content-rich sites.

WordPress

I've used WordPress to build sites before. It's not the fastest or the most-intuitive, but it's well-established open-source technology. With its huge variety of themes and plugins, you can do almost everything. It's perfect for extremely feature-rich sites that don't reach the level of "full custom web app."

DRY and YAGNI

My whole approach to picking out tools and frameworks comes down to these two programming algorithms. DRY is "Don't Repeat Yourself," because repetitive code wastes time and is difficult to maintain. Maybe even more important is YAGNI, "You aren't gonna need it." I choose the tools that are right for the job at hand and take on just enough complexity to do what is in front of me. It should be just enough to get the job done.