Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

```html

Building Multi-Site Auto-Generated Technical Blog Infrastructure with Session Transcripts

What Was Done

Created an automated technical blogging system that captures development work across four related properties (queenofsandiego.com, sailjada.com, dangerouscentaur.com, and burialsatseasandiego.com) and publishes granular, detailed posts to corresponding tech.[domain].com subdomains. The system automatically extracts file modifications, command execution, and decision context from Claude Code session transcripts and generates developer-focused technical articles.

Architecture Overview

The solution consists of three core components:

  • Session Capture Hook (tech_blog_stop.sh): Executes when Claude Code sessions end, capturing the session transcript
  • Blog Generator (tech_blog_generator.py): Parses JSONL-formatted session transcripts, extracts technical work, and generates HTML articles
  • Infrastructure Initialization (tech_blog_init.py): Sets up S3 buckets, CloudFront distributions, DNS records, and ACM certificates for all four tech blog sites

Infrastructure Setup

S3 Buckets and CloudFront Distributions

Created dedicated S3 buckets for each tech blog with predictable naming:

  • tech-queenofsandiego-com — Origins for tech.queenofsandiego.com CloudFront distribution
  • tech-sailjada-com — Origins for tech.sailjada.com CloudFront distribution
  • tech-burialsatseasandiego-com — Origins for tech.burialsatseasandiego.com CloudFront distribution
  • dc-sites (existing) — Reused for dangerouscentaur tech blog via wildcard distribution

Each bucket is configured with:

  • Block all public access enabled (CloudFront is sole access point)
  • S3 bucket policies that allow CloudFront Origin Access Identity (OAI) to read objects
  • Versioning disabled for simplicity
  • Standard storage class

CloudFront distributions were created with:

  • S3 bucket origin with OAI for secure access
  • Automatic compression enabled for text/HTML/JSON
  • Default root object set to index.html
  • Price class All (global edge locations)
  • HTTP to HTTPS redirect enforced
  • Default cache behavior with 1-day TTL and query string caching disabled

DNS and SSL/TLS Certificates

Leveraged existing wildcard ACM certificates where available:

  • *.queenofsandiego.com — Existing wildcard cert in Route53; added CNAME aliases for tech.queenofsandiego.com
  • *.sailjada.com — Existing wildcard cert in Route53; added CNAME aliases for tech.sailjada.com
  • burialsatseasandiego.com — Created new ACM cert and added DNS validation CNAME record via GoDaddy API
  • dangerouscentaur.com — Existing wildcard cert; used Namecheap CNAME records for tech subdomain

DNS records created in appropriate providers:

  • Route53: CNAME aliases pointing tech subdomains to CloudFront distribution domain names (queenofsandiego and sailjada)
  • GoDaddy DNS: CNAME record for tech.burialsatseasandiego.com pointing to CloudFront distribution
  • Namecheap DNS: CNAME record for tech.dangerouscentaur.com pointing to existing wildcard CloudFront distribution

Session Transcript Processing

Claude Code exports session transcripts in JSONL format (one JSON object per line). Each object contains:

  • type — "user_message", "assistant_message", "tool_use", etc.
  • content — The message or tool use details
  • tool_calls — Array of tool invocations with names and parameters

The blog generator (tech_blog_generator.py) extracts:

  • File modifications: Write/Edit operations with exact file paths
  • Commands executed: Shell commands run during the session
  • Tool usage: AWS CLI, Python scripts, and other tools invoked
  • Decision context: User reasoning and agent notes from messages
  • Infrastructure changes: Resource creation (S3, CloudFront, Route53 operations)

The generator then:

  1. Filters out sensitive data (credentials, API keys, tokens, secrets)
  2. Groups work by domain (detects which site(s) were affected)
  3. Generates HTML article with <h2>, <h3>, <ul>, <li>, and <code> tags
  4. Uploads to appropriate S3 bucket with timestamped naming: posts/YYYY-MM-DD-HH-MM-SS-slug.html
  5. Invalidates CloudFront distribution to serve fresh content

Integration with queenofsandiego.com Navigation

Updated index.html to add a "Tech Blog" link in the Ship's Papers navigation menu. The link opens tech.queenofsandiego.com in a new tab, making it visible to stakeholders like Sergio who want to understand the technical work being performed.

Key Technical Decisions

  • Session transcript as source of truth: Rather than requiring manual documentation, the system pulls directly from Claude Code's session data. This ensures completeness and accuracy.
  • Wildcard certificate reuse: Leveraged existing wildcard ACM certificates for queenofsandiego.com and sailjada.com to avoid certificate management overhead.
  • Multi-provider DNS support: Different sites use different registrars (Route53, GoDaddy, Namecheap), so the infrastructure script supports all three for flexibility.
  • Automatic credential filtering: The generator scans content for common patterns (AWS keys, tokens, passwords) and redacts them to prevent accidental credential exposure in publicly visible blog posts.
  • Granular, technical language: Posts target engineers, not general audiences—they include file paths, function names, resource IDs, and architectural rationale.
  • Post-session automation: The Stop hook script runs automatically when sessions end, so posts are published immediately without manual intervention.

File Structure

/Users/cb/Documents/repos/tools/
  tech_blog_init.py           # Infrastructure setup for all four tech blogs
  tech_blog_generator.py