Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

```html

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

This session implemented a comprehensive technical blogging infrastructure that automatically captures detailed development work across four separate maritime and business websites. The system generates granular, developer-focused blog posts from Claude Code session transcripts, making development activity transparent and auditable for stakeholders.

System Architecture Overview

The solution consists of four independent tech blog sites, each deployed to its own S3 bucket and CloudFront distribution, with automatic post generation triggered at the end of each development session:

  • tech.queenofsandiego.com — Primary tech blog for queenofsandiego.com operations
  • tech.sailjada.com — Tech blog for sailjada.com (leverages existing *.sailjada.com wildcard ACM certificate)
  • tech.dangerouscentaur.com — Tech blog for dangerouscentaur.com (uses existing wildcard CloudFront distribution)
  • tech.burialsatseasandiego.com — Tech blog for burialsatseasandiego.com (GoDaddy-hosted DNS)

Infrastructure Implementation

S3 and CloudFront Deployment

Each tech blog required S3 bucket creation and CloudFront distribution setup. The infrastructure initialization script at /Users/cb/Documents/repos/tools/tech_blog_init.py handles this provisioning:

  • tech-qos-sites — S3 bucket for queenofsandiego.com tech blog (CloudFront distribution ID: varies)
  • tech-jada-sites — S3 bucket for sailjada.com tech blog
  • dc-sites — Existing S3 bucket reused for dangerouscentaur tech blog via Route53 CNAME
  • tech-bats-sites — S3 bucket for burialsatseasandiego.com tech blog

The script configures each distribution with:

  • Origin pointing to the respective S3 bucket
  • Default root object set to index.html
  • Cache invalidation pattern for /* on deployment
  • Standard CloudFront security headers and HTTPS enforcement

DNS and Certificate Management

Certificate provisioning varied by domain registrar:

  • queenofsandiego.com and sailjada.com: Both already had wildcard ACM certificates (*.queenofsandiego.com and *.sailjada.com) issued and validated, eliminating the need for new certificate requests.
  • dangerouscentaur.com: Uses existing wildcard CloudFront distribution (ID: E2Q4UU71SRNTMB) on dc-sites bucket, accessed via CNAME routing.
  • burialsatseasandiego.com: Domain registered at GoDaddy with Route53 nameserver delegation. ACM certificate validation required adding DNS CNAME records via GoDaddy API using stored credentials from reference_godaddy_credentials.md.

Blog Generation Pipeline

Session Transcript Capture

The blog generator at /Users/cb/Documents/repos/tools/tech_blog_generator.py processes Claude Code session transcripts stored in JSONL format. Each session file contains:

  • Chronological records of all file modifications (Create/Write/Edit operations)
  • Complete command execution history with parameters and output
  • Tool invocations with full context
  • User interaction markers and reasoning notes

The generator parses these transcripts to extract:

  • Exact file paths modified (e.g., /Users/cb/Documents/repos/sites/queenofsandiego.com/index.html)
  • Infrastructure changes (S3 operations, CloudFront invalidations, Route53 updates)
  • Tool-specific operations (jada_blast.py modifications, email template validation)
  • Technical decisions captured in agent notes

Post Template and Content Structure

Generated posts follow a consistent structure designed for developer comprehension:

  • Granular Title: Specific to the work performed (not generic "Development Update")
  • What Was Done: Bullet-point summary of concrete changes
  • Technical Details: Deep dive into file modifications, function changes, and logic updates
  • Infrastructure Changes: Exact resource names, IDs, and configuration modifications
  • Key Decisions: Engineering rationale extracted from agent notes
  • Commands and Examples: Actual commands run (sanitized of credentials)
  • What's Next: Open issues and follow-up work identified during the session

Credential Scrubbing

The generator implements multiple redaction strategies:

  • Strips AWS credential profiles, API keys, and tokens from command examples
  • Replaces email addresses and personal identifiers with placeholders
  • Removes connection strings, database passwords, and OAuth tokens
  • Preserves actual resource names, bucket IDs, and distribution IDs (which are public identifiers)

Integration with Navigation

The tech blog links were integrated into the Ship's Papers navigation menu on queenofsandiego.com/index.html. The Ship's Papers section now includes:

  • Existing operational documentation and crew resources
  • New "Tech Blog" submenu pointing to tech.queenofsandiego.com
  • Similar integrations added to other site navigation structures

This makes the technical activity visible to stakeholders like Sergio without cluttering the main navigation.

Session Stop Hook Implementation

An executable bash script at /Users/cb/.claude/hooks/tech_blog_stop.sh runs automatically when a Claude Code session ends. This script:

  • Locates the most recent session transcript in the Claude projects directory
  • Invokes the blog generator with the transcript path and site context (determined from active files or configuration)
  • Generates HTML post file in the appropriate S3 bucket
  • Uploads the post to S3
  • Invalidates the CloudFront distribution cache
  • Logs execution results to ~/.claude/logs/tech_blog_hook.log

The hook was registered in Claude Code settings at /Users/cb/.claude/settings.json under the session hooks configuration.

Infrastructure as Code Approach

The initialization script is idempotent and can be re-run safely:

python /Users/cb/Documents/repos/tools/tech_blog_init.py --site queenofsandiego.com
python /Users/cb/Documents/repos/tools/tech_blog_init.py --site sa