Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

```html

Implementing Automated Technical Blog Generation Across Four Sites with AWS Infrastructure

This session implemented a comprehensive automated technical blogging system for four related maritime/event booking sites, capturing detailed development session data and publishing it to dedicated tech blogs. The system extracts granular technical details from Claude Code session transcripts, generates formatted blog posts, and deploys them to S3/CloudFront-backed subdomains with zero manual intervention.

Architecture Overview

The system consists of three key components:

  • Session Capture: Claude Code's native session transcript export (JSONL format) containing file modifications, commands executed, and reasoning
  • Blog Generation: Python script parsing transcripts, extracting technical details, filtering sensitive data, and generating HTML posts
  • Infrastructure Deployment: AWS S3 buckets, CloudFront distributions, ACM certificates, and DNS integration (Route53 for queenofsandiego.com/sailjada.com, Namecheap for dangerouscentaur.com, GoDaddy for burialsatseasandiego.com)

Infrastructure Setup

Four identical tech blog stacks were provisioned:

  • tech.queenofsandiego.com: S3 bucket qos-tech-blog, CloudFront distribution with Route53 ALIAS records, ACM wildcard cert *.queenofsandiego.com
  • tech.sailjada.com: S3 bucket jada-tech-blog, CloudFront distribution with Route53 ALIAS records, ACM wildcard cert *.sailjada.com
  • tech.dangerouscentaur.com: S3 bucket dc-sites (leveraging existing wildcard CloudFront distribution E2Q4UU71SRNTMB), Namecheap CNAME record pointing to CloudFront domain
  • tech.burialsatseasandiego.com: S3 bucket bats-tech-blog, CloudFront distribution, GoDaddy DNS CNAME record, ACM cert with DNS validation via GoDaddy API

The infrastructure-as-code approach stores configuration in /Users/cb/.claude/projects/-Users-cb-Documents-repos/memory/project_tech_blogs.md to enable reproducible deployments and facilitate handoffs to Sergio's team.

Blog Generation Pipeline

The generator (/Users/cb/Documents/repos/tools/tech_blog_generator.py) implements a sophisticated filtering and formatting pipeline:

  • Transcript Parsing: Reads JSONL session files from ~/.claude/sessions/, extracting tool calls and file modifications with full context
  • Sensitive Data Filtering: Regular expressions strip credentials, API keys, passwords, and personal information before publication. Redaction includes AWS credentials, GoDaddy API tokens, email addresses, and phone numbers
  • Granular Detail Extraction: Preserves exact file paths, function names, CloudFront distribution IDs, S3 bucket names, Route53 hosted zone operations, and command examples
  • HTML Formatting: Generates semantic HTML with proper heading hierarchy, code blocks for technical content, and unordered lists for clarity
  • Metadata Generation: Timestamps, session IDs, and site routing based on which domains were modified in the session

The generator uses environment variables to determine target sites: 

TECH_BLOG_SITES=queenofsandiego,sailjada,dangerouscentaur,burialsatseasandiego
CLAUDE_SESSIONS_DIR=/Users/cb/.claude/sessions/
REPOS_PATH=/Users/cb/Documents/repos/

Claude Code Integration

A Stop hook (/Users/cb/.claude/hooks/tech_blog_stop.sh) automatically triggers after session completion. The hook:

  • Exports the current session transcript
  • Invokes the blog generator with the transcript path
  • Uploads generated HTML files to their respective S3 buckets using AWS CLI with appropriate CloudFront cache invalidation
  • Logs all operations to ~/.claude/logs/tech_blog_generation.log for debugging
  • Returns success/failure status without blocking the session end process

The hook is registered in ~/.claude/settings.json under the hooks configuration, enabling automatic publication without requiring manual commands.

Navigation Integration

The Ship's Papers menu (found in /Users/cb/Documents/repos/sites/queenofsandiego.com/index.html) was updated to expose tech blog links. The dropdown structure follows existing site conventions:

<li class="dropdown">
  <a href="#">Ship's Papers</a>
  <ul class="dropdown-menu">
    <li><a href="https://tech.queenofsandiego.com/">Tech Blog</a></li>
    ...
  </ul>
</li>

Similar navigation updates were applied to sailjada.com, dangerouscentaur.com, and burialsatseasandiego.com to maintain consistent UX across the fleet.

Key Technical Decisions

Why S3 + CloudFront vs. a traditional CMS? The static site approach eliminates server management overhead, provides built-in CDN distribution for global performance, and leverages existing AWS infrastructure. CloudFront's cache invalidation enables near-instant publication after S3 uploads.

Why automated transcript parsing instead of manual blog writing? Manual documentation creates bottlenecks and drift. Automated extraction from session data ensures completeness, captures decisions in context, and scales to multiple concurrent projects. The filtering layer prevents credential leaks while preserving technical depth.

Why separate DNS providers? The existing infrastructure uses Route53 for queenofsandiego.com and sailjada.com (centralized management), Namecheap for dangerouscentaur.com (GoDaddy nameserver delegation), and GoDaddy for burialsatseasandiego.com. Rather than consolidating (which would require domain transfers), the init script handles provider-specific DNS operations via their respective APIs.

Why filter transcripts at generation time instead of filtering at capture time? Filtering during capture would lose information for internal audit trails. Post-generation filtering allows the same source data to be used for multiple purposes (public blog posts, internal documentation, compliance audits) while maintaining appropriate visibility levels for each use case.

Deployment and Testing

The initialization script (/Users/cb/Documents/repos/tools/tech_blog_init.py) performed end-to-end validation:

  • Created S3 buckets with versioning and public read access
  • Provisioned CloudFront distributions with origin access identities and custom domain aliases
  • Requested and validated ACM certificates (with DNS CNAME validation for GoDaddy domains)
  • Configured DNS records (Route53 ALIAS records, Namecheap CNAME, GoDaddy CNAME)
  • Tested HTTP/HTTPS accessibility before marking infrastructure