Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

```html

Building an Automated Technical Blog System Across Four Domains with Session-Based Post Generation

What Was Done

I built a complete technical blogging infrastructure that automatically generates detailed, granular blog posts documenting development work across four domains: tech.queenofsandiego.com, tech.dangerouscentaur.com, tech.sailjada.com, and tech.burialsatseasandiego.com. The system captures Claude Code session transcripts, extracts tool use and file modifications, and publishes formatted HTML articles to the respective tech blogs immediately upon session completion.

Technical Architecture

Core Components

The system consists of three primary Python modules:

  • tech_blog_generator.py — Parses JSONL session transcripts from ~/.claude/sessions, extracts file modifications, command executions, and tool use patterns, then generates HTML blog posts with embedded command examples and architectural decisions.
  • tech_blog_init.py — Provisions infrastructure for each domain: creates S3 buckets for static content, configures CloudFront distributions with ACM SSL certificates, manages DNS entries across Route53 and third-party DNS providers (Namecheap, GoDaddy), and stores infrastructure metadata.
  • tech_blog_stop.sh — Claude Code Stop hook that triggers post-generation when a development session ends. This hook runs automatically through the Claude Code extension, ensuring zero-friction blog publishing.

Infrastructure Decisions and Implementation

Each domain required different infrastructure approaches based on existing wildcard certificates and DNS providers:

  • queenofsandiego.com: Used existing wildcard ACM cert (*.queenofsandiego.com) from Route53 hosted zone. Created S3 bucket qos-tech-blog, CloudFront distribution with origin pointing to the bucket, and added Route53 CNAME record for tech.queenofsandiego.com.
  • sailjada.com: Leveraged existing wildcard ACM cert (*.sailjada.com) from Route53 hosted zone. Created S3 bucket sailjada-tech-blog, CloudFront distribution, and Route53 CNAME record for tech.sailjada.com.
  • dangerouscentaur.com: Existing wildcard CloudFront distribution (ID: E2Q4UU71SRNTMB) on S3 bucket dc-sites allowed reuse. Added tech.dangerouscentaur.com as alternate domain name to existing distribution and created CNAME record in Namecheap DNS.
  • burialsatseasandiego.com: Domain uses GoDaddy DNS with no existing wildcard cert. Provisioned new ACM certificate for tech.burialsatseasandiego.com, created S3 bucket bats-tech-blog, CloudFront distribution, and added ACM DNS validation CNAME to GoDaddy DNS programmatically.

Session Transcript Parsing and Post Generation

The blog generator processes Claude Code session files stored in JSONL format at ~/.claude/sessions. Each session transcript contains:

  • File writes and edits with full paths (e.g., /Users/cb/Documents/repos/tools/tech_blog_generator.py)
  • Command executions with arguments (command names and output)
  • Tool use entries documenting API calls and infrastructure changes
  • Conversation messages providing context and decision rationale

The generator extracts this metadata and structures it into HTML articles with sections for:

  • What Was Done — High-level overview of work completed
  • Technical Details — Specific files modified, functions changed, code patterns introduced
  • Infrastructure Changes — S3 buckets created, CloudFront distributions modified, DNS records added
  • Key Decisions — Why specific architectural choices were made
  • What's Next — Outstanding items or follow-up work

Credential and Sensitive Data Handling

The generator applies strict filtering to prevent credential leakage. Any content matching patterns for API keys, passwords, tokens, or sensitive configuration is redacted or excluded entirely. Environment variables are referenced by name only, never by value. This allows engineers reading the blog to understand what was done without exposing authentication material.

Site Navigation Integration

Updated the main navigation structure on queenofsandiego.com/index.html to include a "Ship's Papers" dropdown menu that links to:

  • Existing operational pages (events, concert nights, etc.)
  • New "Technical Blog" link pointing to tech.queenofsandiego.com

This pattern will be replicated across the other three sites, ensuring technical documentation is discoverable from the main navigation without cluttering the primary user-facing content.

Deployment and DNS Propagation

All four domains now have DNS records pointing to their respective CloudFront distributions. SSL certificates are either pre-existing (Route53-managed wildcards) or newly provisioned with ACM. CloudFront cache behavior is configured to serve index.html for the root path and to invalidate caches upon new post publication.

Example command for cache invalidation after publishing a new post:

aws cloudfront create-invalidation \
  --distribution-id E2Q4UU71SRNTMB \
  --paths "/*"

Automation Through Claude Code Hooks

The Stop hook (~/.claude/hooks/tech_blog_stop.sh) is registered in Claude Code settings under stopHook. When a development session ends, this hook:

  • Reads the session transcript from ~/.claude/sessions/<session-id>.jsonl
  • Invokes tech_blog_generator.py to generate HTML
  • Determines the target domain based on repository path
  • Uploads the new post to the appropriate S3 bucket
  • Triggers CloudFront cache invalidation
  • Logs success/failure to ~/.claude/logs/tech_blog_hook.log

This ensures that within seconds of finishing development work, a detailed technical post is live and discoverable by Sergio and other team members.

Infrastructure Configuration Storage

Created project_tech_blogs.md in the Claude projects memory directory to store infrastructure metadata including bucket names, distribution IDs, domain mappings, and DNS provider information. This allows the generator and future maintenance scripts to reference canonical configuration without hardcoding values.

What's Next

  • Test the complete flow with live sessions to verify post generation, upload, and DNS propagation
  • Add comment/feedback mechanism to technical blog posts for async communication
  • Implement post indexing and search across all four tech blog domains
  • Create dashboard view showing recent posts from all four blogs in one place
```