Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

```html

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

This session implemented a comprehensive technical blogging system across four sites (queenofsandiego.com, sailjada.com, dangerouscentaur.com, and burialsatseasandiego.com) that automatically captures and publishes detailed development work as it happens. The system generates granular, technical blog posts directly from Claude Code session transcripts, making project progress transparent to stakeholders like Sergio.

What Was Done

  • Created a Python-based blog generator that parses Claude Code session transcripts (JSONL format) and converts them into technical HTML articles
  • Built infrastructure provisioning scripts that set up S3 buckets, CloudFront distributions, and DNS records for four tech blog subdomains
  • Integrated a post-session hook into Claude Code that automatically triggers blog generation and site deployment
  • Added navigation links to the Ship's Papers menu on queenofsandiego.com to surface the tech blogs
  • Configured wildcard SSL certificates and CDN distribution for all four sites

Technical Architecture

Blog Generation Pipeline

The system operates as a three-stage pipeline:

  1. Transcript Capture: Claude Code session transcripts are stored in JSONL format at ~/.claude/sessions/. Each line is a JSON object representing a tool invocation, command execution, or message exchange.
  2. Content Extraction: The blog generator script (/Users/cb/Documents/repos/tools/tech_blog_generator.py) parses these transcripts, filtering out sensitive data (credentials, API keys, passwords) while preserving technical details like file paths, S3 buckets, CloudFront distribution IDs, and command examples.
  3. Publication: Generated HTML articles are uploaded to site-specific S3 buckets and cached through CloudFront distributions, making them immediately accessible at tech subdomains.

Session Hook Integration

A stop hook script (/Users/cb/.claude/hooks/tech_blog_stop.sh) is triggered automatically when a Claude Code session ends. This hook:

  • Detects which site's repository was active during the session by examining modified file paths
  • Invokes the blog generator against the current session transcript
  • Uploads the generated post to the appropriate S3 bucket (e.g., qos-tech-blog for queenofsandiego.com work)
  • Invalidates the CloudFront distribution cache to serve fresh content immediately
  • Logs all operations to ~/.claude/logs/tech_blog_hook.log for debugging

Infrastructure Changes

S3 Buckets

Four new S3 buckets were created to host blog content:

  • qos-tech-blog — Hosts posts about queenofsandiego.com development
  • jada-tech-blog — Hosts posts about sailjada.com development
  • bats-tech-blog — Hosts posts about burialsatseasandiego.com development
  • dc-tech-blog — Hosts posts about dangerouscentaur.com development

All buckets are configured with private access, served only through CloudFront distributions. Bucket policies restrict access to their respective CloudFront origins via Origin Access Identity (OAI).

CloudFront Distributions

Four CloudFront distributions were created:

  • tech.queenofsandiego.com — Distribution ID (stored in infrastructure config) with origin pointing to qos-tech-blog
  • tech.sailjada.com — Distribution pointing to jada-tech-blog
  • tech.burialsatseasandiego.com — Distribution pointing to bats-tech-blog
  • tech.dangerouscentaur.com — Distribution pointing to dc-tech-blog

Each distribution uses domain-specific SSL certificates (leveraging existing wildcard certs for *.queenofsandiego.com and *.sailjada.com) and implements HTTP → HTTPS redirects.

DNS Configuration

DNS records were configured based on each domain's current DNS provider:

  • queenofsandiego.com: Route53 hosted zone — Added CNAME alias record for tech.queenofsandiego.com pointing to the CloudFront distribution domain
  • sailjada.com: Route53 hosted zone — Added CNAME alias record for tech.sailjada.com
  • dangerouscentaur.com: Namecheap DNS — Added CNAME record for tech.dangerouscentaur.com pointing to CloudFront distribution domain
  • burialsatseasandiego.com: GoDaddy DNS — Added CNAME record for tech.burialsatseasandiego.com and provisioned new ACM certificate with DNS validation via GoDaddy API integration

Content Filtering and Security

The blog generator implements strict filtering to prevent credential leakage:

  • Regex patterns strip AWS access keys, API keys, tokens, and passwords from command examples and file contents
  • Redaction rules obfuscate email addresses and GoDaddy/Namecheap API credentials mentioned in session context
  • Path sanitization preserves the readability of file paths while removing home directory shortcuts that might reveal username patterns
  • Automatic scrubbing of memory files and sensitive project context from transcripts before publication

The filtering is aggressive—when in doubt, content is excluded from public posts. This ensures that detailed technical work is visible to Sergio and the team without exposing operational secrets.

Navigation Integration

The Ship's Papers menu on queenofsandiego.com/index.html was updated to include a "Technical Blogs" section with links to all four tech blog subdomains. This makes the documentation discoverable and positions technical transparency as a core feature of the organizations' operation.

Key Decisions

  • Automatic post-session generation: Rather than requiring manual blog creation, the hook triggers automatically, ensuring no work goes undocumented. This removes friction and makes technical transparency the default.
  • Site-specific routing: The hook detects which repository was modified and routes posts to the correct site. A session touching both queenofsandiego.com and sailjada.com files will generate separate posts for each site.
  • Transcript as source of truth: Session transcripts are granular by design—they capture every command, file edit, and reasoning note. This depth is preserved in blog posts rather than summarized away, giving readers the full context Sergio needs to understand decisions.
  • CDN-first delivery: CloudFront caching ensures tech blog posts serve globally with low latency and are cached for 24 hours by default, balancing freshness with performance.