All Collections

Technical Tutorials

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

26 posts
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

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!

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

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

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?

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

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

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!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

A dive into how this site is built, why it exists, and the philosophy behind owning your corner of the web.

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

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