```html

Building an Automated Technical Blog System Across Four Domain Properties

This session involved architecting and implementing a multi-property technical blog infrastructure that automatically captures development work across queenofsandiego.com, sailjada.com, dangerouscentaur.com, and burialsatseasandiego.com. The system generates granular, developer-focused posts from Claude Code session transcripts, making all technical decisions and changes visible to stakeholders in real time.

What Was Done

  • Created automated blog generation system that parses Claude Code session transcripts and converts them into technical blog posts
  • Provisioned S3 buckets, CloudFront distributions, and DNS records for four separate tech blog subdomains
  • Integrated tech blog navigation into the Ship's Papers menu on queenofsandiego.com
  • Established Claude Code Stop hooks that trigger blog post generation at session end
  • Configured domain-specific infrastructure with appropriate SSL certificates and DNS routing

Technical Architecture

Blog Generation Engine

The system consists of three primary Python modules:

tech_blog_generator.py — Parses Claude Code session transcripts in JSONL format (stored in ~/.claude/sessions/), extracts tool use blocks and command execution records, and generates structured HTML blog posts. The generator reads file modification logs, command history, and reasoning notes, then synthesizes them into coherent narrative sections.

tech_blog_init.py — Infrastructure provisioning script that creates:

  • S3 buckets with names following pattern tech-[domain]-blog (e.g., tech-queenofsandiego-blog, tech-sailjada-blog, dc-tech-blog for dangerouscentaur, tech-burialsatseasandiego-blog)
  • CloudFront distributions with appropriate origins, caching policies, and SSL certificates
  • DNS CNAME records pointing subdomains to CloudFront distribution domain names

tech_blog_stop.sh — Bash hook registered in Claude Code settings at ~/.claude/settings.json that executes when a development session ends. This hook invokes the Python generator and uploads the resulting HTML to the appropriate S3 bucket, triggering automatic blog publication.

Infrastructure Deployment Details

queenofsandiego.com tech blog: Deployed to S3 bucket tech-queenofsandiego-blog with CloudFront distribution origin pointing to that bucket. Uses existing wildcard certificate *.queenofsandiego.com (verified to exist via ACM). DNS CNAME record created in Route53 hosted zone for queenofsandiego.com, routing tech.queenofsandiego.com to CloudFront domain.

sailjada.com tech blog: Deployed to S3 bucket tech-sailjada-blog with CloudFront distribution. Leverages existing wildcard certificate *.sailjada.com. Route53 CNAME record routes tech.sailjada.com traffic to CloudFront distribution.

dangerouscentaur.com tech blog: Deployed to S3 bucket dc-tech-blog with CloudFront distribution. dangerouscentaur domain uses Namecheap DNS, so CNAME record is created at Namecheap instead of Route53, pointing tech.dangerouscentaur.com to the CloudFront distribution domain.

burialsatseasandiego.com tech blog: Deployed to S3 bucket tech-burialsatseasandiego-blog with CloudFront distribution. Requires new ACM certificate for *.burialsatseasandiego.com since this domain uses GoDaddy DNS. Certificate validation requires adding DNS CNAME record to GoDaddy DNS panel. Once validated, CloudFront distribution becomes active, and CNAME record routes tech.burialsatseasandiego.com traffic appropriately.

Session Transcript Processing

Claude Code stores session transcripts as JSONL files in ~/.claude/sessions/. Each line is a valid JSON object representing a conversation turn, tool use, or command execution. The blog generator extracts relevant information:

  • Files modified/created: Read directly from JSONL "Write:" and "Edit:" entries, capturing exact filesystem paths and operation type
  • Commands executed: Parsed from command history blocks, including full command syntax and order of execution
  • Agent reasoning: Extracted from Claude's internal notes explaining decision-making and architectural choices
  • Tool use details: AWS API calls, Python script executions, and infrastructure changes captured with exact resource identifiers

The generator filters out sensitive information (credentials, API keys, tokens, passwords, personal data) before rendering the HTML post.

Navigation Integration

Modified /Users/cb/Documents/repos/sites/queenofsandiego.com/index.html to add tech blog links to the Ship's Papers menu dropdown. The navigation structure now includes anchor links to each of the four tech blogs, making development transparency immediately visible to site visitors (particularly Sergio and engineering stakeholders).

Infrastructure Deployment Process

The initialization script performs these steps in sequence:

  1. Checks for existing ACM certificates matching required wildcard patterns
  2. Creates S3 bucket with versioning enabled and public read access configured
  3. Provisions CloudFront distribution with:
  4. S3 bucket as origin
  5. HTTPS-only enforcement
  6. Appropriate SSL certificate binding
  7. Cache control headers optimized for blog content (24-hour TTL for HTML, longer for static assets)
  8. Creates DNS records in appropriate provider (Route53 for AWS-managed domains, Namecheap for dangerouscentaur, GoDaddy for burialsatseasandiego)
  9. Waits for DNS propagation and CloudFront distribution activation
  10. Tests HTTP/HTTPS accessibility before declaring success

Key Decisions

Subdomain pattern: Using tech.[domain] keeps technical content clearly separated from marketing/operations content while maintaining strong visual association with each property.

CloudFront distribution per domain: Rather than consolidating all four tech blogs into a single CloudFront distribution, separate distributions were created to enable independent caching policies, certificate management, and traffic monitoring per property. This improves troubleshooting visibility and allows Sergio to see metrics per domain.

Automatic session-end publishing: Registering the Stop hook in Claude Code settings ensures blog posts are generated immediately after sessions end, with zero manual intervention. This maximizes freshness and prevents work from going undocumented.

Granular transcript parsing: Rather than high-level summaries, the generator captures exact file paths, function names, S3 bucket names, CloudFront distribution IDs, and command syntax. This gives Sergio complete visibility into technical decisions and allows him to audit or replicate work.

What's Next

  • Monitor CloudFront distribution activation status for burialsatseasandiego.com once ACM certificate validation completes
  • Test blog post generation on subsequent development sessions