Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

```html

Building an Auto-Generated Technical Blog System Across Four Domain Properties

This session focused on creating a comprehensive technical documentation system that automatically captures development work across four separate domain properties: queenofsandiego.com, dangerouscentaur.com, sailjada.com, and burialsatseasandiego.com. The system generates granular technical blog posts in real-time, making development activities transparent and auditable.

What Was Done

Created a complete infrastructure and automation pipeline that:

  • Generates technical blog posts automatically at the end of each Claude Code development session
  • Deploys to four separate tech.[domain].com subdomains with independent CloudFront distributions
  • Integrates with the Ship's Papers navigation menu on each primary domain
  • Filters sensitive data (credentials, API keys, secrets) before publication
  • Maintains granular, detailed technical documentation of all infrastructure and code changes

Technical Architecture

Core Components Created

/Users/cb/Documents/repos/tools/tech_blog_generator.py — The primary blog generation engine. This script parses Claude Code session transcripts (JSONL format), extracts tool uses and file modifications, and generates structured HTML blog posts. The generator filters out credential references, API keys, and sensitive data using regex patterns and environment variable lookups.

/Users/cb/Documents/repos/tools/tech_blog_init.py — Infrastructure initialization script that provisions:

  • S3 buckets for blog hosting (named `tech-qos-blog`, `tech-jada-blog`, `tech-dc-blog`, `tech-bats-blog`)
  • CloudFront distributions with appropriate origins and cache behaviors
  • DNS records (CNAME for Route53-managed zones, CNAME for Namecheap/GoDaddy)
  • ACM certificate validation records where needed

/Users/cb/.claude/hooks/tech_blog_stop.sh — A Claude Code "stop" hook that executes automatically when a development session ends. This script:

  • Extracts the current session transcript from Claude's session storage
  • Invokes the blog generator with session-specific parameters
  • Uploads the generated HTML to the appropriate tech.[domain].com S3 bucket
  • Invalidates the CloudFront distribution cache to ensure immediate visibility
  • Logs execution details to `~/.claude/logs/tech_blog_stop.log`

Infrastructure Decisions

Domain and Certificate Strategy: Leveraged existing wildcard ACM certificates:

  • queenofsandiego.com: Uses `*.queenofsandiego.com` wildcard certificate (Route53 DNS)
  • sailjada.com: Uses `*.sailjada.com` wildcard certificate (Route53 DNS)
  • dangerouscentaur.com: Uses existing wildcard CloudFront distribution (E2Q4UU71SRNTMB) on `dc-sites` S3 bucket (Namecheap DNS)
  • burialsatseasandiego.com: Required new ACM certificate with GoDaddy DNS validation (configured via GoDaddy API)

S3 Bucket Organization: Created separate buckets for each property to maintain isolation and independent lifecycle policies: 

tech-qos-blog (queenofsandiego.com)
tech-jada-blog (sailjada.com)
tech-dc-blog (dangerouscentaur.com)
tech-bats-blog (burialsatseasandiego.com)

CloudFront Configuration: Each distribution includes:

  • S3 origin with Origin Access Identity (OAI) for secure bucket access
  • Cache behavior defaulting to 3600-second TTL
  • Compression enabled for HTML, CSS, and JSON content types
  • HTTP → HTTPS redirect

DNS Strategy: Used appropriate DNS providers for each domain:

  • Route53 for queenofsandiego.com and sailjada.com (AWS-managed, integrated with CloudFront alias records)
  • Namecheap for dangerouscentaur.com (CNAME to existing CloudFront distribution)
  • GoDaddy for burialsatseasandiego.com (CNAME for tech subdomain, ACM validation CNAME for certificate)

Session Transcript Processing

The blog generator parses Claude Code session transcripts stored in JSONL format at `~/.claude/projects/[project-path]/sessions/`. Each session file contains:

  • Tool use records (file operations, commands executed)
  • File modification logs with paths and operation types (Write, Edit, Delete)
  • Command execution history with arguments

The generator extracts relevant technical details while filtering:

  • Environment variable values (checked against `repos.env`)
  • Common credential patterns (AWS keys, API tokens, passwords)
  • Sensitive file paths (credential files, key stores)
  • Personal information from memory files and feedback documents

The output is structured as granular technical documentation covering file changes, infrastructure modifications, command execution, and architectural decisions.

Navigation Integration

Updated index.html on queenofsandiego.com to add a "Tech Blog" link in the Ship's Papers dropdown menu. This pattern is replicated across all four primary domains, providing easy access to technical documentation for stakeholders like Sergio who need visibility into development work.

The menu structure preserves existing navigation while adding: 

<a href="https://tech.queenofsandiego.com">Tech Blog</a>

Claude Code Settings Integration

Modified ~/.claude/settings.json to register the stop hook, ensuring automatic execution at the end of each development session. The hook configuration includes error handling and logging to prevent hook failures from disrupting the Claude Code session.

Key Decisions & Rationale

Auto-generation vs. Manual Documentation: Automatic generation from session transcripts eliminates the overhead of manual documentation while guaranteeing completeness. Every file change, every command, every infrastructure modification is captured.

Granular vs. Summary-Level: Posts capture specific file paths, function names, exact S3 bucket names, CloudFront distribution IDs, and specific DNS changes. This level of detail enables engineers to understand exactly what changed and why, rather than high-level summaries.

Four Independent Properties: Rather than a single consolidated tech blog, each property gets its own tech.[domain].com subdomain. This maintains the property separation principle already established in the infrastructure and allows each stakeholder to focus on their specific domain's technical work.

Immediate Publication: The stop hook runs automatically, so posts are published within seconds of session completion. No manual build steps, no queue management — the blog is always current.

Infrastructure Details

CloudFront Distribution IDs (for cache invalidation):

  • tech.queenofsandiego.com: Created via infrastructure init (Route53 alias)
  • tech.sailjada.com: Created via infrastructure init (