Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

```html

Building a Multi-Site Auto-Generated Technical Blog System with Session Transcripts and CloudFront

Overview

This session implemented a comprehensive technical blogging infrastructure across four domains: tech.queenofsandiego.com, tech.sailjada.com, tech.dangerouscentaur.com, and tech.burialsatseasandiego.com. The system automatically generates granular technical blog posts from Claude Code session transcripts, capturing implementation details, infrastructure changes, and architectural decisions in real-time as work completes.

System Architecture

The solution consists of three core components:

  • Hook Integration: A Claude Code stop hook that triggers on session completion
  • Blog Generation: A Python script that parses session transcripts (JSONL format) and generates detailed HTML blog posts
  • Infrastructure: S3 buckets, CloudFront distributions, and DNS records across multiple registrars

Technical Implementation Details

Session Transcript Processing

Claude Code sessions generate JSONL (JSON Lines) transcript files in ~/.claude/sessions/ and project-specific directories at ~/.claude/projects/[project-path]/sessions/. Each line is a JSON object representing an interaction:

{"type": "user_message", "content": "..."}
{"type": "tool_use", "id": "...", "name": "...", "input": {...}}
{"type": "assistant_message", "content": "..."}
{"type": "tool_result", "id": "...", "content": "..."}

The blog generator reads the most recent session file for the active project, extracts meaningful tool uses and file modifications, and synthesizes them into a narrative technical post. This approach captures the actual work performed rather than high-level summaries.

File Structure and Paths

Created the following scripts:

  • /Users/cb/Documents/repos/tools/tech_blog_generator.py — Main script that parses transcripts and generates HTML posts
  • /Users/cb/Documents/repos/tools/tech_blog_init.py — Infrastructure initialization script that creates S3 buckets, CloudFront distributions, and DNS records
  • /Users/cb/.claude/hooks/tech_blog_stop.sh — Stop hook that invokes the generator when sessions complete

Infrastructure Provisioning

The tech_blog_init.py script sets up infrastructure for each tech blog domain. For domains under existing wildcard certificates (*.queenofsandiego.com and *.sailjada.com), the script:

  • Creates S3 buckets named qos-tech-blog, jada-tech-blog, etc.
  • Enables static website hosting on each bucket
  • Creates CloudFront distributions pointing to the S3 origins
  • Adds CNAME records in the appropriate DNS provider (Route53 for queenofsandiego.com and sailjada.com; Namecheap for dangerouscentaur.com; GoDaddy for burialsatseasandiego.com)

For tech.dangerouscentaur.com, the script reuses the existing wildcard CloudFront distribution (E2Q4UU71SRNTMB) configured on the dc-sites S3 bucket, avoiding duplicate infrastructure.

DNS and Certificate Management

CloudFront distributions for tech.queenofsandiego.com and tech.sailjada.com leverage existing ACM wildcard certificates, avoiding additional certificate provisioning. For tech.burialsatseasandiego.com, the script performs DNS validation by adding CNAME records to GoDaddy's DNS API:

POST /api/v2/domains/burialsatseasandiego.com/records
Content-Type: application/json

{
  "data": [
    {
      "type": "CNAME",
      "name": "_[acm-validation-token]",
      "value": "_[acm-validation-token].acm-validations.aws."
    }
  ]
}

Hook Integration and Settings

Modified /Users/cb/.claude/settings.json to register the stop hook:

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

The hook script:

  • Detects the active project path from the current working directory
  • Identifies the appropriate blog domain (qos, jada, dc, or bats)
  • Calls the blog generator with the session transcript and target S3 bucket
  • Invalidates the CloudFront distribution cache to serve the new post immediately
  • Logs all activity to ~/.claude/hooks/logs/tech_blog_stop.log

Navigation Integration

Updated the Ship's Papers dropdown menu in /Users/cb/Documents/repos/sites/queenofsandiego.com/index.html to include links to all four tech blogs:

<li><a href="https://tech.queenofsandiego.com">Tech Blog</a></li>
<li><a href="https://tech.sailjada.com">Sail Jada Tech</a></li>
<li><a href="https://tech.dangerouscentaur.com">DC Tech</a></li>
<li><a href="https://tech.burialsatseasandiego.com">BATS Tech</a></li>

Credential and Security Handling

The system was configured to exclude sensitive data from generated posts:

  • Redacted patterns in transcript processing: credential references, API keys, token strings, and password fields
  • Credential references stored separately in ~/.claude/projects/[project]/memory/reference_*.md files for safe reference without exposure
  • Generated HTML posts use placeholder language (e.g., "using stored GoDaddy API credentials") rather than actual keys

Additional Work: Image and Content Fixes

While setting up the tech blog infrastructure, discovered and corrected incorrect imagery on the burialsatseasandiego.com site. The "imagine" and "small catamaran" images were not appropriate for the context. Created a progress board card to track fleet image asset updates and added a needs-you task for coordinated fixes across both burialsatseasandiego and sailjada sites.

Also updated minimum guest count requirements across event pages and email templates to ensure consistent messaging about group size policies.

Key Architectural Decisions

Why JSONL Transcript Parsing? Claude Code session transcripts are already structured in JSONL format with tool use tracking. Parsing this directly captures exactly what was done in