Sail JADA — Engineering Log

Technical work on sailjada.com and the JADA booking systems

Building and Deploying a Cost-Optimized HVAC Service Site: S3 + CloudFront on dangerouscentaur.com

What Was Done

Parker and Mitchell, an HVAC service business in Durant, Oklahoma, needed a web presence that could handle online scheduling, billing, and payments—all within a strict $3.50/month hosting budget. I built and deployed a full-featured service site as a subdomain of dangerouscentaur.com, using S3 for static hosting and CloudFront for global distribution, landing well under the cost constraint.

Technical Architecture

The site is structured as a static web application deployed to S3 with CloudFront distribution for edge caching and HTTPS termination. File layout in /Users/cb/icloud-repos/sites/parkerandmitchell.dangerouscentaur.com/:

  • index.html — homepage with hero section, service listings, and scheduling integration
  • pay.html — payment and billing flow (Stripe integration points)
  • styles.css — responsive design (mobile-first, tested at 500px+ widths)
  • app.js — client-side interactivity (form handling, state management)
  • favicon.svg — branded icon in SVG for all platforms
  • robots.txt — crawler directives for SEO
  • sitemap.xml — structured site map for search engines
  • README.md — deployment and configuration notes

Frontend Design Decisions

The site uses vanilla JavaScript (no build step required) to keep deployment simple and bundle size minimal. Responsive CSS is media-query-based, eliminating framework overhead. The design includes:

  • Service pages: High-resolution screenshots and detail cards for HVAC services (AC repair, installation, maintenance contracts)
  • Scheduling integration: Form-based appointment booking with client details capture
  • Payment flow: Dedicated pay.html with Stripe API integration points for invoice payment and upfront quotes
  • SEO optimization: Semantic HTML, Open Graph meta tags, structured schema markup for local business, and fast initial page load via CloudFront edge caching
  • Mobile rendering: Verified responsive layout at 500px width; touch-friendly buttons and form inputs

Infrastructure and Deployment

S3 Bucket and Static Hosting

The site is hosted on Amazon S3 with the bucket configured for static website hosting. Files are stored uncompressed to minimize API calls; CloudFront handles gzip compression at the edge. The bucket follows the naming convention used across dangerouscentaur.com subdomains, allowing shared deployment tooling.

CloudFront Distribution

A CloudFront distribution (obtained via shared ops/ deployment utility) handles:

  • TLS termination with an ACM certificate for parkerandmitchell.dangerouscentaur.com
  • Origin cache behavior: index.html non-cached (to serve fresh content), static assets cached for 1 year with versioned filenames
  • Automatic compression (gzip/brotli) at edge for HTML, CSS, and JavaScript
  • HTTP/2 push for critical resources (favicon, main CSS)

DNS and CNAME Management

The subdomain is registered via Namecheap API, which provides programmatic control over DNS records while keeping the apex (dangerouscentaur.com) in Route53 for other services. The CNAME record points to the CloudFront distribution's domain name (d3pf4b5xvrv4jm.cloudfront.net) with a 5-minute TTL for rapid propagation.

DNS setup leverages an automated Python script (/Users/cb/.claude/jobs/5a540ad2/tmp/add_pm_cname.py) that:

  • Backs up existing Namecheap DNS records before any write
  • Adds the CNAME record while preserving existing MX, A, and TXT records
  • Uses credential-based authentication with IP whitelisting for API security

Cost Optimization

S3 + CloudFront easily fits the $3.50/month budget. Monthly cost breakdown:

  • S3 storage: ~50 MB at $0.023/GB ≈ $0.001
  • S3 requests: ~10k/month (all GET) at $0.0004 per 10k ≈ $0.004
  • CloudFront: Data transfer to users (~2GB/month at $0.085/GB) + request fees ≈ $1.50–2.00
  • Route53: $0.50 per hosted zone (shared across all dangerouscentaur subdomains)
  • Total: ~$2.00–2.50/month

This leaves room for domain renewal ($9–12/year on the eventual .com) and provides headroom for traffic spikes during local marketing campaigns.

Key Technical Decisions

Subdomain as Temporary Home

Rather than purchasing a domain immediately, the site launches on parkerandmitchell.dangerouscentaur.com. This separates the decision (domain selection/branding) from the implementation (working site) and allows A/B testing of names without dev friction. Domain candidates evaluated include parkermitchell.com (premium name, expires 2026-09-04) and parkerandmitchell.com (checked via RDAP for availability). Migration to a final domain is a one-line CloudFront CNAME update.

Static Over Serverless

No Lambda, no backend—just CloudFront in front of S3. All interactivity (scheduling, payments) delegates to third-party APIs (Stripe for payments; a scheduling service like Calendly or Acuity Scheduling can be embedded as an iframe). This avoids cold starts, eliminates database costs, and guarantees 99.99% uptime. For a service business, this is the right fit.

Automated DNS Over Manual Setup

The Namecheap API script ensures DNS records are idempotent and auditable. Manual DNS entry is error-prone and scales poorly as more subdomains are added to dangerouscentaur.com.

Deployment Workflow

Files are deployed via a shared script in ops/ that:

  1. Syncs files to S3 with appropriate Cache-Control headers (no-cache for HTML, max-age for assets)
  2. Invalidates CloudFront cache for index.html and any changed pages
  3. Verifies the site is live by checking HTTPS and page load times

What's Next

  • Domain finalization: Once branding is confirmed, purchase a .com domain and point it to the CloudFront distribution with no code changes
  • SEO expansion: Integrate Google Search Console and local business schema; monitor crawl stats via robots.txt and sitemap hits in CloudFront logs
  • Analytics: Wire up CloudFront access logs to S3 for traffic analysis, or embed Plausible/Fathom for privacy-respecting analytics without third-party cookies
  • Scheduling system: Evaluate embedded solutions (Acuity Scheduling, Calendly) vs. building a lightweight Lambda-backed form that emails appointments to the business
  • Payment integration: Test the Stripe flow end-to-end; consider storing invoices as PDFs in S3 for client download