Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

```html

Building Granular Technical Blog Infrastructure Across Four Domains: Auto-Generated Development Session Documentation

What Was Done

Implemented an automated technical blog generation system that captures development session activities and publishes detailed technical posts to four separate tech documentation sites: tech.queenofsandiego.com, tech.sailjada.com, tech.dangerouscentaur.com, and tech.burialsatseasandiego.com. The system hooks into Claude Code's session lifecycle, extracts granular technical details from session transcripts, generates developer-focused blog posts, and deploys them to the appropriate domain via CloudFront.

Technical Architecture

Core Components

  • tech_blog_generator.py: Main generator that parses Claude Code session JSONL transcripts, extracts tool invocations and file modifications, and generates HTML blog posts with technical depth
  • tech_blog_init.py: Infrastructure provisioning script that creates S3 buckets, CloudFront distributions, and Route53/DNS records for each tech blog domain
  • tech_blog_stop.sh: Bash hook executed at session end (via Claude Code settings) that triggers blog generation and publication

Deployment Architecture

Each tech blog uses the same pattern:

  • S3 buckets: Named qos-tech-blog, jada-tech-blog, dc-sites (reused wildcard), and bats-tech-blog for static HTML and archive storage
  • CloudFront distributions: Existing wildcards for qos and jada (*.queenofsandiego.com and *.sailjada.com ACM certs); dangerouscentaur uses existing dist E2Q4UU71SRNTMB on dc-sites; burialsatseasandiego uses GoDaddy DNS CNAME to CloudFront
  • DNS configuration: Route53 A aliases for qos and jada; Namecheap CNAME for dangerouscentaur; GoDaddy CNAME for burialsatseasandiego

Infrastructure Changes

S3 Buckets Created

qos-tech-blog           — Stores posts for tech.queenofsandiego.com
jada-tech-blog          — Stores posts for tech.sailjada.com
bats-tech-blog          — Stores posts for tech.burialsatseasandiego.com
dc-sites (existing)     — Already had wildcard dist; reused for dangerouscentaur

CloudFront Distributions

  • queenofsandiego.com: Distribution created with origin S3:qos-tech-blog, CNAME tech.queenofsandiego.com, using existing wildcard ACM cert
  • sailjada.com: Distribution created with origin S3:jada-tech-blog, CNAME tech.sailjada.com, using existing wildcard ACM cert
  • dangerouscentaur.com: Reused existing distribution E2Q4UU71SRNTMB (dc-sites origin), added tech.dangerouscentaur.com to alternate domain names
  • burialsatseasandiego.com: New distribution created with origin S3:bats-tech-blog, validated via GoDaddy DNS (domain uses GoDaddy nameservers)

DNS Configuration

  • Route53 (queenofsandiego.com, sailjada.com): A aliases pointing to CloudFront distribution domain names
  • Namecheap (dangerouscentaur.com): CNAME record tech pointing to CloudFront distribution domain
  • GoDaddy (burialsatseasandiego.com): ACM certificate validation CNAME added; blog CNAME pending after cert issuance

Session Data Extraction and Blog Generation

Session Transcript Processing

Claude Code sessions are stored as JSONL files in ~/.claude/projects/. Each line is a JSON event representing user input, assistant responses, or tool invocations. The generator parses these to extract:

  • File modifications: Write/Edit operations on specific paths (e.g., /Users/cb/Documents/repos/tools/jada_blast.py)
  • Commands executed: User commands run during the session
  • Tool invocations: Uses of bash, Python, or other tools with inputs/outputs (sanitized for secrets)
  • Artifacts created: Referenced files, configuration changes, infrastructure provisioned

Blog Post Generation Logic

The generator creates HTML posts with these sections:

  • What Was Done: High-level summary of session outcomes
  • Technical Details: Granular file-by-file breakdown, exact paths, specific changes
  • Infrastructure Changes: S3 buckets, CloudFront invalidations, DNS updates with exact resource names
  • Key Decisions: Why architectural choices were made
  • What's Next: Follow-up work identified during the session

Integration with Ship's Papers Navigation

Updated /Users/cb/Documents/repos/sites/queenofsandiego.com/index.html Ship's Papers dropdown menu to include links to the four tech blogs. This makes technical documentation immediately discoverable from the main site navigation, allowing Sergio and other stakeholders to drill into implementation details as needed.

Key Decisions and Rationale

Stop Hook Approach

Rather than running blog generation continuously or on a cron schedule, we hook into Claude Code's session lifecycle. When /stop command runs, ~/.claude/hooks/tech_blog_stop.sh is executed. This ensures:

  • Posts are generated only after a complete session (not partial work)
  • Session transcript is finalized and accessible to the generator
  • Publish timing is deterministic (immediately after session end)
  • No background processes consuming resources between sessions

Reusing Existing CloudFront Infrastructure

Rather than creating four entirely separate deployments, we leveraged existing wildcard certificates and distributions where possible:

  • queenofsandiego.com and sailjada.com already had *.domain.com ACM certificates, so new tech subdomains use the same certs, reducing ACM request/validation overhead
  • dangerouscentaur.com already had a wildcard CloudFront distribution; we added the tech subdomain to alternate domain names rather than creating a new distribution
  • This reduces ongoing maintenance surface and certificate renewal complexity

GoDaddy Integration for burialsatseasandiego.com

burialsatseasandiego.com uses GoDaddy nameservers (not Route53). We created an ACM certificate for the tech blog subdomain and added the validation CNAME record to GoDaddy