Pairing Eleventy with Htmx and Deno

Striving for something simple, but different

While Eleventy was the forerunner for rebuilding my site, I also wanted to experiment with HTMX, which seems to be shifting the pendulum for some people away from big frameworks back to simpler approaches. I came across Effortless Page Routing using HTMX which got me thinking… this is just what I want, a little bit of client-side sugar without a massive buy in to a hefty framework with an opinionated way of doing things. But did I want the extra complication of a backend? does HTMX necessarily need a back end? In a static site setup, would it be possible to set up Eleventy to build 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, 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 Probably not super necessary.

What the article also neglects to mention is that you don’t have to get this complicated. HTMX can just work with what you already have. You can just use 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 reloads if for whatever reason JS wasn't there to do its thing. Will absolutely everything work? no, but the entire page will still be readable and accessible. Are there potentially better alternatives to Htmx? maybe! htmz looks interesting. Some people also roll their own, but for me, it feels like learning a bit of htmx is going to be more helpful, since there’s a bigger chunk of people using it.

Deno Deploy: Become a 10x developer, full stack, no cap

Deno deploy is really good, straight forward to set up, seemingly not as evil as Vercel, although I guess like anything it has its issues. What I do like though is that 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). Of course this going against earlier feelings of not really wanting a back end, but with the Eleventy 3.0 release looming which goes all in on ESM, it offered the opportunity to try something new and with Deno, I at least have the option of keeping it as simple (serv 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 is more than enough for building and keeping track of dynamic pieces of data.

Set sail for a new web adventure

Will this become a three-headed beast that I grow to hate, or just a folly that I soon lose interest in. I can’t be sure of either but am excited to be able to try things and be close to the rails while building for the web.

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