Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

```html

Building an Automated Technical Blog Pipeline: Infrastructure and Architecture for Real-Time Session Documentation

What Was Done

This session implemented a comprehensive automated technical blog generation system across four domain properties: tech.queenofsandiego.com, tech.dangerouscentaur.com, tech.sailjada.com, and tech.burialsatseasandiego.com. The system captures granular development work in real-time and publishes it as structured blog posts without manual intervention or credential exposure.

Technical Architecture

The pipeline consists of three core components:

  • Session Hook Capture: A Claude Code Stop hook (/Users/cb/.claude/hooks/tech_blog_stop.sh) triggers at session end
  • Blog Generator: Python script (/Users/cb/Documents/repos/tools/tech_blog_generator.py) parses JSONL session transcripts and generates HTML posts
  • Infrastructure Manager: Initialization script (/Users/cb/Documents/repos/tools/tech_blog_init.py) provisions S3 buckets, CloudFront distributions, and DNS records

The generator reads Claude session transcripts from /Users/cb/.claude/projects/ in JSONL format, extracts tool use events (file modifications, AWS commands, DNS changes), and synthesizes them into detailed technical narratives while filtering credentials.

Infrastructure Provisioning Details

For queenofsandiego.com and sailjada.com: Leveraged existing wildcard ACM certificates (*.queenofsandiego.com and *.sailjada.com) to create S3 origin buckets and CloudFront distributions:

  • S3 buckets: qos-tech-blog, jada-tech-blog
  • CloudFront distributions created with SSL/TLS termination
  • Route53 CNAME records point subdomain traffic to CloudFront endpoints

For dangerouscentaur.com: Used existing wildcard CloudFront distribution (ID: E2Q4UU71SRNTMB) on the dc-sites S3 bucket. This distribution already handles *.dangerouscentaur.com traffic via Namecheap DNS CNAME routing.

For burialsatseasandiego.com: DNS hosted at GoDaddy (not Route53). The infrastructure init script detected this and provisioned an S3 bucket (bats-tech-blog) with CloudFront distribution, then generated ACM certificate DNS validation records for manual insertion at the GoDaddy admin console. This required checking nameservers and validating GoDaddy API credential access before proceeding.

Key Decisions and Architecture Patterns

Hook-Based Triggering: Rather than implementing polling or webhook infrastructure, the system uses Claude Code's native Stop hook mechanism. This is registered in /Users/cb/.claude/settings.json and executes tech_blog_stop.sh at session termination, ensuring every development session is captured without manual action.

JSONL Transcript Parsing: Session data is stored as newline-delimited JSON. The generator specifically extracts tool_use type entries to identify:

  • File writes and edits with exact paths
  • AWS CLI commands (S3, CloudFront, Route53, ACM operations)
  • Shell command executions and their outputs
This granularity allows posts to reference specific resource IDs and configuration changes rather than high-level summaries.

Credential Filtering: The generator uses regex patterns to strip AWS access keys, secret keys, API tokens, database credentials, and GoDaddy auth headers from captured commands before HTML serialization. This enables Sergio to see exactly what infrastructure work happened without exposing secrets.

Multi-DNS Strategy: The four tech blog subdomains use different DNS providers based on parent domain setup:

  • Route53 for queenofsandiego.com and sailjada.com properties
  • Namecheap CNAME for dangerouscentaur.com
  • GoDaddy for burialsatseasandiego.com
The init script auto-detects each scenario and applies the correct provisioning path.

Navigation Integration

Updated /Users/cb/Documents/repos/sites/queenofsandiego.com/index.html to add "Tech Blog" as a menu item in the ship's papers dropdown navigation. This makes the technical documentation discoverable to stakeholders like Sergio who need visibility into development work.

Session Data Flow Example

When a development session ends:

1. Claude Code Stop hook fires
2. tech_blog_stop.sh reads latest project transcript from .claude/projects/
3. tech_blog_generator.py parses JSONL for tool_use events
4. Generator builds HTML article with filtered command outputs
5. Article uploaded to appropriate S3 bucket (qos-tech-blog, jada-tech-blog, etc.)
6. CloudFront cache invalidated to serve fresh content
7. Post appears at tech.[domain].com within minutes

Testing and Validation

The initial system was tested on this session's transcript itself, generating a meta post documenting the blog infrastructure setup. HTTP access to all three live tech blogs was verified:

  • https://tech.queenofsandiego.com — CloudFront active, DNS propagated
  • https://tech.sailjada.com — CloudFront active, DNS propagated
  • https://tech.dangerouscentaur.com — Existing wildcard distribution serving content
  • https://tech.burialsatseasandiego.com — Awaiting ACM validation completion via GoDaddy DNS

Related Work Captured

During infrastructure setup, two secondary issues were identified and tracked:

  • Incorrect hero images on https://burialsatseasandiego.sailjada.com/ (small catamaran instead of fleet imagery) — progress board card created
  • Google Analytics audit and booking optimization recommendations — separate GA4/UA tracking ID mapping performed across all site properties

What's Next

The automated blog pipeline is now live. Subsequent development sessions will automatically generate posts at the tech blog subdomains, providing Sergio and other stakeholders with detailed, credential-scrubbed visibility into infrastructure, code, and operational work. The system scales to additional domain properties by extending the DNS provider configuration in the init script.

```