Sail JADA — Engineering Log

Technical work on sailjada.com and the JADA booking systems

Building an Automated Technical Blog Pipeline Across Multiple Domains

This session implemented a comprehensive system to auto-generate granular technical blog posts across four domains (queenofsandiego.com, sailjada.com, dangerouscentaur.com, and burialsatseasandiego.com), capturing development work in real-time and publishing it immediately upon session completion.

What Was Done

We built a complete infrastructure to:

  • Create four separate tech blog subdomains with independent S3 buckets and CloudFront distributions
  • Implement a Claude Code Stop hook that triggers blog generation at session end
  • Develop a Python-based blog generator that extracts session transcripts and produces detailed HTML posts
  • Configure DNS across three different providers (Route53, Namecheap, GoDaddy)
  • Integrate blog links into existing site navigation via the "Ship's Papers" menu
  • Establish automated content pipeline with zero manual intervention

Technical Architecture

Infrastructure Layer

Each tech blog required identical infrastructure components:

  • S3 Bucket: Named pattern `{domain}-tech-blog` (e.g., `qos-tech-blog`, `dc-sites-tech-blog`, `jada-tech-blog`, `bats-tech-blog`)
  • CloudFront Distribution: Points to respective S3 origin with gzip compression and HTML cache behavior
  • ACM Certificate: Wildcard certs where available, or domain-specific certificates
  • DNS Configuration: CNAME records routing `tech.{domain}` to CloudFront distribution domains

Route53 was used for sailjada.com and queenofsandiego.com (both had existing wildcard certificates: `*.sailjada.com` and `*.queenofsandiego.com`). For dangerouscentaur.com, we leveraged the existing wildcard CloudFront distribution (ID: E2Q4UU71SRNTMB) pointing to the `dc-sites` S3 bucket. For burialsatseasandiego.com, we configured a new ACM certificate and added DNS validation CNAME records at GoDaddy.

Blog Generation Pipeline

The system operates in three stages:

  • Stage 1 - Session Capture: Claude Code sessions are saved as JSONL transcript files in `~/.claude/sessions/`
  • Stage 2 - Trigger: A Stop hook script at `~/.claude/hooks/tech_blog_stop.sh` executes when the session ends
  • Stage 3 - Generation & Publishing: Python scripts parse the transcript and upload the generated HTML post to the appropriate S3 bucket

The hook script determines which domain is being worked on by reading the current project path and environment variables, then invokes the blog generator with the session transcript.

Key Implementation Details

Session Transcript Processing

Claude Code session transcripts are stored in JSONL format with entries containing:

  • Tool uses (bash commands executed, file reads/writes)
  • Timestamp data
  • File paths and modification types
  • Command output and error messages

The blog generator script (`tech_blog_generator.py`) parses these JSONL files to extract:

  • All modified/created files with their paths
  • All commands executed (with credentials filtered out)
  • Infrastructure changes (AWS API calls, DNS modifications)
  • Service interactions and configuration changes

Content Filtering & Sanitization

Before publishing, the generator removes sensitive data:

  • AWS access keys and secret keys
  • API tokens and authentication credentials
  • GoDaddy/Namecheap API keys
  • Database passwords and connection strings
  • Any PII or confidential business information

This filtering occurs at the regex level before content is written to HTML output, ensuring no secrets can be accidentally exposed.

HTML Output Structure

Generated posts follow a consistent format:

  • <h2> title summarizing the work completed
  • <h3> sections for major work areas (Infrastructure, Code Changes, Deployments)
  • Structured lists with file paths and AWS resource identifiers
  • Code blocks showing command examples (redacted of credentials)
  • Timestamps and session metadata

Each post is written to a timestamped filename: `posts/YYYY-MM-DD-HHMMSS-work-summary.html`

Infrastructure Deployment

Domain-Specific Configurations

queenofsandiego.com:

  • S3 bucket: `qos-tech-blog`
  • CloudFront distribution: Created with wildcard certificate
  • Route53 CNAME: `tech.queenofsandiego.com` → CloudFront domain
  • DNS provider: Route53 (AWS)

sailjada.com:

  • S3 bucket: `jada-tech-blog`
  • CloudFront distribution: Created with wildcard certificate
  • Route53 CNAME: `tech.sailjada.com` → CloudFront domain
  • DNS provider: Route53 (AWS)

dangerouscentaur.com:

  • S3 bucket: `dc-sites-tech-blog` (separate bucket from main site)
  • CloudFront distribution: Reused existing wildcard distribution E2Q4UU71SRNTMB
  • Namecheap CNAME: `tech.dangerouscentaur.com` → CloudFront domain
  • DNS provider: Namecheap

burialsatseasandiego.com:

  • S3 bucket: `bats-tech-blog`
  • CloudFront distribution: Created with domain-specific ACM certificate
  • GoDaddy CNAME: `tech.burialsatseasandiego.com` → CloudFront domain
  • DNS provider: GoDaddy (DNS validation via ACM CNAME record)

Claude Code Integration

Updated `~/.claude/settings.json` to add the Stop hook:

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

This ensures that every time a Claude Code session ends, the hook executes automatically, generating and publishing a blog post without manual intervention.

Navigation Integration

Updated queenofsandiego.com's `index.html` navigation to include a "Tech Blog" link under the Ship's Papers menu. The navigation structure allows visitors to access all four tech blogs from any of the main sites, providing transparency into ongoing development work.

Key Decisions &