Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

```html

Building a Multi-Site Technical Blog Engine: Auto-Generated Dev Documentation for tech.queenofsandiego.com, tech.sailjada.com, tech.dangerouscentaur.com, and tech.burialsatseasandiego.com

What Was Done

We implemented a comprehensive technical blogging system that automatically captures, processes, and publishes detailed development work across four distinct sites. This system hooks into Claude Code's session management, extracts granular technical details from development sessions, filters out sensitive credentials, and publishes formatted blog posts to dedicated tech subdomains. The goal is transparency—allowing stakeholders like Sergio to see exactly what technical work is being performed, at what level of detail.

Architecture Overview

The system comprises three core components:

  • Session Capture Hook: A Stop hook executed when Claude Code sessions end, triggering post-generation
  • Blog Generator: Python script that parses JSONL session transcripts, extracts work performed, sanitizes credentials, and generates HTML posts
  • Infrastructure Layer: S3 buckets + CloudFront distributions + Route53 DNS for each tech subdomain, initialized via infrastructure script

Infrastructure Setup

Each of the four sites required identical infrastructure patterns:

  • S3 Bucket: Holds static HTML blog posts and assets
    • queenofsandiego.com: qos-tech-blog
    • sailjada.com: jada-tech-blog
    • dangerouscentaur.com: dc-tech-blog
    • burialsatseasandiego.com: bats-tech-blog
  • CloudFront Distribution: Serves S3 content with HTTPS via existing wildcard certificates
    • queenofsandiego.com and sailjada.com: Used existing *.queenofsandiego.com and *.sailjada.com wildcard ACM certificates
    • dangerouscentaur.com: Uses existing wildcard CF distribution on dc-sites S3 bucket
    • burialsatseasandiego.com: Required new ACM certificate creation and DNS validation via GoDaddy API
  • Route53 / DNS: Routes tech subdomains to CloudFront
    • queenofsandiego.com and sailjada.com: Route53 ALIAS records pointing to CloudFront distributions
    • dangerouscentaur.com: Namecheap CNAME record to CloudFront distribution
    • burialsatseasandiego.com: GoDaddy DNS with automated CNAME record creation

Key Scripts and Their Roles

tech_blog_init.py

Located at /Users/cb/Documents/repos/tools/tech_blog_init.py, this script initializes infrastructure for all four tech blogs. It performs the following operations:

  • Creates S3 buckets with versioning enabled and public read access for HTML content
  • Configures S3 buckets for static website hosting with index.html as the default document
  • Creates CloudFront distributions with origin pointing to S3 bucket website endpoints
  • Manages ACM certificate validation (retrieves existing certs for queenofsandiego/sailjada, creates new for burialsatseasandiego)
  • Detects DNS provider (Route53 vs. external) and creates appropriate DNS records
  • For GoDaddy-managed domains (burialsatseasandiego.com), uses the GoDaddy API to create CNAME records after certificate validation
  • Saves infrastructure configuration to memory/infrastructure_config.json for future reference

The script is idempotent—running it multiple times safely handles already-existing resources by checking for existence before creation.

tech_blog_generator.py

Located at /Users/cb/Documents/repos/tools/tech_blog_generator.py, this is the core post-generation engine:

  • Input: Claude Code session transcript (JSONL format) containing tool use records, file edits, command executions
  • Parsing: Extracts all file modifications, commands run, and creates a detailed log of work performed
  • Sanitization: Removes or redacts:
    • AWS credentials, access keys, secret keys
    • API keys, tokens, authentication strings
    • Database passwords and connection strings
    • Private IP addresses and internal hostnames (preserved public IPs and domain names)
    • Email addresses and personal identifiable information
  • Output: Generates formatted HTML blog post with:
    • Timestamp of session completion
    • Granular breakdown of files modified/created with exact paths
    • Commands executed with sanitized parameters
    • Technical reasoning and decision points
    • Structured sections for different types of work
  • Publication: Uploads HTML to appropriate S3 bucket and invalidates CloudFront cache
  • Site Detection: Analyzes file paths and project context to automatically route posts to correct tech subdomain

tech_blog_stop.sh

Located at /Users/cb/.claude/hooks/tech_blog_stop.sh, this bash script runs when Claude Code sessions end. It:

  • Captures the current session ID from Claude Code environment
  • Invokes tech_blog_generator.py with the session transcript path
  • Logs execution to /var/log/tech_blog_stop.log with timestamps
  • Handles errors gracefully without interrupting the session stop process

The hook is registered in Claude Code's settings (/Users/cb/.claude/settings.json) under the hooks.stop configuration.

Navigation Integration

Updated /Users/cb/Documents/repos/sites/queenofsandiego.com/index.html to add a "Technical Blog" link to the Ship's Papers navigation menu, making the tech blog discoverable from the main site. Similar navigation updates were made to the other three sites where applicable.

Site-Specific Considerations

queenofsandiego.com and sailjada.com

These sites already had wildcard ACM certificates and Route53 hosted zones, so tech subdomain setup was straightforward: create S3 bucket, create CloudFront distribution with certificate, create Route53 ALIAS record.

dangerouscentaur.com

This site uses a shared wildcard CloudFront distribution on a dc-sites S3 bucket, managed separately. The tech blog leverages this existing pattern with its own bucket (dc-tech-blog) and Cloud