Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

```html

Building an Auto-Generated Technical Blog Pipeline for Four Domains

What Was Done

Implemented an end-to-end system that automatically generates granular technical blog posts documenting development work across four separate domains: tech.queenofsandiego.com, tech.dangerouscentaur.com, tech.sailjada.com, and tech.burialsatseasandiego.com. The system captures session transcripts from Claude Code development sessions, extracts technical details without exposing credentials, and publishes formatted blog posts to CloudFront-distributed S3 buckets within minutes of work completion.

Technical Architecture

Core Components

  • Blog Generator Script (/Users/cb/Documents/repos/tools/tech_blog_generator.py): Parses Claude Code session transcripts in JSONL format, extracts tool use and file modification records, sanitizes credentials, and generates semantic HTML blog posts using domain-specific context.
  • Infrastructure Initializer (/Users/cb/Documents/repos/tools/tech_blog_init.py): Provisions S3 buckets, CloudFront distributions, ACM certificates, and DNS records for each tech blog domain. Handles multi-provider DNS (Route53 for sailjada.com and queenofsandiego.com, GoDaddy for burialsatseasandiego.com, Namecheap for dangerouscentaur.com).
  • Stop Hook Integration (/Users/cb/.claude/hooks/tech_blog_stop.sh): Executes automatically when a Claude Code session terminates, triggering transcript analysis and blog post generation without manual intervention.
  • Claude Code Settings (/Users/cb/.claude/settings.json): Configured to execute the stop hook on session termination, creating a closed-loop automation pipeline.

Data Flow

When a development session ends, the stop hook:

  1. Reads the session transcript (JSONL format stored in /Users/cb/.claude/projects/[project-path]/sessions/)
  2. Invokes the blog generator with the transcript path and domain identifier
  3. Generator extracts all tool_use blocks and file modification records
  4. Sanitizes output by removing patterns matching credentials, API keys, tokens, and secrets
  5. Groups changes by category (infrastructure, code, configuration, content)
  6. Generates semantic HTML using domain-specific context from tech_blogs_config.json
  7. Uploads to domain-specific S3 bucket with cache-busting timestamp
  8. Invalidates CloudFront distribution to serve fresh content immediately

Infrastructure Setup Details

S3 Bucket Configuration

Created four S3 buckets following a naming convention tied to each domain:

  • qos-tech-blog → Serves tech.queenofsandiego.com
  • jada-tech-blog → Serves tech.sailjada.com
  • dc-tech-blog → Serves tech.dangerouscentaur.com
  • bats-tech-blog → Serves tech.burialsatseasandiego.com

Each bucket configured with:

  • Versioning enabled for rollback capability
  • Block public access disabled (posts must be publicly readable)
  • Static website hosting with index.html as default document
  • Lifecycle policy archiving posts older than 90 days to Glacier

CloudFront Distribution Setup

For queenofsandiego.com and sailjada.com, leveraged existing wildcard ACM certificates (*.queenofsandiego.com and *.sailjada.com) to create new CloudFront distributions with:

  • S3 bucket origin with origin access identity for secure S3 access
  • Minimum TTL: 0 (allows rapid cache invalidation)
  • Default TTL: 86400 (1 day for normal caching)
  • HTTPS redirect from HTTP
  • Gzip compression enabled

For dangerouscentaur.com, reused the existing wildcard CloudFront distribution (ID: E2Q4UU71SRNTMB) pointing to dc-sites S3 bucket.

For burialsatseasandiego.com, provisioned a new distribution with ACM certificate validation via GoDaddy DNS API integration.

DNS Configuration

  • queenofsandiego.com & sailjada.com: CNAME records created in Route53 hosted zones pointing to respective CloudFront domain names
  • dangerouscentaur.com: CNAME created at Namecheap DNS for tech.dangerouscentaur.com
  • burialsatseasandiego.com: CNAME created at GoDaddy DNS for tech.burialsatseasandiego.com after programmatic ACM certificate validation

Credential Sanitization Strategy

The blog generator employs multiple layers of sanitization:

  • Pattern Matching: Regex patterns detect and redact common credential formats (AWS access keys starting with AKIA, tokens starting with aws4, API keys, etc.)
  • Environment Variable References: File paths containing .env, credentials, secrets, or password are logged as "[CREDENTIAL FILE - REDACTED]"
  • Semantic Context: If a command or file reference mentions authentication, the generator creates a descriptive note instead of raw output
  • Log Analysis: Command outputs are scanned for patterns like IP addresses in sensitive contexts, database connection strings, or auth tokens

Example Sanitization

Original transcript entry:

Edit: /Users/cb/.claude/projects/.../memory/reference_godaddy_credentials.md

Rendered in blog as:

Edit: GoDaddy API credentials reference (credential file - redacted)

Navigation Integration

Updated the Ship's Papers menu in /Users/cb/Documents/repos/sites/queenofsandiego.com/index.html to include a "Technical Blog" link. The dropdown structure now includes:

  • Technical Blog (tech.queenofsandiego.com)
  • Ship's Papers (existing navigation item)
  • Other related links

This pattern was replicated across all four main sites, with each site's navigation pointing to its respective tech blog subdomain.

Session Transcript Processing

Claude Code stores session transcripts as JSONL (JSON Lines) files in project-specific directories. The generator: