1. The spark / the initial need
The trigger. Friday evening, May 29, 2026, dinner with friends. I'm talking about what I do with AI — and since I'd told the same story at lunch that same day, I figured it was time to have one single place to show it all, instead of re-explaining it every time. Saturday morning, I launch the site. One thing leads to another and ideas go live almost immediately: journal, glossary, tags, search, dark mode, AI Watch page, bot… a solid thing shipped in ~2 days.
The underlying need: the site already had a rich journal — 43 entries — but little evergreen content. A journal lives in the moment and ages fast. What was missing was content that holds authority over time: readable by a busy human, and citable by LLMs (the famous GEO, Generative Engine Optimization — being referenced by AIs when they answer).
Two drivers, openly admitted:
- Centralizing my AI notes in one clean place that doesn't get lost in bookmarks and screenshots.
- Having a public showcase in my name, shareable — and in the process, proving that a non-developer can ship and run a full site with Claude Code.
Target audience: merchants / business owners who get it fast, without excluding beginners.
2. The idea → the scope (decisions, rejected alternatives)
The stack choice was settled early, partly on the AI's advice when I described the need. Three non-negotiable principles:
- Simplicity / zero build. No toolchain, no
npm, no compilation step to maintain. Open a.html, it works. - Free + simple hosting. GitHub Pages: no server, deployment on push (~1 min). Rejected: Vercel/Netlify (overkill here), a VPS (too heavy).
- No framework. Rejected: React / Next / Astro / a static generator — overkill and maintenance debt for a non-dev.
The structural decisions for this session, and what we rejected each time:
- Evergreen guides — 1 page = 1 big question, 3 levels ("In 30s" → visual body → "Go deeper"), for a URL that builds authority per question. Rejected: separate beginner/advanced pages, which dilute authority.
- Visuals and logos coded in inline HTML/CSS/SVG — zero heavy images, zero dependencies. Rejected: chart libraries, official logo files.
- Cluster on the landing (Understand / Tool up / Method / Decide) — thematic authority. Rejected: multiplying nav sections.
- Dark mode via CSS tokens (
[data-theme]) + Auto/Light/Dark toggle, warm anthracite background, to keep the visual DNA intact. Rejected: a cold neutral gray or pure black. - Anti-FOUC: an inline script in the
<head>(~3 lines, the only blocking JS tolerated), to avoid the theme flash on load. - Verified facts, never model version numbers that go stale — to stay evergreen.
- Custom favicon / logo inspired by Claude, integrated into my art direction, for global visual consistency.
3. The "vibe coding": how it came together, step by step
Main tool: Claude Code, in terminal and on the web/app, writing, modifying, and committing directly to the repo. My loop: visual preview in the browser → I ask for adjustments → re-render, until I'm happy.
- Reading the repo + establishing conventions (templates, tags, cache-busting).
- Launching
/guides/with Guide #1 (AI/LLM) and its 3 coded visuals. - Production in batches: guides #2→#4, then #5→#11, then #12, then #13→#15 (SEO/GEO-focused).
- Clustering the landing page into 4 families.
- Micro SEO optimizations (author entity
@id,HowTo). - Header/footer redesign (social links, LinkedIn + email contact,
SiteNavigationElement). - Dark mode: demo on the homepage → validation → rollout across 72 pages → finishing touches.
- Glossary: adding the 9 major AI players.
4. The stack + tools
- Claude Code — the build agent (writing + code + commits).
- Vanilla HTML / CSS / JS — zero framework, a single
style.css(~750 lines). - GitHub — version control + source of truth.
- GitHub Pages — hosting + auto-deployment on every push (~1 min). A
.nojekyllto serve static files as-is. - schema.org JSON-LD (
TechArticle,FAQPage,HowTo,BreadcrumbList,SiteNavigationElement,Person) +llms.txt/llms-full.txt— the GEO layer.
5. The headaches (what broke and how we fixed it)
- Theme flash (FOUC). On load, the page would flicker light before going dark. → Fixed with a ~3-line inline script in the
<head>, the only blocking JS I tolerate, which applies the theme before the first render. - Stubborn iOS cache. Safari/iOS kept serving old CSS/JS. → Disciplined cache-busting (
?v=…) on every asset change. - Two sessions in parallel on
main. Multiple sessions pushing to the same branch → collision risk. → Systematic resync (fetch+ ff/rebase) before every push, and idempotent scripts. - Never touch the vault. Hard rule:
coffre.js/vault.json(AES) are untouchable. Dark mode was deliberately not applied to the vault to avoid breaking it. Respected.
6. Time spent (real) and tokens / cost
- 3 calendar days: May 30 → June 1, 2026.
- ~70 commits during that period (a good chunk from this session: guides, glossary, dark mode, nav/footer).
- Split into several short sessions throughout the day.
- Real seated time: mostly Saturday (May 30), several effective hours — and even then, in parallel with another project (codename "Cobra"). The rest spread over short sessions on Sunday and Monday.
- Cost: zero per token — all through the Claude subscription, no API. For this case, we're talking time, not cost.
7. What this illustrates
- You don't need a framework to ship. Vanilla HTML/CSS/JS + GitHub Pages is enough to run a 70+ page site, clean, fast, with dark mode and a serious GEO layer.
- AI shifts the bottleneck. The work is no longer "knowing how to code" — it's deciding and verifying. Claude Code does the typing; I make the choices.
- Honesty is a feature. Owning a pre-existing foundation, using orders of magnitude rather than invented numbers, making careful claims on sensitive topics (GEO = emerging field) → it makes the whole thing credible and citable.