Pairing Eleventy with Htmx and Deno

Looking for something simple, but different

While Eleventy was the forerunner for building my site, I also wanted to experiment with HTMX, which seems to be gaining popularity as part of a general shift towards less complex web development approaches. The Grug Brained developer written by Carson Gross the guy behind HTMX is also a pretty funny read if you have the time.

Inspired by reading Effortless Page Routing using HTMX I got curious whether I could use Eleventy together with HTMX without the need for a back end. Could I use Eleventy to spit out two versions of my pages?

For example:

1. One page template for full page reloads (The usual, full HTML).
2. A slim page template for Htmx requests (only has the main content portion).

It turns out yes, you can, (you use an environment variable and run Eleventy twice). Would I recommend doing this? Maybe, if you want to save on every byte (I did), but it's relatively unnecessary.

What the previously mentioned article neglects to mention is that with HTMX, you can work with what you already have. There’s an attribute called hx-select to tell HTMX what you want to grab from the full–page response. It's super handy if you don’t want the extra complication of managing two sets of templates or needing a backend, and/or you might be working with a legacy codebase where doing so isn’t possible.

The progressive enhancement story

The good thing about working with Htmx is that it takes progressive enhancement into consideration. Will my website still work or at least be navigable on naked-js day? or in any of the situations where JS might just not be available? Yes! Any route still works with a hard refresh and also the navigation just falls back to full page loads if for whatever reason JS wasn't there to do its thing.

Why complicate this with Deno?

I’m a sucker for wanting to try and learn something new, and I also wanted a space to play. Deno deploy from my limited experience with it, is really good, straight forward to set up, seemingly not as evil as Vercel, although I guess like anything it has its issues. It offers the possibility to tinker with minimal setup, you can run a static file server if you want, but you can also get access to tools like KV (a deno native Key value database which also works when developing locally).

With the Eleventy 3.0 release going all in on ESM, which allows it to be run in a wider variety of environments I thought why not give it a go? I at least have the option of keeping it as simple (serve static files only) or as advanced as I want… I personally wanted to tinker with dorky old web things like hit counters and like counts and KV seemed perfect for that.

I went and created a starter project 🙄

Not to go reinventing the wheel or anything like that, I simply want to try and be helpful for others that may want to try something similar and want a leg up.

It lives at 11ty.deno.dev and Github