Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

```html

Building a Multi-Domain Technical Blog Pipeline with Auto-Generated Session Transcripts

This session implemented a comprehensive technical blogging infrastructure across four distinct domains (queenofsandiego.com, sailjada.com, dangerouscentaur.com, and burialsatseasandiego.com) with automated generation of granular technical posts from Claude session transcripts. The system captures operational details—file changes, commands executed, decisions made—and publishes them immediately upon session completion.

Infrastructure Architecture

The multi-domain tech blog stack consists of:

  • Storage Layer: Four S3 buckets (qos-tech-blog, jada-tech-blog, dc-tech-blog, bats-tech-blog) configured for static website hosting
  • CDN Layer: CloudFront distributions with wildcard TLS certificates for low-latency global delivery
  • DNS Layer: Route53 for queenofsandiego.com and sailjada.com (AWS-hosted), Namecheap CNAME for dangerouscentaur.com subdomain, GoDaddy CNAME for burialsatseasandiego.com subdomain
  • Generation Layer: Python scripts that parse Claude session JSONL transcripts and generate timestamped HTML blog posts
  • Trigger Layer: Claude Code Stop hook that executes post-session, automatically invoking the blog generator

CloudFront Distribution Configuration

Each tech blog uses a CloudFront distribution with the following pattern:

  • Origin: S3 bucket (e.g., qos-tech-blog.s3.us-west-2.amazonaws.com for queenofsandiego.com)
  • Viewer Certificate: ACM wildcard certificates (*.queenofsandiego.com, *.sailjada.com for AWS-managed domains; Namecheap and GoDaddy certs validated via DNS)
  • CNAME: tech.[domain] subdomain
  • Cache Behavior: HTML objects set to 1-hour TTL; index.html configured for directory routing
  • Distribution IDs: (exact IDs recorded in infrastructure config file for invalidation commands)

The dangerouscentaur.com setup reuses the existing wildcard CloudFront distribution (E2Q4UU71SRNTMB) pointing to the dc-sites S3 bucket, adding tech.dangerouscentaur.com as an additional CNAME.

Blog Generation Pipeline

The generator script (/Users/cb/Documents/repos/tools/tech_blog_generator.py) performs the following steps:

  1. Session Transcript Parsing: Reads the JSONL-formatted session file from ~/.claude/sessions/, extracting user messages, tool invocations (create_file, edit_file, run_command), and tool results
  2. Content Sanitization: Strips passwords, API keys, tokens, credential references, and sensitive personal data using regex patterns matching common secret formats
  3. Metadata Extraction: Captures session ID, timestamp, modified file paths, executed commands, and tool use summaries
  4. HTML Generation: Constructs timestamped blog posts with granular sections:
  • Files Modified (with paths)
  • Commands Executed (with sanitized output)
  • Infrastructure Changes (CloudFront invalidations, DNS updates, S3 permissions)
  • Technical Decisions and Rationale
  • Implementation Details
  1. Multi-Domain Publishing: Routes generated posts to the appropriate S3 bucket based on project context (detected from file paths in the transcript)
  2. CloudFront Invalidation: Triggers cache invalidation on the distribution to ensure new posts appear immediately

The generator uses a configuration file (~/.claude/projects/[repo-path]/memory/infrastructure_config.json) to map S3 buckets and CloudFront distribution IDs to domains.

Claude Code Integration

The Stop hook (/Users/cb/.claude/hooks/tech_blog_stop.sh) is configured in the Claude Code settings and executes automatically when a session ends:

#!/bin/bash
set -e

REPO_PATH="/Users/cb/Documents/repos"
TOOLS_DIR="$REPO_PATH/tools"
SESSION_FILE="$1"

python3 "$TOOLS_DIR/tech_blog_generator.py" "$SESSION_FILE" 2>&1 | tee -a ~/.claude/logs/tech_blog.log

exit 0

The hook passes the active session file path to the generator. Logs are written to ~/.claude/logs/tech_blog.log for auditing and debugging.

DNS Configuration Details

AWS-Managed Domains (Route53):

  • queenofsandiego.com: CNAME record for tech.queenofsandiego.com → CloudFront distribution domain
  • sailjada.com: CNAME record for tech.sailjada.com → CloudFront distribution domain

Third-Party DNS Providers:

  • dangerouscentaur.com (Namecheap): CNAME record for tech.dangerouscentaur.com pointing to the wildcard CloudFront distribution
  • burialsatseasandiego.com (GoDaddy): CNAME record for tech.burialsatseasandiego.com; ACM certificate validation via DNS CNAME in GoDaddy (cert issued to *.burialsatseasandiego.com)

Navigation Integration

All four primary sites (queenofsandiego.com, sailjada.com, dangerouscentaur.com, burialsatseasandiego.com) now expose the tech blog via the Ship's Papers dropdown menu in the site navigation. The menu link points to /tech/ or the tech subdomain (e.g., https://tech.queenofsandiego.com/), providing immediate visibility to stakeholders like Sergio.

Security and Compliance

The content sanitization layer is critical. The generator uses a whitelist-based approach, explicitly removing patterns matching:

  • AWS credentials and access keys
  • API tokens and authentication headers
  • Database passwords and connection strings
  • GoDaddy, Namecheap, and Route53 API keys
  • Email addresses and phone numbers from command output
  • File paths containing credential references

This ensures the technical blog is safe for internal distribution and stakeholder review without exposing operational secrets.

Key Technical Decisions

Why JSONL Session Format: Claude's native session format is line-delimited JSON, which is more reliably parseable than reconstructing state from markdown transcripts. Each tool invocation includes input, output, and metadata, providing granular audit trails.

Why CloudFront for All Four Domains: CloudFront provides global caching (critical for a multi-region audience), automatic HTTPS enforcement, and low latency. The wildcard certificate approach (*.queenofsandiego.com, *.sailjada.