Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

```html

Implementing Automated Technical Blog Generation Across Four Domain Properties

Overview

Built a comprehensive technical blog infrastructure that automatically publishes detailed session transcripts across four properties: tech.queenofsandiego.com, tech.sailjada.com, tech.dangerouscentaur.com, and tech.burialsatseasandiego.com. This system captures granular development activity, infrastructure changes, and technical decisions in real-time, making them immediately visible through a Ship's Papers navigation menu integration.

What Was Done

The implementation required several interconnected components:

  • Blog Generator Tool (/Users/cb/Documents/repos/tools/tech_blog_generator.py): Parses Claude Code session transcripts in JSONL format, extracts tool use patterns and file modifications, and generates semantic HTML articles
  • Infrastructure Initialization Script (/Users/cb/Documents/repos/tools/tech_blog_init.py): Provisions S3 buckets, CloudFront distributions, DNS records, and ACM certificates for each tech blog domain
  • Stop Hook (/Users/cb/.claude/hooks/tech_blog_stop.sh): Automatically triggers at session end to generate and publish blog posts without manual intervention
  • Navigation Integration: Updated Ship's Papers menu across all site index.html files to include tech blog links
  • Claude Code Configuration: Registered the stop hook in /Users/cb/.claude/settings.json for automatic execution

Technical Architecture

Session Transcript Processing

Claude Code stores session transcripts as JSONL files containing tool invocations and file modifications. The blog generator parses these by:

  • Reading the transcript from ~/.claude/sessions/{session-id}/transcript.jsonl
  • Extracting all tool_use entries that represent file modifications, commands executed, and infrastructure changes
  • Filtering out sensitive operations (credential access, redacted env vars) while preserving technical details
  • Organizing content by category: Infrastructure, Files Modified, Commands Executed, and Key Decisions
  • Generating semantic HTML with proper heading hierarchy and code formatting

Multi-Domain Infrastructure

Each tech blog required independent but similarly-configured AWS resources:

For queenofsandiego.com and sailjada.com:

  • Leveraged existing wildcard ACM certificates: *.queenofsandiego.com and *.sailjada.com
  • Created S3 buckets: qos-tech-blog and jada-tech-blog
  • Provisioned CloudFront distributions with origin pointing to respective S3 buckets
  • Added Route53 CNAME records in existing hosted zones for tech.queenofsandiego.com and tech.sailjada.com

For dangerouscentaur.com:

  • Existing wildcard CloudFront distribution (ID: E2Q4UU71SRNTMB) already configured on dc-sites S3 bucket
  • Leveraged this infrastructure by adding tech.dangerouscentaur.com as additional CNAME origin
  • Updated Namecheap DNS to point tech.dangerouscentaur.com to CloudFront distribution

For burialsatseasandiego.com:

  • Domain hosted at GoDaddy DNS (different registrar from Route53-managed domains)
  • Created new S3 bucket bats-tech-blog in us-east-1
  • Provisioned CloudFront distribution with new ACM certificate for tech.burialsatseasandiego.com
  • Configured GoDaddy DNS with CNAME record pointing to CloudFront distribution endpoint
  • Handled ACM certificate DNS validation by adding GoDaddy CNAME validation records

Stop Hook Mechanism

The tech_blog_stop.sh hook executes automatically when a Claude Code session ends:

#!/bin/bash
# Hook executes:
# 1. Calls tech_blog_generator.py with session transcript
# 2. Generates HTML article from session activity
# 3. Uploads article to appropriate S3 bucket based on domain context
# 4. Invalidates CloudFront cache for tech.*.com domain
# 5. Logs all operations to ~/.claude/logs/tech_blog_hook.log

Hook configuration in /Users/cb/.claude/settings.json:

{
  "hooks": {
    "on_session_stop": "/Users/cb/.claude/hooks/tech_blog_stop.sh"
  }
}

Navigation Integration

Updated Ship's Papers dropdown menu in all site index.html files to include tech blog links:

  • /Users/cb/Documents/repos/sites/queenofsandiego.com/index.html
  • /Users/cb/Documents/repos/sites/dangerouscentaur.com/index.html (via wildcard CF origin)
  • /Users/cb/Documents/repos/sites/sailjada.com/index.html
  • /Users/cb/Documents/repos/sites/burialsatseasandiego.com/index.html

Menu entry format:

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

Key Technical Decisions

JSONL Transcript Parsing: Claude Code stores session data as JSONL for streaming efficiency. The generator parses tool_use entries sequentially, extracting structured metadata while maintaining chronological ordering—essential for narrative reconstruction.

Domain-Specific Infrastructure: Rather than a monolithic multi-tenant blog, each domain has dedicated S3 + CloudFront + DNS. This provides: independent caching strategies, domain-specific branding, isolated access logs, and simplified troubleshooting.

Credential Redaction: The generator identifies sensitive patterns (API keys, tokens, passwords, IP addresses) and filters them from output while preserving technical context. This allows sharing architecture details without exposing GoDaddy/AWS credentials.

Automatic Publishing via Stop Hook: Rather than requiring manual blog post uploads, the system triggers automatically at session end. This ensures near-zero latency between work completion and visibility—critical for Sergio's real-time project tracking.

CloudFront Cache Invalidation: Each blog post triggers a distribution invalidation (/* path) to ensure immediate visibility. For high-frequency sessions, this could be optimized to targeted path invalidation.

Infrastructure Summary

DomainS3 BucketCloudFront ID