New Site 🎉 · Derek Cavaliero

It took me forever to figure out what I wanted to do for my personal website. After a long time of thinking and going in circles, I came up with the following criteria or conditions of satisfaction.

No WordPress. I generally don't like the direction it's headed, and I don't need a block/visual editor or anything that WordPress really provides. (Also - Mr. Mullenweg is/was having a meltdown).
SPA-like - but without the complexities. I want the site to be quick, but I also wanted to avoid the JSX soup that is the current meta of building websites.
Avoid headless - I don't plan on changing my CMS or pulling data into a native application.
Easily self-deployable. - I don't need this site to scale to oblivion - needs to be able to deploy on a $5/mo. VPS.
I actually like PHP. - (P.S. it's not dead and it doesn't suck).

After much deliberation, I decided on the following stack:

The SHAT Stack: Statamic + HTMX + Alpine + Tailwind

Backend/CMS: Statamic

As mentioned above, I wanted to get away from WordPress. It lacks modern backend structure, templating features, and the list could go on-and-on.

Statamic is built on top of Laravel (which, in my opinion, is the best full-stack web-framework available today). It's ALSO built around the concept of using static YAML files to drive your page content instead of a traditional relational database approach like WordPress, Drupal, etc.

This is great because Statamic doesn't have many opinionated defaults - you get to craft everything from scratch, and everything is version controllable due to the fact that all CMS changes are stored in the filesystem.

I never felt like I was "fighting" against the CMS while building, which was in a word, lovely.

So - c'ya later WordPress, I won't be back ✌️.

Front-End: Tailwind + Alpine + HTMX

Tailwind

It took me a bit to warm up a utility-first CSS framework like Tailwind, but now I absolutely love it. It makes a ton of sense once you get over the immediate feeling of how verbose your HTML classes look (1).

Yes - its verbose, and yes - if you don't break your UI into small reusable pieces (e.g. components - it feels like a hassle). The verbosity doesn't matter once you actively try to re-use pieces of your UI, and most modern approaches to building websites use this approach (well - except WordPress - the block editor is still a mess IMO).

All-in-all, very happy w/ Tailwind. It allows for easy change/theming whenever I want - which is valuable to me.

Alpine

I don't need the complexity of React/Vue or a full-fledged reactive web framework. In fact, I just need a declarative API that allows some reactive bells & whistles here and there. Alpine.js is perfect for this.

HTMX

If there is a yin to the Alpine.js yang - it's HTMX. If you aren't familiar with HTMX, here's the description right from the project's homepage:

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext.

In other words, HTMX allows you to progressively enhance (meaning the site will still function when javascript is disabled) portions of your website using an extension of HTML and XHR requests. <chef's kiss>. HTMX give you the ability to "boost" links (very similar to Laravel Livewire's wire:click. It's a total game-changer, it will progressively enhance links to load and replace the existing HTML from an XHR response (which covers my "SPA-like" requirement).

Again, I don't need a SPA - but I want it to "feel" like a SPA, HTMX offers just enough progressive enhancement in that regard.

Deployment

One of the beautiful things about Statamic is its native support for static site generation. This combined with HTMX makes for a ridiculously fast experience. This is perfect for a simple site like this, build times are practically instant, and the entire site can be deployed to Cloudflare pages for 0 cost.