All Collections

Technical Tutorials

Step-by-step guides for building things on the web and working with developer tools.

38 posts
Vintage AT&T terminal and keyboard on a wood desk, displaying a green-phosphor screen with the 'SDF Public Access UNIX System' menu titled 'Hysterical Unix Systems,' listing historical UNIX versions from UNICS (1969) through 2.11 BSD (1986) with a 'Your choice?' prompt below.

A Love Letter to the Super Dimension Fortress

#291

I've finally became an ARPA member of SDF, a non-profit public-access UNIX system running continuously since 1987. I give a history from Ted Uhlemann's 300-baud Apple IIe BBS to today's NetBSD network of DEC Alphas and Opterons; a tour of the shell, gopher, and gemini services; how to join, plus two hands-on bonuses: writing a flat-file Perl CGI guestbook and making a site Dillo-compatible.
An illustration of a vintage black-and-white manual typewriter with a blank sheet of paper loaded in the carriage. Above the typewriter, text reads 'Static Site Generators for Beginners'. Below the typewriter, text reads 'by Brennan Kenneth Brown (brennan.day)'

Static Site Generators for Beginners

#290

Written for a 32-bit Café thread asking where to even begin with static-site generators. I go over the free resources I'd learn first (and why hand-rolled HTML beats an SSG for your very first site), a plain-language glossary of the jargon docs never define, a brief history from HSC and Movable Type to Jekyll, why git gets recommended everywhere, my own beginner starters, and tiny alternatives like barf, bashblog, and kiki.
A spacecraft photographed from a companion capsule during orbital rendezvous, its white and black cylindrical body lit against the blue curve of Earth's atmosphere. The photographing craft's window frame cuts across the upper left corner, and thin antenna wires trail from the target vehicle's rear section into the black of space.

Creating a Blog in Gemini://

#288

Creating your own corner of Geminispace: why you'd want to blog on a protocol with no JavaScript, no CSS, and no AI slop; where to host a capsule (SmolPub, the Tildeverse, flounder, Gemcities); how the community's gemlog conventions work; and the surprising social life of Gemini BBS, Station, and Astrobotany. Plus ASCII art, CGI scripting, and every gemini:// link I've found worth keeping.
An archival photograph of a warehouse shelving unit divided into rows of numbered bins (125 through 739), each holding stacked metal bearings, bushings, and cylindrical machine parts. Many items have small paper tags with handwritten part numbers. The photo's colour has been altered into a diagonal rainbow cast, with magenta and pink across the upper left, shifting to blue in the upper right, and fading to yellow-green at the lower left. A partially legible cursive signature or stamp appears in the bottom right corner.

Oldnets and Altnets: A Guide to Building a Low-Spec Daily Internet Out of Gemini, Gopher, and Terminal Tools

#281

Reacting to the Omarchy and DigitalOcean news, I set out a curated low-spec, text-first alternative to the modern web: Gemini, Gopher, Spartan, Lynx-friendly sites, terminal readers, public Unix communities, and peer-to-peer networks like Yggdrasil, I2P, and Hyphanet.
A 17th-century painting of a man with long wavy blond hair, wearing a flowing blue-green robe, standing at a table and reaching up to touch a celestial globe. The table is draped in a richly patterned blue, green, and gold cloth. An open book and other instruments rest nearby. Behind him hangs a framed painting, and on the wall above the globe is a diagram inscribed 'Meer. MDCLXXIII.' Soft light enters from a leaded window at left.

More Mindful Web Development

#279

Yet another technical audit of brennan.day, this time using the Safi Studio Scanner, covering fixes for duplicate <h1> headings, meta descriptions, image dimensions, JSON-LD organization data, render-blocking scripts, and a switch from IndieAuth to IndieLogin—plus what I left alone.
Northern Renaissance oil painting of an elderly bearded scholar in a red robe and blue cap, seated at a cluttered desk, resting his head on one hand while pointing at a human skull with the other. The desk holds an open illuminated manuscript, a book labeled 'Biblia Greca,' a Hebrew scroll, an hourglass, a candle, spectacles, and a penknife. A red plaque above reads 'COGITA MORI' (contemplate death). Through an open window behind him, a landscape unfolds with a hilltop castle, a village, and small figures on a road.

A Guide to Becoming a Rogue Scholar

#261 CC BY

I've been weighing grad school against continuing my own open-access publication, so I wrote a guide to becoming a 'Rogue Scholar' using ORCID, citation metadata, issue numbers, print CSS, and Wayback Machine archiving to try to make my static Eleventy site as citable, permanent, and discoverable as institutional scholarship.
Two aircrew members wearing helmets, headsets, and oxygen masks are seated in a dimly lit military aircraft cockpit. The instrument panel between them glows with green multi-function displays, rows of analog engine gauges, and backlit switches, while light is visible through the windscreen ahead.

Advanced Webweaving: Auditing Against Specification.Website

#258

I ran brennan.day against The Website Specification's 140-item checklist covering foundations, SEO, accessibility, security, performance, privacy, and resilience. Notes on a broken web manifest I'd never noticed, why I don't have cookie consent banners, CSP debugging with third-party services, service worker CORS issues, a bunch of small improvements, and the list of things I didn't fix.
Pen-and-ink illustration titled 'November,' signed K. and W. Two crosshatched hills frame a valley, with a line of birds flying across a sky rendered in horizontal wavy strokes, growing smaller as they recede into the distance. A cluster of dark, blocky shapes sits in the middle distance where the hills meet, with a pale diagonal gap suggesting mist or a break in the land.

I Would Have Written a Shorter Blog Post, But I Didn’t Have the Time: Creating a WriterDeck

#252

On the KISS principle and Pascal's apology for long letters, the cultural shift away from minimalism, and the growing trend of writer decks. A technical guide to creating a distraction-free writing environment by removing the desktop environment entirely and using terminal-only Linux distributions like Debian, Ubuntu Server, Arch, or Alpine. There's so much you can do in the terminal! There's applications for file management (ranger), web browsing (Lynx, w3m), markdown reading (glow, mdcat), email (Alpine, NeoMutt), IRC (WeeChat, Irssi), music (cmus, MPD), RSS (Newsboat), and writing tools (Micro, WordGrinder), plus document management via git or rsync cron jobs... oh, this is kind of long-winded, isn't it?
Screenshot of the brennan.click homepage, a dark-themed digital garden site with navigation links (Home, About, Legend, Main Site, Source). The page introduces the site as 'A wiki-linked digital commonplace book, a sister site to brennan.day,' followed by a blockquote from Maggie Appleton defining a digital garden as an evolving, non-chronological collection of linked, unpolished notes. Below are content sections with entries dated 2026-07-24: a Quote section ('On Writing Daily'), a Bookmarks section (URLminder, Foam, Eleventy Interlinker, Beeminder), and the start of a Notes section (Zettelkasten, Values).

Creating a Digital Garden in 11ty: Tracking My Daily Word Count with URLminder

#238

I decided to build brennan.click, a wiki-linked digital commonplace book in Eleventy, with auto-generated stubs created with eleventy-plugin-interlinker, pure-CSS hover transclusion and footnotes with no JavaScript, and a plain-text /urlminder.txt feed that drives a Beeminder goal.
Hand-painted watercolor illustration titled 'Matrimony as it should be — Solemnization.' Two wooden ladders lean together to form an A-frame or peak shape, planted in a grassy hillside split by an orange dirt path. The ladders are entwined with vines bearing yellow round flowers, green berries, a pink wild rose with red rosebuds, and small blue star-shaped flowers. Flowing cursive text fills the space on either side of the ladders. On the left: 'Love increasing, Cure unceasing, To be pleasing, Will secure, Earth's greatest blessing, Domestic Happiness.' On the right: 'Acceptation, Approbation, Soft persuasion, Hesitation, Declaration, Admiration.' A small museum accession number, '1961-105-71,' appears in the bottom right corner.

Softcore First, Hardcore Eventually: A Ladder for the IndieWeb

#233

Responding to Adam Newbold's 'Hardcore IndieWeb' guide, I argue for a ladder approach to joining the IndieWeb. Rather than choosing between easy platforms and full technical independence, people should climb rungs progressively. Start with BearBlog or Pika, learning hand-coded HTML, then move to static site generators when ready. This applies progressive disclosure to onboarding, avoiding the curse of knowledge that makes experts skip beginner-friendly steps.
Victorian-style chromolithograph advertisement featuring an oversized ornate gold pocket watch with a white face, black Roman numerals, and a small seconds subdial, the hands pointing to just past twelve. Four cherubs surround the watch: one on the left trails a long red ribbon, one perches on the upper right rim, and two more recline together at the base draped in red fabric among ivy and roses. Ivy vines drape over the watch's crown, and four dark shield-shaped badges around the rim read 'Fine Diamonds,' 'Reliable Watches,' 'Artistic Jewelry,' and 'Standard Silverware.' The scene sits against a teal, cloud-streaked sky, with 'Aston & Hall Sc.' credited in the lower right corner.

300 Minutes a Month: Cutting My Eleventy Netlify Build Time in Half

#229

A sequel to my Eleventy build post: this time the bottleneck wasn't the build tool, it was the hosting bill. Notes on caching webmentions and guestbook fetches, killing a dead Discord webhook, nearly breaking my JSON feed, and a git error I still don't have an answer for.
Aerial photo of a triangular street mural spelling FREEDOM in navy blue letters, painted on a road or court marked with white lines and scattered with fallen autumn leaves. The letters hang like marionettes from strings held by pale puppeteer hands at the top, while a dark-skinned hand holds scissors poised to cut the strings. Faded background text reads words like HATE, FEAR, LIES, DOUBT, MURDER, DECEPTION, and PRIDE. Rows of raised human hands in varied skin tones reach up from the bottom of the triangle toward the letters. The mural is signed 'G. Johnson' in the bottom right corner.

A Full Guide to Properly Delete Corporate Social Media Accounts

#227

Facebook, Messenger, Instagram, WhatsApp, Threads, X, Reddit, Discord. Eight platforms, eight different deletion policies. A full technical walkthrough of what 'delete' actually means on each one, the prep work nobody tells you to do first, and the human-side work the documentation doesn't mention.
View of Earth's curved horizon from space, showing the atmosphere's blue gradient fading into black space. A rocket or space shuttle is climbing away from Earth's surface, leaving a bright white exhaust trail, with clouds scattered across the blue ocean below.

Publishing My Eleventy Blog to the ATmosphere with Standard.site

#221

A walkthrough of how I wired up Standard.site AT Protocol lexicons into this 11ty blog: from writing a custom publish script to migrating to Sequoia, with code for the link tags, and handle verification.
A grid chart of 74 stylized sigils for the 72 demons of the Ars Goetia (Lesser Key of Solomon), each rendered in a thin geometric line-art style with crosses, circles, and swirling flourishes. The sigils are arranged in rows of ten, colored in a gradient from coral/red at top-left through pink, purple, and blue in the upper rows, transitioning to green, yellow, and orange tones in the lower rows. Each symbol is labeled with its number and demon name(s), including alternate name spellings, running in traditional order from 1. Bael through 72. Andromalius.

Blogging with Magic Unicode: Simple Doesn't Have to Mean Boring!

#219

You don't need bloat. You can use CSS variables and Unicode symbols to add visual personality to your personal website while keeping it minimal, accessible, and fast-loading. Includes a reference of symbol sets (celestial, elemental, occult, card suits, chess, zodiac, and more) with colour examples using the Gruvbox palette.
Close-up of an old handwritten ledger book open to a page of cursive names and columns of numbers in blue ink, on ruled accounting paper with red and blue grid lines, photographed at an angle with shallow depth of field.

Every Commit A Sentence: Git Commit Messages for Bloggers

#211

I had 448 `feat:` commits and 417 `fix:` commits. Nearly the same count, for wildly different kinds of work. Here's why conventional commits were never designed for a writer's blog, and the eleven-type system I built to replace them.
Hand-colored 19th-century political cartoon (labeled 'N° 1') satirizing the Catholic Emancipation debate in Ireland/Britain. A crowded room of men in formal coats and a few barristers in robes sit and stand around tables, gesturing animatedly. Eleven numbered speech balloons rise above the group, debating a 'cat let out of the bag' metaphor for a doctor's (likely a Catholic Board spokesman's) admission about an oath against subverting the Protestant Church, with characters worrying that 'Orangemen' will seize on the remark and invoking memories of 1798. In the upper right corner stands a harp topped with a cross beside a 'Senatorial Catholic Board' placard. At far right, a well-dressed man sits in a red armchair holding a scroll labeled with a list of penal laws against Protestants. At far left, on an elevated wooden platform, two onlookers labeled 'Orange Boven' watch the scene and comment from above.

How Webmentions Work on brennan.day

#207

A tutorial and walkthrough of how I implemented webmentions on my site, from setup to display, including webmention.io integration, Eleventy filters, CSS styling, and Bridgy for sending.
A stylized illustration of a wheelchair racer in motion, rendered in neon white line art against a bold graphic background of sweeping bands in black, purple, violet, and blue. The athlete leans forward aggressively over a racing wheelchair, with speed lines in pink, yellow, cyan, and white suggesting rapid forward movement. A small speaker with signal waves extends from the chair. The aesthetic evokes 1980s sports graphic design.

Why Make Your Website Accessible, Anyways?

#201

Web accessibility isn't compliance theatre or checking off a list. It's about designing for everyone. Exploring the curb cut effect, why disability is more common than we think, and practical steps to make your website usable by as many people as possible.
A server room with multiple open rack cabinets filled with densely packed hardware, illuminated by dramatic coloured lighting: yellow on the left, pink and green in the centre, and blue on the right. Status indicator LEDs in amber, green, and red dot the equipment.

Homelab For the Beginner: You Can Self-host Your Own Server on $50 Hardware

#194

A beginner-friendly guide to building your own homelab on inexpensive hardware. Covers finding old computers, setting up Linux, SSH, Docker, and self-hosting services like password managers, RSS readers, and your own Fediverse instance. Digital sovereignty doesn't require expensive equipment.
A historical star chart depicting the constellation Gemini, rendered as an engraving in the style of Johannes Hevelius or a similar 17th–18th century celestial atlas. The twins Castor and Pollux are illustrated as two nude male figures facing one another, adorned with floral wreaths and flowing drapery. Surrounding constellations are labeled in Latin, including Auriga, Lynx, Cancer, Orion, Monoceros, Canis Minor, and Hydra. Stars are marked with small ringed symbols along the ecliptic line. A watermark in the lower right reads 'Best viewed on the Gemini protocol' alongside the Gemini browser logo.

Gemini, Gophers, and Fingers. Oh My! Alternative Internets Beyond HTTPS

#193

Finger from 1971, Gopher from 1991, and Gemini from 2019. These protocols offer decentralized, terminal-based alternatives to the modern web. The small web's is in a renaissance. On the solarpunk philosophy of intentional technology, and how these protocols meet you where you are, whether you're on a machine from 2005 or just tired of Chrome's monoculture.
Screenshot of the writer-cli homepage. The page header reads 'WRITER-CLI' followed by the headline 'Write from your terminal. Publish with one command.' A subheading describes it as a command-line tool for bloggers with a static site who want to open a terminal, write something, and have it live on the Internet. Below is a dark install command: curl -fsSL https://raw.githubusercontent.com/brennanbrown/writer-cli/main/INSTALL.sh | bash, with a 'copy' button. A note below states it installs to ~/.local/bin/ and links to the installer source. Navigation links at the top read: home, guide, reference, source, GitHub.

Introducing writer-cli: a bash tool I built from scratch to blog in the terminal!

#192

After finding the tildeverse and the Tilde.town feels engine, I decided to build my own simple command-line tool for blogging that handles the full lifecycle of a blog post (creation, editing, building, and git push). A walkthrough of the design decisions, the modular architecture, and the tradeoffs of writing 700 lines of plain bash.
An impressionistic painting of a barefoot woman in a flowing white dress hanging laundry on a rooftop clothesline in a sunlit city. White sheets billow in the breeze around her, with one purple garment draped over the line. Warm afternoon light casts long shadows across the rooftop, while brick buildings and smokestacks fade into the hazy urban background.

Cleaning House: Refactoring My Eleventy Config Into Modules

#185

How I decomposed an 866-line .eleventy.js monolith into four focused modules, fixed some lurking bugs, and eliminated dead CSS and dead dependencies along the way.
Three jockeys race side by side on horseback in a flat racing scene rendered in a bold graphic illustration style. The horses—one dark, one white, one dark bay—surge forward at full gallop against a vivid coral-red background. The jockeys lean low over their mounts' necks, dressed in racing silks and caps. The palette is limited to deep teal-black, white, gold, and red, the image has the feel of a vintage screen-print/linocut poster.

I Made My Eleventy Build 5× Faster with Five Changes

#182

A walkthrough of how I audited my 11ty build benchmarks and cut cold-start time from 14 seconds down to 2.6 seconds by caching two custom filters and swapping out a bare network fetch.
The Fool tarot card from the Rider-Waite deck, numbered 0. A young figure in an ornate, flower-patterned tunic stands at the edge of a rocky cliff, face tilted upward toward a bright sun in the upper right corner. They carry a white rose in one outstretched hand and a wooden staff over their shoulder with a small sack tied to the end. A white dog leaps up at their heels. The background is a flat yellow sky above snow-capped mountains. The card is set against a blurred, blue-green forest background. The title 'THE FOOL.' appears in a banner at the bottom.

The Fool's Autopsy

#149

A review of the prank I pulled yesterday, in addition to serious discourse about being silly, including thoughts on the role and importance of satire and literacy. I also share a detailed technical breakdown of the scripts that I added to the prank as well.
Vintage linen postcard reading 'Shenandoah Valley — Land of Luscious Apples, VA.'' A comically oversized red apple, rendered in the exaggerated style typical of mid-20th century novelty postcards, dominates the center of the image against a background of pink-blossoming apple trees under a blue sky with white clouds. A handwritten number '89303' appears in the upper right corner.

Downgrading to macOS Catalina: A Sermon on Obsolescence

#138

A complete step-by-step tutorial for creating a bootable Catalina USB installer using mist-cli on modern macOS in order to downgrade an Early 2015 MacBook Pro from macOS Monterey to Catalina. Accidentally also a philosophical look at planned obsolescence, e-waste, and corporate control over hardware lifespan.
Screenshot of the JavaScript file (main.js) open in a code editor, showing a function called initCopyButtons that adds 'Copy' buttons to code blocks on a webpage. The file is part of the brennan.day 11ty project, visible in the left-hand file tree. The code targets pre and code elements, creates button elements with clipboard functionality, and includes a fallback for older browsers using execCommand. The status bar shows the file was last committed by Brennan Kenneth Brown.

Building brennan.day Part Two: IndieWeb, New Features, and Three Months of Iterations

#130

What have I added to my site since I started in December? Quality-of-life improvements, new pages, interesting features, and of course, easter eggs! When you add a little each day, it really adds up.
Two men carrying a dark green couch across a street in a tropical urban setting with palm trees. The couch has 'THIS IS STOLEN' written on it in large white hand-painted letters. Background shows commercial buildings, power lines, and vehicles on what appears to be a sunny day.

My Malware Story Gets Stolen; Yet Another Argument for the IndieWeb

#112

A few days after writing about a weird malware campaign, I discovered that half a dozen cybersecurity news outlets had picked up the story. They now outrank me on Google. A metacommentary on the state of internet journalism, attribution, and what it says that a netsec industry has to rely on amateurs to break stories.
Screenshot of a tags page from brennan.day website showing an alphabetically organized tag browsing interface. The page has a dark background with cream-colored text. At the top is the site logo 'brennan.day' with navigation menu items for Now, About, Pages, Contact, and Search. Below the 'All Tags' heading is explanatory text and a 'Jump to Letter' navigation bar with buttons for letters A through W. The page displays tags grouped by letter (A, B, and C visible), with each tag showing the number of associated posts in parentheses.

Creating an Alphabetical Tag Page feat. Nunjucks Pitfalls

#90

I transformed a messy tag list into an organized alphabetical sections, and there were a surprising amount of gotchas I encountered along the way.
A simple blue line drawing of three birds overlaid on a serene forest clearing. The background shows birch trees framing a sunlit meadow with wildflowers, ferns, and mushrooms growing in lush green grass.

twtxt: Simple, Decentralized Microblogging with status.lol

#89

I set up an effortless sync between my status.lol updates and a twtxt feed, creating a bridge between IndieWeb tools and classic decentralized microblogging.
A quill pen rests upright in an open black ink bottle on a wooden table, with a handwritten letter on parchment paper lying blurred in the background.

Posting to Your Static Site with Quill and Micropub

#83

After building an IndieAuth comment system, I wanted to complete the loop by posting content to my site from an external client. Here's how I implemented a Micropub endpoint for my static site using Quill as the client.
A terminal window showing the Lynx web browser displaying a text-only version of a website, with ASCII art and links numbered for keyboard navigation.

Respecting the No-JS Choice: Making Your Site Work for Everyone

#82

Gracefully degrading my site for no JavaScript, including the CSS-based .no-js approach, testing with Lynx, and creating an informative experience for all users.
Google Lighthouse performance report showing a score of 83 out of 100, with metrics including First Contentful Paint at 2.6 seconds, Largest Contentful Paint at 2.8 seconds, Total Blocking Time at 30 milliseconds, Cumulative Layout Shift at 0.192, and Speed Index at 3.0 seconds.

From 65 to 83: Attempts at Performance Optimization

#80

A humble look into the performance optimizations boosting my Lighthouse score from 65 to 83, including critical CSS, layout shift fixes, and image optimization while maintaining the site's design and user experience.
An animated GIF of my site's post graph with clickable links and hover tooltips showing article titles.

Extending the Post Graph Plugin: Adding Clickable Links and Tooltips

#79

A technical walkthrough of how I extended the eleventy-plugin-post-graph to add clickable links and hover tooltips showing article titles.
Black coffee mug on a desk displaying white text that reads 'COMMENTS HAVE BEEN DISABLED' in a playful handwritten font. The mug sits in front of a laptop keyboard with a monitor visible in the background, creating a typical home office workspace setting.

Building an IndieAuth Comment System for Your Static Site

#77

A journey through authentication, CORS issues, and the joy of owning your comments! Learn how to build a comment system for your static site using IndieAuth and Netlify Functions, storing the comments in your git repository.
The encoded letter of Gabriel Luetz d Aramon after 1546, with partial deciphering. An example of a commonplace book.

auld lang syne: The Commonplace (micro)Log

#73

A simple gratitude journal online, with media tracking and Beeminder integration. Yes, yet another 11ty project technical write-up, but I promise you'll learn something.
A retro Windows 95-style desktop screenshot showing three open windows. The center window titled 'NeoCities 11ty Converter' features a cheerful cartoon orange tabby cat wearing a yellow hard hat and holding a wrench and paintbrush.

Deploying An Eleventy Site to NeoCities with GitLab CI/CD

#72

A guide to automatically deploying your Eleventy static site to NeoCities using GitLab CI/CD, including authentication, error handling, and optimizations.
Interior view of a computer facility at NASA's Lewis Research Center showing rows of 1990s-era workstations and servers. The room features multiple beige computer towers and CRT monitors displaying various graphics including the NASA logo, Earth imagery, and scientific visualizations. Overhead signs identify the 'LACE Lewis Advanced Cluster Environment' and 'IBM RISC Cluster' systems.

Why I'm not a Full-stack Dev

#71

The Internet should be a place where ideas can live and spread without people extracting rent at every turn. Where an emerging nonprofit can publish their mission statement without paying Squarespace $300/year. Where a poet can share their work without feeding it into Meta's engagement.
A screenshot of the Gruvbox color palette

Building brennan.day Part One: Design, Rainbows, and Accessibility

#69

A dive into how this site is built, why it exists, and the philosophy behind owning your corner of the web.
Open Graph image for 'Bring Back the 90's Guestbook with JAMstack: How I Added Dynamic Comments to My Static 11ty Site' with description: 'Reviving the classic guestbook for a static site using Netlify Forms and serverless functions, with lessons on distributed systems and race conditions.'. Features a rainbow colour bar at the top, a fortune cat doodle on the right, title and description text on the left, and attribution 'Written by Brennan Kenneth Brown on Brennan.day' at the bottom.

Bring Back the 90's Guestbook with JAMstack: How I Added Dynamic Comments to My Static 11ty Site

#64

Reviving the classic guestbook for a static site using Netlify Forms and serverless functions, with lessons on distributed systems and race conditions.
↑ TOP