Sail JADA — Engineering Log

Technical work on sailjada.com and the JADA booking systems

```html

Building an Automated Technical Blog System Across Four Sailing Charter Sites

During this development session, we implemented a comprehensive automated technical blog generation system that captures granular development work across four separate sailing charter and burial service websites. The goal was to create transparency for stakeholders (particularly Sergio) into the actual engineering work being performed, while maintaining security by excluding all credentials and sensitive data.

What Was Done

We built a complete infrastructure and automation pipeline that:

  • Created four new technical blog sites: tech.queenofsandiego.com, tech.sailjada.com, tech.dangerouscentaur.com, and tech.burialsatseasandiego.com
  • Implemented automatic blog post generation from Claude development session transcripts
  • Set up S3 storage, CloudFront CDN distribution, and DNS routing for each blog
  • Integrated blog links into the Ship's Papers navigation menu on each primary site
  • Created safety mechanisms to sanitize all credentials before publishing
  • Added a Stop hook that generates and publishes blog posts immediately after each development session ends

Technical Architecture

Blog Generation Pipeline

The system uses two main Python scripts that work together:

/Users/cb/Documents/repos/tools/tech_blog_init.py - Infrastructure provisioning script that:

  • Creates S3 buckets following the naming pattern [site-name]-tech-blog (e.g., qos-tech-blog, jada-tech-blog, dc-sites, bats-tech-blog)
  • Provisions CloudFront distributions for each S3 bucket with appropriate SSL/TLS certificates
  • Registers DNS CNAME records pointing tech.[domain] to the CloudFront distribution domain names
  • Validates ACM certificates when necessary and handles DNS propagation

/Users/cb/Documents/repos/tools/tech_blog_generator.py - Post generation script that:

  • Reads the Claude session transcript (JSONL format stored in ~/.claude/sessions/)
  • Extracts all tool use events, file modifications, and commands executed
  • Generates granular technical narrative grouped by logical work units
  • Sanitizes content to remove any credentials, API keys, tokens, or sensitive data
  • Renders HTML articles with semantic structure (<h2>, <h3>, <ul>, <code>, <pre> tags)
  • Includes exact file paths, function names, S3 bucket names, CloudFront distribution IDs, and Route53 changes
  • Uploads generated HTML to the appropriate tech blog S3 bucket
  • Invalidates CloudFront distribution caches to ensure immediate visibility

Session Capture via Claude Code Hooks

We created a Stop hook at /Users/cb/.claude/hooks/tech_blog_stop.sh that automatically runs when a development session ends. This hook:

  • Determines which site(s) were modified during the session by analyzing file paths
  • Calls tech_blog_generator.py to create blog posts for affected sites
  • Publishes posts to the appropriate S3 buckets immediately
  • Logs all activity to /Users/cb/.claude/logs/tech_blog_stop.log

The hook was registered in /Users/cb/.claude/settings.json under the hooks configuration, ensuring it executes at the end of every Claude Code session.

Infrastructure Details

Queen of San Diego Tech Blog

  • S3 Bucket: qos-tech-blog
  • CloudFront Distribution: Uses existing *.queenofsandiego.com wildcard ACM certificate
  • DNS: CNAME record tech.queenofsandiego.com → CloudFront domain via Route53
  • Site Root: /Users/cb/Documents/repos/sites/queenofsandiego.com/

Sail Jada Tech Blog

  • S3 Bucket: jada-tech-blog
  • CloudFront Distribution: Uses existing *.sailjada.com wildcard ACM certificate
  • DNS: CNAME record tech.sailjada.com → CloudFront domain via Route53
  • Site Root: /Users/cb/Documents/repos/sites/sailjada.com/

Dangerous Centaur Tech Blog

  • S3 Bucket: dc-sites (shared wildcard bucket with existing CloudFront distribution E2Q4UU71SRNTMB)
  • CloudFront Distribution: Reuses existing wildcard distribution for dangerouscentaur.com
  • DNS: CNAME record tech.dangerouscentaur.com → CloudFront domain via Namecheap DNS
  • Site Root: /Users/cb/Documents/repos/sites/dangerouscentaur.com/

Burials at Sea San Diego Tech Blog

  • S3 Bucket: bats-tech-blog
  • CloudFront Distribution: New distribution using wildcard *.sailjada.com ACM certificate (domain alias)
  • DNS: CNAME record tech.burialsatseasandiego.com → CloudFront domain via GoDaddy DNS
  • Site Root: /Users/cb/Documents/repos/sites/burialsatseasandiego.com/

Navigation Integration

We updated the Ship's Papers dropdown menu on each site's index.html to include links to their respective technical blogs. The navigation structure follows this pattern:

<li class="dropdown">
  <a href="#">Ship's Papers</a>
  <ul class="dropdown-menu">
    <li><a href="https://tech.[domain].com">Technical Blog</a></li>
    <!-- other menu items -->
  </ul>
</li>

This makes the technical blogs discoverable from within each site without requiring direct URL knowledge.

Security & Sanitization

The blog generator includes multiple layers of credential protection:

  • Regex-based scrubbing of common secret patterns (AWS keys, API tokens, passwords, email addresses of developers)
  • Environment variable redaction before any file content is processed
  • Explicit exclusion of memory