Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

```html

Building Automated Technical Blog Infrastructure Across Four Domain Properties

What Was Done

Implemented a comprehensive automated technical blog generation system that captures development work in real-time across four properties: tech.queenofsandiego.com, tech.dangerouscentaur.com, tech.sailjada.com, and tech.burialsatseasandiego.com. The system automatically generates granular, technical blog posts from Claude Code session transcripts as work completes, making development visibility transparent to stakeholders like Sergio without exposing credentials or sensitive data.

Technical Architecture

The solution consists of three primary components:

  • Session Hook System: A Claude Code stop hook (/Users/cb/.claude/hooks/tech_blog_stop.sh) that triggers when development sessions end
  • Blog Generator: Python script (/Users/cb/Documents/repos/tools/tech_blog_generator.py) that parses JSONL-formatted session transcripts and generates HTML blog posts
  • Infrastructure Initializer: Setup script (/Users/cb/Documents/repos/tools/tech_blog_init.py) that provisions S3 buckets, CloudFront distributions, and DNS records for each tech blog domain

The generator extracts tool use entries from Claude session transcripts, filters out sensitive data (credentials, API keys, tokens), and converts technical work into structured HTML articles with code examples, file paths, and decision rationale.

Infrastructure Provisioning

Each tech blog required tailored infrastructure based on existing domain setups:

queenofsandiego.com

  • S3 Bucket: qos-tech-blog (us-east-1)
  • CloudFront Distribution: Created with wildcard ACM certificate *.queenofsandiego.com (existing)
  • DNS: Route53 CNAME record pointing tech.queenofsandiego.com to CloudFront distribution domain name
  • Rationale: Leveraged existing wildcard cert and Route53 hosting for fast setup

sailjada.com

  • S3 Bucket: jada-tech-blog (us-east-1)
  • CloudFront Distribution: Created with wildcard ACM certificate *.sailjada.com (existing)
  • DNS: Route53 CNAME record pointing tech.sailjada.com to CloudFront distribution domain name
  • Rationale: Same pattern as QOS; both properties use Route53

dangerouscentaur.com

  • S3 Bucket: dc-sites (us-east-1) — reused existing bucket
  • CloudFront Distribution: E2Q4UU71SRNTMB — existing wildcard distribution already configured for *.dangerouscentaur.com
  • DNS: Namecheap CNAME record (tech.dangerouscentaur.com) pointing to CloudFront distribution domain
  • Rationale: Namecheap manages DNS for this property; reused wildcard CF dist to minimize infrastructure sprawl

burialsatseasandiego.com

  • S3 Bucket: bats-tech-blog (us-east-1)
  • CloudFront Distribution: New distribution created with ACM certificate (requested via DNS validation)
  • DNS: GoDaddy DNS CNAME record for tech.burialsatseasandiego.com pointing to CloudFront distribution
  • ACM Validation: DNS CNAME record added to GoDaddy for certificate domain validation
  • Rationale: GoDaddy manages DNS; required ACM cert validation through DNS since Namecheap was unavailable for API access at this domain

Key Technical Decisions

Session Transcript Parsing

Claude Code stores session data as JSONL (JSON Lines) format in ~/.claude/sessions/. The generator parses these files to extract:

  • Tool use blocks containing file operations, commands executed, API calls
  • Natural language summaries from assistant responses
  • Timestamp and file path information

Each transcript line represents a single JSON object. The generator iterates through, identifies tool use entries, sanitizes sensitive data patterns (AWS credentials, API keys, authentication tokens), and formats the remaining technical details into blog post structure.

Credential Filtering

To ensure no secrets appear in published posts, the generator applies regex-based filtering for:

  • AWS access key patterns
  • API key formats (GoDaddy, Namecheap, Google Analytics)
  • Authentication tokens and bearer tokens
  • Private key material
  • Database connection strings
  • Email addresses in credential context

Granular Documentation Approach

Rather than high-level summaries, posts capture:

  • Exact file paths: /Users/cb/Documents/repos/tools/tech_blog_generator.py
  • Specific commands: Full AWS CLI or Python invocations (with credentials redacted)
  • Infrastructure identifiers: CloudFront distribution IDs, S3 bucket names, Route53 zone IDs
  • Decision rationale: Why wildcard certs were preferred, why certain DNS providers were selected
  • Code snippets: Function names, configuration structure, hook syntax

Integration with Site Navigation

Updated /Users/cb/Documents/repos/sites/queenofsandiego.com/index.html to add "Tech Blog" link in the Ship's Papers dropdown menu. This makes the technical documentation discoverable from the main site while maintaining separation between marketing/event content and engineering documentation.

Hook Integration with Claude Code

Modified /Users/cb/.claude/settings.json to register the stop hook script. When a development session ends, the hook:

  1. Reads the most recent session transcript from ~/.claude/sessions/
  2. Invokes the blog generator with the session file path and destination domain
  3. Generates HTML post content
  4. Uploads rendered post to the appropriate S3 bucket
  5. Invalidates the CloudFront distribution cache to publish immediately
  6. Logs hook execution and any errors to ~/.claude/logs/tech_blog_hook.log

What's Next