Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

```html

Building a Multi-Site Auto-Generated Technical Blog System with Session Capture and Infrastructure as Code

What Was Done

Implemented a comprehensive technical blog automation system that captures development session activities across four domains (queenofsandiego.com, sailjada.com, dangerouscentaur.com, and burialsatseasandiego.com) and automatically generates granular technical posts. The system uses Claude Code session hooks to capture detailed work artifacts, processes them through a Python generator, and deploys blog posts to CloudFront-backed S3 buckets with full infrastructure provisioning.

Architecture Overview

The system consists of three primary components:

  • Session Capture Layer: A stop hook in Claude Code that captures session transcripts in JSONL format from /Users/cb/.claude/sessions/
  • Blog Generation Pipeline: Python scripts (tech_blog_generator.py and tech_blog_init.py) that parse transcripts, extract structured data, and generate HTML posts
  • Infrastructure Layer: AWS S3 buckets, CloudFront distributions, and DNS configuration (Route53 for queenofsandiego.com and sailjada.com, Namecheap for dangerouscentaur.com, GoDaddy for burialsatseasandiego.com)

Technical Implementation Details

Session Capture Hook

Created /Users/cb/.claude/hooks/tech_blog_stop.sh as an executable bash script that fires when Claude Code sessions end. The hook:

  • Reads the most recent session transcript from ~/.claude/sessions/ (JSONL format with message history and tool use entries)
  • Extracts metadata: session ID, timestamp, file modifications, commands executed
  • Invokes the Python generator with the transcript path and domain context
  • Logs all activity to ~/.claude/logs/tech_blog_hook.log for debugging

The hook was registered in /Users/cb/.claude/settings.json under the hooks configuration array, enabling automatic invocation.

Blog Generator Engine

The tech_blog_generator.py script parses JSONL session transcripts and generates structured HTML blog posts. Key processing steps:

  • Transcript Parsing: Reads JSONL format where each line contains a message object with role, content, and optional tool_use blocks
  • Data Extraction: Identifies file modifications (from tool use entries), command executions, and reasoning/agent notes
  • HTML Generation: Constructs semantic HTML with <h2>/<h3> headers, code blocks for commands and file paths, and <ul>/<li> lists for organized information
  • Sanitization: Strips credentials, API keys, tokens, and sensitive data using regex patterns before publishing
  • S3 Upload: Posts generated HTML to domain-specific S3 buckets with consistent naming (YYYY-MM-DD-HH-MM-SS-slug.html)

The generator respects environment variables to determine which domain bucket to target, allowing the same script to serve all four sites.

Infrastructure Initialization

The tech_blog_init.py script provisions all necessary AWS and DNS resources:

  • S3 Buckets: Creates domain-specific buckets (e.g., tech-qos, tech-jada, tech-dc-sites, tech-bats) with public read ACLs and static website hosting enabled
  • CloudFront Distributions: Provisions distributions with ACM certificates and custom domain CNAMEs
  • Route53 DNS: Creates CNAME records pointing subdomains to CloudFront distribution domain names (for queenofsandiego.com and sailjada.com)
  • Namecheap/GoDaddy Integration: For domains not in Route53, the script outputs DNS records requiring manual addition (dangerouscentaur.com via Namecheap, burialsatseasandiego.com via GoDaddy)

The script uses AWS boto3 client calls with explicit error handling and provides detailed output of created resources for audit purposes.

Domain-Specific Configuration

Domain S3 Bucket CF Distribution DNS Provider
tech.queenofsandiego.com tech-qos Route53 CNAME Route53
tech.sailjada.com tech-jada Route53 CNAME Route53
tech.dangerouscentaur.com dc-sites (shared) Existing wildcard (E2Q4UU71SRNTMB) Namecheap CNAME
tech.burialsatseasandiego.com tech-bats New CloudFront dist GoDaddy CNAME

Integration with Ship's Papers Navigation

Updated /Users/cb/Documents/repos/sites/queenofsandiego.com/index.html to add a "Technical Blog" link in the Ship's Papers dropdown menu. The menu structure follows existing patterns with dropdown navigation elements, pointing to https://tech.queenofsandiego.com. This makes blog visibility discoverable from the main site.

Key Technical Decisions