6holeocarina.com: a full-stack static site plus a sovereign email machine, on (almost entirely) free infrastructure. This page is the soup-to-nuts technical writeup for people who like to know how things are built.
The site#
Static-first architecture#
~124 pages of ocarina sheet-music tablature, rebuilt from WordPress as a pure static site. The stack is deliberately minimal: Hugo Extended (with the Blowfish theme) is the only build tool - no Node, no npm, no framework, no bundler config. CSS (Dart Sass) and JS (esbuild) are handled by Hugo’s built-ins, with subresource integrity hashes on every bundled script. Every song’s tab is a real semantic HTML table in the page source (see any song page with JavaScript off), so the content is fully readable without scripts and fully visible to crawlers. JavaScript is progressive enhancement only: hover a note and it plays.
Sound with zero audio files#
All audio is synthesized in-browser with the Web Audio API (an alto ocarina voice with a breathy fade) - the site ships zero audio files. Finger charts are SVG, generated from a single data file that is the one source of truth for the instrument’s note ranges and fingerings.
The tablature editor#
There’s also a pure-JS tablature editor: click notes, rests, and line breaks to compose, get a shareable URL code and the exact HTML table used by the site’s own pages.
WordPress migration with URL parity#
URL parity with the old WordPress site is treated as an invariant - every song kept its exact URL at cutover, so nothing 404’d and no link equity was lost.
Performance#
A perfect Lighthouse score#
PageSpeed Insights scores the live site 100 in all four categories - Performance, Accessibility, Best Practices, and SEO (desktop, measured 2026-07-16). That is not an optimization pass bolted on at the end; it falls out of the architecture: static HTML with no framework runtime, no render-blocking third-party scripts, SVG instead of images, synthesized sound instead of audio files, and a theme whose CSS is precompiled at build time. Run the test yourself from the link above - it re-measures the live site on every run.
SEO and AI search#
Structured data and search#
JSON-LD (MusicComposition and site schema) on every page, native sitemap, taxonomy-driven category pages, and client-side Fuse.js search over a build-generated JSON index.
Content that stays human#
Each song page carries a unique human-written intro (fact-grounded, delimited by markers so tooling preserves it) and an auto-generated related-songs block driven by the taxonomy - never hand-maintained lists.
llms.txt for AI crawlers#
For AI crawlers, /llms.txt is a first-class Hugo output format rendered from the same content at build time (never hand-edited), paired with an AI-friendly robots policy. The convention is documented at llmstxt.org.
Security headers#
A hash-based Content Security Policy#
Enforced CSP with no unsafe-inline for scripts: the two inline theme scripts are allowed by SHA-256 hash, with dual hashes per script because hugo --minify rewrites the bytes (one hash for dev builds, one for production). The policy was proven under Report-Only with zero violations before enforcement, and an e2e test pins it.
The rest of the header set#
Plus HSTS, nosniff, frame protections, strict referrer policy, and a deny-by-default Permissions-Policy.
Accessibility#
WCAG 2.1 AA as an invariant#
WCAG 2.1 AA as a binding requirement, not a polish item: JS-off tablature, full keyboard operability with visible focus, ARIA live regions for async results, labeled controls everywhere, and a published accessibility statement.
Automated verification#
Verified by axe-core running inside a 105-test Playwright e2e suite (plus a route smoke checker) covering the editor, playback, forms, CSP, and print styles.
The email machine#
Multi-tenant edge architecture#
The contact form and double-opt-in newsletter run on a shared multi-tenant Cloudflare Worker + D1 (free tier) at a neutral host, keyed by site_id with a fail-closed tenant registry - an unknown tenant can’t write rows or send mail under anyone’s brand.
Layered anti-abuse#
Per-tenant Turnstile, honeypot, hardened RFC 5321 email validation, per-IP submit caps, per-address resend cooldowns, and a lifetime send cap - all fail-closed, all returning byte-identical neutral responses so nothing is enumerable. Every subscriber row carries a consent record (opt-in IP + timestamps).
Scanner-safe consent#
Confirm and unsubscribe links are scanner-safe: the GET renders an inert page and only a POST changes state, so Outlook SafeLinks-style prefetching can’t silently confirm or unsubscribe anyone.
Deliverability and compliance#
Authenticated sending#
Sending is Amazon SES v2, SigV4-signed from the Worker with a send-only IAM key, structured Content.Simple (no hand-built MIME, so header injection is structurally impossible). The sending identity is a dedicated subdomain with Easy DKIM, a custom MAIL FROM for aligned SPF, and a DMARC ramp plan - the apex MX is never touched (real mailboxes live elsewhere).
Legal compliance in every message#
Every subscriber email is multipart text+HTML with RFC 8058 one-click unsubscribe headers (List-Unsubscribe-Post), List-Id, a visible unsubscribe link, and the CAN-SPAM postal address in both body parts.
Branded tracking#
Open/click tracking runs through a branded first-party domain instead of awstrack.me - a Cloudflare-proxied CNAME terminating TLS at the edge on the free Universal SSL cert (hard-won rule: the tracking host must be exactly one label deep, because free Universal SSL only covers *.domain).
The feedback loop#
Verified webhooks#
SES Bounce and Complaint events publish to an SNS topic with an HTTPS subscription into the Worker. The endpoint verifies the SNS message signature in WebCrypto - certificate fetched only from a host-pinned sns.<region>.amazonaws.com URL, SPKI extracted from the X.509 DER by hand (validated byte-identical against openssl), canonical string rebuilt and verified - then requires the signed TopicArn to match exactly, because a valid signature only proves “AWS sent this,” not “my topic sent this.”
Suppression that cannot diverge#
Hard bounces and complaints flip D1 rows to terminal suppression statuses that the subscribe path refuses to resurrect, so the local list and SES suppression can never diverge. Proven live with the SES mailbox simulator: event to row-flip in about one second.
Cost#
Hosting is Netlify’s free tier; DNS, Workers, D1, Turnstile, and the tracking edge are Cloudflare’s free tier; SES is pay-per-use (about $0.10 per thousand emails). The entire stack - site, CDN, forms, database, bot defense, and a legally compliant mailing system with its own bounce infrastructure - runs for pennies a month, with every list and every byte of content exportable and owned outright.
What this demonstrates#
An honest inventory of the domains of work on this page, mapped to evidence rather than resume words.
Web platform fundamentals#
Progressive enhancement done for real: semantic HTML as the content layer, JavaScript strictly additive, Web Audio synthesis instead of media files, SVG generated from a single data file. The whole site is an argument for this discipline.
Security engineering#
Not headers as a checklist: a hash-based CSP with dual minify/dev hashes, fail-closed design as a reflex (unknown tenant, missing secret, unreadable rate counter, empty topic ARN - everything denies), non-enumerable responses, structural injection prevention (structured SES payloads, no raw MIME), and webhook verification that knows a valid AWS signature is not authorization - the signed topic ARN must also match, or any AWS account could deliver validly signed forgeries. Most production SNS consumers get that last one wrong.
Email deliverability#
A niche discipline most full-stack developers never touch: DKIM/SPF alignment via custom MAIL FROM, a staged DMARC ramp, RFC 8058 one-click unsubscribe, branded tracking domains and their TLS constraints, bounce/complaint feedback loops, suppression-state modeling, and spam-scorer forensics (a third-party tracking domain measurably cost 1.6 spam points before it was replaced).
Legal and regulatory compliance as engineering#
CAN-SPAM (postal address, visible opt-out, timing), consent records with IP and timestamps, double opt-in as the consent basis, privacy-policy processor disclosure, a documented erasure path, and WCAG as a legal target. Translating statutes into invariants and test assertions is its own skill.
Accessibility#
Keyboard operability with no traps, ARIA live regions, reduced-motion handling, notes named for screen readers, and scanner-safe consent flows - all pinned by automated axe-core and keyboard tests so a regression cannot ship quietly. Held as a binding requirement, not a nicety.
Infrastructure and platform architecture#
A multi-tenant SaaS shape on free-tier primitives: edge Workers, D1, a tenant registry with zero brand strings in the engine, one shared event topic with tag-based tenant resolution. The constraint “free tier only” was treated as a design input - the one-label tracking-domain rule exists precisely because of what the free Universal SSL certificate covers.
SEO, classic and AI-era#
URL parity as a migration invariant, JSON-LD, taxonomy-driven internal linking, sitemaps with dates from real Git history, llms.txt as a build output, and long-tail targeting built around the exact searches real people type.
Operations and process discipline#
Everything is a plan with phases, acceptance criteria, exit gates, and independent verification; every completion is recorded; runbooks capture the actual button-presses including the failures, so another engineer could replicate the system from cold. Building is common; leaving a trail like that is not.
What it demonstrates less#
Honesty requires the other column: visual and interaction design (the aesthetic is deliberately the theme’s), high-scale distributed systems (the database counting approach is fine because volume is tiny, and the docs say so), native and mobile apps, and machine-learning engineering. The rare part is the intersection above - security depth, deliverability specialization, and documented operational rigor in one build.