Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

```html

Building a Granular Technical Blog Infrastructure Across Four Domains

Overview

This session implemented a complete automated technical blogging system that captures granular development activity across four independent domains: tech.queenofsandiego.com, tech.dangerouscentaur.com, tech.sailjada.com, and tech.burialsatseasandiego.com. The system automatically generates detailed technical posts from Claude development sessions, making it easy for stakeholders like Sergio to see exactly what work was done, why decisions were made, and how systems were modified.

Technical Architecture

The solution consists of three core components:

  • Session Capture Hook (/Users/cb/.claude/hooks/tech_blog_stop.sh) — Executes when a Claude development session ends, extracting transcript data
  • Blog Generator (/Users/cb/Documents/repos/tools/tech_blog_generator.py) — Parses session transcripts and generates detailed HTML blog posts with file-level granularity
  • 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

Infrastructure Setup

Each technical blog required identical AWS infrastructure patterns:

  • S3 Buckets (private, versioning enabled):
    • qos-tech-blog for queenofsandiego.com
    • jada-tech-blog for sailjada.com
    • bats-tech-blog for burialsatseasandiego.com
    • dc-tech-blog for dangerouscentaur.com
  • CloudFront Distributions with Origin Access Identity (OAI) to allow public read access while keeping S3 buckets private
  • ACM Certificates — Leveraged existing wildcard certs where available:
    • *.queenofsandiego.com (existing) for tech.queenofsandiego.com
    • *.sailjada.com (existing) for tech.sailjada.com
    • New certificate issued for tech.burialsatseasandiego.com
    • Namecheap CNAME validation used for dangerouscentaur wildcard distribution
  • DNS Records:
    • Route53 CNAME records for queenofsandiego.com and sailjada.com pointing to respective CloudFront distribution aliases
    • GoDaddy DNS CNAME record for burialsatseasandiego.com (domain already hosted there)
    • Namecheap CNAME for dangerouscentaur tech blog (wildcard CF distribution)

Session Transcript Processing

The blog generator reads Claude session transcripts (stored in JSONL format in ~/.claude/sessions/) and extracts:

  • All file modifications and creations with exact paths
  • Commands executed during the session
  • Tool use entries showing what integrations were invoked
  • Context about why decisions were made (from user inputs)

The generator filters out sensitive data (credentials, API keys, tokens, passwords) while preserving technical depth. For example, it includes S3 bucket names and CloudFront distribution IDs but strips any AWS access keys or GoDaddy API credentials.

Integration with Navigation

The Ship's Papers menu in /Users/cb/Documents/repos/sites/queenofsandiego.com/index.html was updated to include a "Technical Blog" link. Similar updates were made to navigation structures on the other domains. This makes it easy for Sergio and other engineers to access the detailed technical documentation directly from the public-facing sites.

Key Decisions and Trade-offs

  • Separate S3 Buckets per Domain — Chosen over a single multi-tenant bucket for isolation, independent scaling, and clearer cost attribution per domain
  • CloudFront Distribution per Blog — Provides independent caching strategies, certificate management, and geo-distribution settings for each site
  • Mixed DNS Providers — Rather than consolidating all DNS to a single provider, leveraged existing setups: Route53 for AWS-native domains, GoDaddy for burialsatseasandiego.com, and Namecheap for dangerouscentaur wildcard distribution. This avoided unnecessary DNS migrations while adding new services.
  • Hook-Based Automation — Using Claude Code hooks ensures blog generation happens automatically after each session without requiring manual triggering or remembering to run a command
  • Granular Post Generation — Posts include specific file paths, bucket names, distribution IDs, and command examples rather than high-level summaries, making them valuable for technical audits and knowledge preservation

Deployment Validation

After infrastructure provisioning, the system was validated by:

  • Testing HTTP access to all four tech blog domains to confirm CloudFront distributions and DNS records were correctly configured
  • Uploading a sample blog post generated from this session's transcript
  • Running CloudFront cache invalidations to ensure immediate visibility of new posts
  • Verifying that Ship's Papers navigation menus on each primary domain correctly link to their respective technical blogs

Related Work in This Session

Beyond the blog infrastructure, this session also:

  • Fixed image references on https://burialsatseasandiego.sailjada.com/ (updated "imagine" and "small catamaran" images to correct content, with a task card created for fleet image verification)
  • Enhanced email blast tooling with email_template_validator.py and jada_unsubscribe_monitor.py for better campaign management
  • Updated event pages (events.html, mothersday.html) on queenofsandiego.com with current information
  • Prepared for a Google Analytics audit to identify booking optimization opportunities

What's Next

The blog generator is now active in the Claude Code hook system. Each future development session will automatically generate a granular technical post capturing:

  • Exact files modified (with paths)
  • Infrastructure changes (S3, CloudFront, Route53, GoDaddy, Namecheap records)
  • Commands executed
  • Technical decisions and rationale
  • Architecture patterns employed

This provides a complete audit trail for technical stakeholders while keeping sensitive credentials and secrets out of the public technical blogs. Sergio and other engineers can now drill down to see exactly what changed, where, and why.

```