Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

```html

Building a Real-Time Technical Blog System: Auto-Generated Session Documentation for Four Fleet Sites

What Was Built

Created an automated technical blogging system that captures development work across four related websites in real-time, generating granular, detailed posts immediately after each development session completes. The system includes:

  • Session transcript parsing and analysis engine
  • Automated HTML blog post generation with technical depth
  • Multi-site infrastructure (S3 + CloudFront + DNS)
  • Deployment hooks integrated into Claude Code editor
  • Four independent tech blog sites: tech.queenofsandiego.com, tech.sailjada.com, tech.dangerouscentaur.com, tech.burialsatseasandiego.com

Technical Architecture

Core Components

The system consists of three Python utilities and one shell hook:

  • /Users/cb/Documents/repos/tools/tech_blog_generator.py — Core engine that parses Claude Code session transcripts (JSONL format), extracts tool use records, identifies file modifications, and generates detailed HTML posts with exact file paths, function names, and infrastructure resource IDs
  • /Users/cb/Documents/repos/tools/tech_blog_init.py — Infrastructure provisioning script that creates S3 buckets, CloudFront distributions, ACM certificates, and DNS records for each tech blog domain
  • /Users/cb/.claude/hooks/tech_blog_stop.sh — Post-session hook that triggers automatically when a development session ends, capturing the session transcript and invoking the blog generator
  • Claude Code settings hook registration in /Users/cb/.claude/settings.json

Session Capture Pipeline

The hook system works by:

  1. Claude Code saves session transcript to /Users/cb/.claude/projects/-Users-cb-Documents-repos/sessions/ in JSONL format
  2. Hook script executes on session stop, reads the transcript
  3. Python generator parses JSONL to extract: files modified/created (with exact paths), commands executed, tool invocations (AWS, DNS, file operations)
  4. Generator determines which site the work applies to by analyzing file paths and command context
  5. HTML post is generated with sections for What Was Done, Technical Details, Infrastructure Changes, and Key Decisions
  6. Post is uploaded to appropriate S3 bucket and CloudFront cache is invalidated

Infrastructure Setup

DNS and SSL/TLS Foundation

The tech blog sites leverage existing wildcard certificates:

  • *.queenofsandiego.com — ACM wildcard cert already existed, added Route53 DNS records for tech.queenofsandiego.com
  • *.sailjada.com — ACM wildcard cert already existed, added Route53 DNS records for tech.sailjada.com
  • dangerouscentaur.com — Existing CloudFront wildcard distribution (ID: E2Q4UU71SRNTMB) on dc-sites S3 bucket with Namecheap DNS CNAME
  • burialsatseasandiego.com — GoDaddy-managed DNS; created new ACM cert and added validation CNAME records

S3 and CloudFront per Site

Each tech blog has dedicated infrastructure:

  • tech-queenofsandiego-blog S3 bucket → CloudFront distribution with queenofsandiego.com ACM cert
  • tech-sailjada-blog S3 bucket → CloudFront distribution with sailjada.com ACM cert
  • tech-dangerouscentaur-blog → Leverages existing dc-sites bucket and E2Q4UU71SRNTMB distribution
  • tech-burialsatseasandiego-blog S3 bucket → New CloudFront distribution with newly validated ACM cert

Each S3 bucket is configured with:

  • Static website hosting enabled
  • Block public access disabled (for CloudFront origin access)
  • Index document: index.html
  • CloudFront OAC (Origin Access Control) for secure S3 origin access
  • Cache behaviors with 1-hour TTL for HTML posts, longer for assets

DNS Configuration

Route53 A records point to CloudFront distributions for queenofsandiego.com and sailjada.com. GoDaddy DNS was updated with CNAME for dangerouscentaur (pointing to CloudFront), and burialsatseasandiego.com received ACM validation records via GoDaddy API.

Blog Generator Design Decisions

Granular File Tracking

The generator extracts every file modification from the session transcript, including:

  • Exact file paths (e.g., /Users/cb/Documents/repos/tools/jada_blast.py)
  • Operation type (Write, Edit, Delete)
  • Related commands that triggered the change
  • Dependencies (e.g., if a Python script was edited, which AWS resources it interacts with)

This level of detail ensures readers understand not just what changed, but where and why.

Infrastructure Resource Documentation

When infrastructure changes occur (S3 bucket creation, CloudFront distribution updates, Route53 DNS changes), the generator captures:

  • Exact resource identifiers (bucket names, distribution IDs, hosted zone IDs)
  • Configuration parameters (cache behaviors, SSL/TLS settings, origin setup)
  • Command examples used (with credentials redacted)
  • Rationale for architectural choices

Context-Aware Site Assignment

The generator uses heuristic analysis to determine which site a session applies to:

  • File paths containing site names or directories
  • AWS commands targeting specific buckets or distributions
  • DNS operations on specific domains
  • Fallback: User annotation in hook configuration

Integration with Ship's Papers Navigation

Updated /Users/cb/Documents/repos/sites/queenofsandiego.com/index.html to add tech blog links in the Ship's Papers dropdown menu. Similar navigation updates were made to the dangerouscentaur and sailjada main sites. This makes technical documentation discoverable alongside operational and business information.

Sensitive Data Protection

The blog generator has built-in filters to prevent exposure of:

  • AWS access keys, secret keys, or temporary credentials
  • GoDaddy or Namecheap API keys
  • Database passwords or connection strings
  • Personal identifying information (emails, phone numbers from contact lists)
  • Private IP addresses or internal network information