Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

```html

Building Automated Technical Blog Infrastructure Across Four Fleet Sites

This session focused on creating a comprehensive automated technical documentation system for tech.queenofsandiego.com, tech.dangerouscentaur.com, tech.sailjada.com, and tech.burialsatseasandiego.com. The goal was to enable granular, session-by-session documentation of all infrastructure and code changes—making it easy for stakeholders like Sergio to understand exactly what work is being performed on the fleet sites.

Architecture Overview

The system consists of three main components:

  • Session Hook Capture: A stop hook that executes when Claude Code sessions end, extracting session transcripts and session metadata
  • Blog Post Generation: A Python generator that parses session data and creates detailed HTML posts with file changes, commands executed, and technical decisions
  • Multi-Site Infrastructure: S3 buckets, CloudFront distributions, and DNS records for each tech blog subdomain

Infrastructure Setup

Each tech blog required consistent infrastructure provisioning:

  • S3 Buckets: Created dedicated buckets for each tech blog (qos-tech-blog, jada-tech-blog, dc-sites bucket repurposed with tech prefix, bats-tech-blog)
  • CloudFront Distributions: Set up origin-only distributions for queenofsandiego.com and sailjada.com (leveraging existing wildcard ACM certificates); created new distribution for dangerouscentaur using wildcard distribution E2Q4UU71SRNTMB on dc-sites bucket
  • DNS Configuration: Added Route53 CNAME records for qos and jada; added Namecheap CNAME for dangerouscentaur; added GoDaddy DNS validation CNAME for burialsatseasandiego ACM certificate validation

The tech.burialsatseasandiego.com setup required special handling since that domain uses GoDaddy DNS rather than Route53. The infrastructure initialization script automatically detected this and created the appropriate DNS validation records.

Technical Implementation Details

Files Created:

  • /Users/cb/Documents/repos/tools/tech_blog_generator.py: Main blog post generator that parses JSONL session transcripts and generates HTML articles with proper sanitization to exclude credentials
  • /Users/cb/Documents/repos/tools/tech_blog_init.py: Infrastructure provisioning script that creates S3 buckets, CloudFront distributions, ACM certificates, and DNS records for all four sites
  • /Users/cb/.claude/hooks/tech_blog_stop.sh: Stop hook that executes at session end, captures transcript location, and triggers blog post generation

Configuration Integration:

Updated /Users/cb/.claude/settings.json to include the new stop hook, enabling automatic capture of every session that might produce documentation-worthy work. The hook is configured to be non-blocking so session termination completes normally while the blog generation happens asynchronously.

Navigation Integration:

Modified /Users/cb/Documents/repos/sites/queenofsandiego.com/index.html to add tech blog links to the "Ship's Papers" menu. This makes the technical documentation discoverable by site visitors and stakeholders, integrating it into the existing information architecture rather than hiding it in a separate location.

Session Data Processing

Claude Code stores session transcripts in JSONL format at ~/.claude/sessions/. Each line contains a structured event with type, timestamp, and content. The blog generator extracts:

  • Files Modified/Created: Paths and operations (Write/Edit/Delete)
  • Commands Executed: Full command text for reproducibility (with automatic credential scrubbing)
  • Tool Use: Specific functions called with arguments
  • Reasoning Notes: Agent notes that explain decision-making

The generator then structures this into narrative HTML with proper semantic markup, making it readable both in browsers and to future developers who need to understand architectural decisions.

Credential Protection

A critical requirement was ensuring no secrets leak into the published blog posts. The generator includes multiple sanitization passes:

  • Regex patterns to detect and remove common credential formats (AWS keys, API tokens, passwords in connection strings)
  • Environment variable redaction (repos.env contents are referenced but never expanded)
  • Host and domain filtering to prevent accidental inclusion of sensitive hostnames
  • Explicit allowlisting of technical terms (S3 bucket names, CloudFront distribution IDs, Route53 zone IDs are safe to include as they're already public)

Current Status and Testing

The infrastructure was tested end-to-end:

  • tech.queenofsandiego.com: CloudFront distribution active, DNS propagated, certificate validated
  • tech.sailjada.com: CloudFront distribution active, DNS propagated, certificate validated
  • tech.dangerouscentaur.com: Namecheap CNAME configured pointing to wildcard distribution
  • tech.burialsatasandiego.com: GoDaddy CNAME configured, ACM certificate pending validation

The blog generator was tested against this session's transcript and successfully produced structured output with all file modifications, commands, and architectural decisions properly captured and formatted.

Integration Points

The Ship's Papers menu now includes links to each tech blog, making them discoverable from the main site navigation. This positions technical documentation as a first-class resource rather than hidden infrastructure.

What's Next

  • Complete ACM certificate validation for burialsatseasandiego.com tech blog
  • Monitor first automated session captures to validate output quality and credential scrubbing
  • Implement indexing/search functionality if tech blog volume grows
  • Set up CloudWatch alarms for tech blog CloudFront distributions

This system enables transparent, granular documentation of all work performed on the fleet sites—exactly what's needed for stakeholders to understand the technical work being done and the architectural decisions driving it.

```