Web Design on Key and Card

Building an Eleventy Site Skeleton: Day 3 Report

spencer@spencerdub.me (Spencer Dub) — Mon, 22 Jun 2026 21:04:52 -0700

My long weekend is ending. I am back home, sitting on my own couch. I’ll be in bed in an hour or so, which means it’s time to reflect on my progress.

There’s not a lot to report. No sooner had I saved yesterday’s blog post than the power at my in-laws’ went out. I had no internet, and only the scant screen time that the battery on my 10-year-old laptop could provide. On top of that, what I did have was plans. R and I took the Goblin downtown, since she wanted to see the Space Needle, and then while she napped back in the dark house, R and I went to a performance of Frida….A Self-Portrait with my mother-in-law.

We returned mid-afternoon, but the power still wasn’t back, and it wouldn’t return until the hours before dawn this morning. By then, the great machinery of travel was in motion: resting, waking early, packing up, and catching the train home, followed by unpacking and settling in.

All that is to say, sitting down on my couch now, an hour before bed on Monday, is the first chance I’ve really had since Saturday evening to do any tinkering.

So I don’t have a bare-bones Eleventy skeleton, not yet. Objective failed! But I think I know how I’ll get there. Like I wrote yesterday, I’ll be working through the Learn Eleventy course again, this time adapting the exercises to my own project. I’ll also be referencing the work of other IndieWebbers who use 11ty, learning how they solve common problems and letting their efforts jump-start my own. I’m thinking I’ll join 32-Bit Café, too, to be more closely connected to other people interested in and doing this kind of creative work.

A decade ago, I challenged myself to make 25 blog posts in a month. I only reached 19. Reflecting at the end of the endeavor, I wrote:

No, I didn’t meet the goal I set for myself. But I wrote 19 posts, which is more than a post every two days. Blogathon 2014 drew nearly 700 visits to my site, and almost 500 new users. Most importantly for me, I wrote. I blogged and blogged and blogged, a process that made my blog feel more like my own than anything I’ve done in years.

At the end of the day, I don’t think the goal really was to write 25 posts. I mean, that’s what I said, but my motivation was slightly different. I wanted to write, first and foremost, and hoped that in doing so, I would shake off my reluctance to share things here. By that metric, Blogathon 2014 was a smashing success. The process of starting a new draft seems remarkably natural to me now–I don’t sit here wondering if what I want to write is worth sharing. It’s my blog. If I want to say it here, I can.

I have less to show for this weekend’s push than I did my 2014 blogathon, but I find some familiarity and comfort in those words. This weekend, I broke through the rusty stasis that had been paralyzing me and kept sustained focus on a task that means a lot to me. I know where I’m going next. That’s what I’ll be taking with me.

Building an Eleventy Site Skeleton: Day 2 Report

spencer@spencerdub.me (Spencer Dub) — Sun, 21 Jun 2026 08:24:54 -0700

Yesterday’s check-in came in pretty long and meandering (me? never!), so I’m gonna try to keep today’s brief. Briefer.

Yesterday’s task was working through the Learn Eleventy tutorial. I mentioned in yesterday’s post that I was feeling unclear about how all the pieces worked together under the hood; while this tutorial didn’t clear it up entirely, it definitely helped. It gave me a lot of practice manipulating data within Eleventy.

I did everything in the “Introduction and Basics” module once, following the instructions to the letter, I then started again, intending to adapt what I was learning to my site project.

As I was doing that, I also found myself referencing, and often outright copying, Brennan’s source for their blog. I’m trying to be somewhat honest here and leave out stuff that either isn’t relevant now, isn’t part of my vision for the site, or I don’t understand, but I can’t deny that I’ve been reading a lot of the source over there and copying it over.

You’ll notice the tone of remorse there. I’m realizing that I haven’t allowed myself to be fully comfortable with the hacker mindset of building through copying and tinkering. Brennan’s blog source is licensed under the GNU Affero General Public License 3.0, a copyleft license; it is designed to facilitate distribution and modification¹. Brennan even writes:

As an additional permission under GNU AGPL version 3, section 7: You are granted permission to use the templates, layouts, and design patterns of this site as the basis for your own independent website…

So even if I were copying things over wholesale, that is explicitly permitted. And I’m not, I’m doing what amateur web designers and hackers have always done, which is to learn by reading and remixing.

But some part of my mind is nevertheless convinced I’m doing it wrong, that the only responsible way to build a personal website is to excrete every character of code from my own noggin. If I’m copying pieces, then my output is going to somehow be second-rate. All the cool IndieWeb kids will know I’m a poser! 😱

…

Sometimes, you just need to say it out loud to give the brain time to catch up and shake itself out of it.

Continuing with Learn Eleventy is today’s plan.

Provided I also use the AGPL, of course—I haven’t overlooked that part. ↩︎

Building an Eleventy Site Skeleton: Day 1 Report

spencer@spencerdub.me (Spencer Dub) — Sat, 20 Jun 2026 11:31:04 -0700

Yesterday, as planned, I followed fLaMEd’s guide to getting started with Eleventy. In only an hour or two, I had a really basic site: a landing page, an About and Contact page, and a Blog page that listed individual blog posts. Rad!

Keen observers will also notice there is some basic CSS styling in this screenshot. I know! I said no CSS! In my defense, I copied the CSS that fLaMEd provided, and have not touched it one bit since then. I am not tinkering with CSS. I am not making things pretty. I am trying to understand the system.

Speaking of, how am I doing on that front?

What I do and don’t understand
#

I wrote in my last post about my inattention and my history with my website, and I briefly mentioned my basic familiarity with HTML and web design, but I didn’t really give a good glimpse into where I’m starting from.

I’ve been tinkering with web design since elementary school. I’m familiar with HTML and CSS, although my CSS-ing usually involves a lot of trips to reference documents to remind myself of the exact details of how something works. I am slow and inefficient, but can usually get there.

My weakest link, when it comes to understanding Eleventy, is JavaScript. At this point in my life, I have probably taken (or started) at least 10 introductory programming tutorials, between JavaScript, Python, Lua and PHP, so again, I’m not unfamiliar. I understand all your Programming 101 concepts: variables and data types, flow control, functions. What I lack is proficiency. Even more so than CSS, it takes me a lot of concerted effort to read a program and understand what it does.

So, with that background, here’s where I am today in my understanding of Eleventy.

I understand the basic concept of a static site generator: the user provides a directory of input, and a program (Eleventy, in this case) processes it and spits out a website in an output directory. I understand how to use layouts and Nunjuck templates to shape how individual pages look, and I get using partials for reusable code. So far, so good; this is conceptually not that far off from how Hugo works.

After finishing the tutorial, though, and beginning to tinker, I had a lot more questions start to emerge, like:

Wait, just where is any given Nunjuck template pulling its data from? How do I correctly target the data I want?
Can I write reusable code (a partial, a shortcode) that takes one or more input variables? Say, “list all the posts in [given collection], and preface their titles with [given emoji]”.
Can I make categories, or other post taxonomies, in addition to Eleventy’s built-in tags?
How can I build a collection that consists of multiple subsets (say, all watches, reads, and links)?
What’s the functional difference between a partial and a shortcode? When would I use one or the other?
Can I bundle resources for a given page in a subdirectory, similar to Hugo’s page bundles? (I hope so, because that’s how my content is currently organized!)
How do I fetch and use data from a web API? For instance, can I programmatically fetch metadata for a book when I make a new Read post about it?

I’m also finding myself running into my unfamiliarity with organization for a large programmatic project like this. “Wait, should I be making that a partial so I can reuse it?” I don’t know how much flexibility to bake in at this stage. Maybe I shouldn’t worry about that. I can always go back and add flexibility later.

What I’m seeing is that there are two large gaps for me. The first is the aforementioned missing proficiency with JavaScript. The second, and probably the more critical one, is a more acute understanding of how this whole Eleventy engine works. Yes, I know the bird’s-eye view—Markdown and templates go in, HTML comes out—but I want the next step of acuity.

The temptation to “cheat”
#

As I do all of this, I am keenly aware that Brennan, bless him, has already made an Indieweb starter project for 11ty. I could, at any point, jump ship from this rocky learning experience, download that, and start customizing it. And at times, it’s tempting.

But I’m reminding myself that this would put me right back where I was with Hugo and Blowfish. Even though the starter project was made by an experienced designer, and even though it has all the hard work done, it’s not mine. I’m doing this as much for the learning journey as the ownership I’ll have over the outcome.

And besides, I really don’t like how much that starter project relies on Tailwind. Mostly because I don’t know Tailwind, but also, I’m stubborn and weirdly opinionated and don’t like the layer of obscurity that frameworks like Tailwind introduce, with all their functional classes. class="container mx-auto px-4 py-2 hidden md:block just isn’t how I want to write my site, for better or worse.

Learning good practices and becoming opinionated
#

Speaking of opinions, I had already made some opinionated decisions, which I failed to mention in my previous post:

Use minimal (if any) client-side JavaScript: Nathaniel’s “Why your website should work without Javascript” is a nice encapsulation of my reasoning here. I care about the accessibility, speed, security, and ease of development of not using front-end JavaScript.
Build with minimal size in mind: Now, this is not going to be an austere, TTY-inspired site. There will likely be images, because I like pretty things. But I want to be mindful of my resource usage, and aim for smaller and simpler when I can.
Use semantic HTML and selectors: I find semantic markup and styling solutions like SimpleCSS incredibly elegant, so I want to build the site skeleton with that in mind.

Additionally, I’m now building with these opinionated decisions:

Cool URIs don’t change: I have not been good about this in my history of managing my web presence. Oops. But this seems like a perfect opportunity to institute an intentional permalink policy. I’m thinking larger articles will have permalinks at yyyy/mm/title-slug/, and smaller notes will live by default at yyyy/mm/hash, with some variance for specific post types. I’m not sold, though. I’m overthinking this one, trying to find the perfect URL scheme. 🙄
Accessibility!: I knew accessibility was important, of course, but I didn’t quite know where to start. Luckily, the World Wide Web Consortium has an accessibility guide, and the Mozilla Developer Network has one too. It’s a lot to digest, but this will help me plan for accessibility from early on.

Today’s work
#

It is tempting to keep hacking at the current skeleton, but in the interest of building proficiency, I’m going to follow another tutorial. Today it’s going to be the Learn Eleventy course. I found myself browsing through it yesterday anyway, and it seems a bit more developed than fLaMEd’s quick start, so it should give me more practice with some of the areas I’m uncertain about.

And that’s probably enough time writing: once again, back to work.

Resources I used yesterday
#

I wanna build an Eleventy site.

spencer@spencerdub.me (Spencer Dub) — Fri, 19 Jun 2026 12:45:16 -0700

I’m on a long weekend up in Seattle, and I’ve given myself a project: I am going to make the basic skeleton of an Eleventy website before I get home.

Why?
#

I got this site up by choosing an off-the-shelf theme instead of agonizing over making my own. I chose Congo, then later jumped to an upgraded fork, Blowfish, and thought I could be satisfied with a slick, modern, capable theme.

Dear reader, I cannot. When it comes to making my digital home, I am too much of an artisan and hacker at heart. I feel a flutter in my chest every time I see another unique IndieWeb site. This week, it was Brennan’s, but it could just as easily have been Robb’s, or Lizbeth’s, or Ana’s. Each site is a unique expression of what matters to its creator, how they see the world, what they want to share. It’s personal. It’s the part of the Web I want to be part of. Blowfish is more capable than anything I could create right now, but it’s not mine.

Brennan wrote, in the post that introduced me to their site, “The IndieWeb only works if people who believe in it are willing to do the actual work.” Now more than ever, I feel called to do the work toward the things I value. My personal website is only one small facet of that—but it’s a facet nonetheless.

What am I going to make?
#

I know from past experience that I can lose an ungodly amount of time to futzing about with CSS. I know only enough to be dangerous, but not enough to be efficient or organized. In order to sidestep that, I’m setting the expectation for myself that I’m not focusing on CSS here.

Instead, I want to build a basic skeleton for my site. I’m planning to build it with Eleventy rather than Hugo, in part because it seems all the cool IndieWeb folks are using it, but also because it seems it will be even easier for me to wrangle than Hugo. I don’t know Go, but I have at least a passing understanding of some JavaScript basics. Since I’m starting from the ground, part of this project is also to understand how Eleventy works, and that will be easier when I don’t have to also wade through a new language to do so.

So: a front page. Layouts for list pages and entries. RSS feeds. Header and footer.

Honestly, I don’t know how quickly I’ll be able to bang this out. fLaMEd has a guide to getting started with 11ty that looks pretty comprehensive, so it’s possible I’ll finish with lots of time to spare. Should that happen, I’m sure I’ll find some extra credit, like making custom list views for certain post types or setting up WebMentions (despite Wouter’s warnings). We’ll see.

I’m also going to write about the process.

aside: wrangling my foibles
#

My weaknesses and foibles have always accreted like iron shavings on the magnetized surface that is my personal website. I distinctly remember a 2010 post on my old WordPress blog when I valiantly proclaimed I was “reclaiming my blog”. I was freeing myself of the internal critic, you see! I was giving myself permission to post in my voice, about possibly edgy subjects, and to even post short, less-polished pieces instead of careful essays! This was what was going to help me write more, you see!

This was the header image for that post.

It was one of many such attempts. They never lasted.

I have scolded myself and chided myself and said “JUST WRITE!” more times than I can count. I have told myself that this website upgrade, or this declaration of intent, was the key, over and over. The fact remains, wrestling myself into a place where I write and share on my website frequently—despite it being a thing I want to do!—has been an uphill struggle for fifteen-plus years.

I’m in my mid-30’s, and I’m beginning to acknowledge that I have some issues with my attention. I’m not in a place to judge whether they rise to a diagnosable level¹, but they’re undoubtedly present. They swarm around things I care deeply about, pulling in contradictory directions and clouding my vision.

Make it perfectly you, says one. Write, write, write, chants another. Tolerate your imperfections. Don’t publish that, it’s trite. Their droning makes my bones buzz, and I want to escape, I want to bang out a dozen different essays, I want to shout and I want to hide. I want to simultaneously do everything and nothing at all.

It’s 8:35pm. I have an hour and a half until bed. I start a new draft, put a couple sentences in. It’s not right. Nevermind. Another corpse for the pile.

I don’t know if it’s ADHD, but I do know that ADHD and executive functioning issues are not solved by willpower or knowledge, they’re addressed, imperfectly, by systems. And I am trying to build better systems. I don’t yet have the 750 Words diligence, but I try, more days than not, to journal a little bit, to force some ink out of the nib. After I spent all of 2025 letting my home server languish, I organized myself and pushed, and whaddya know, things moved. I try to capture and define my projects so they exist externally to my brain, as more than simply a growing sense of dissatisfaction and inadequacy. I am trying to embrace incrementalism over perfection.

Building this new site is an exercise in these principles. I’m going to define the project and see if, with some diligence and a careful scope, I can actually get something done.

Having said that, I need to stop writing and start making. Let’s see what I can create by day’s end.

Usually, people say this because they’re not mental health professionals, but, uh… ↩︎

Web Design on Key and Card

Building an Eleventy Site Skeleton: Day 3 Report

Building an Eleventy Site Skeleton: Day 2 Report

Building an Eleventy Site Skeleton: Day 1 Report

What I do and don’t understand #

The temptation to “cheat” #

Learning good practices and becoming opinionated #

Today’s work #

Resources I used yesterday #