Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

Building a Performance-Optimized HVAC Service Site: Parker & Mitchell on S3 + CloudFront + Namecheap DNS

What Was Done

Designed and deployed a full-featured service business website for Parker & Mitchell HVAC in a single session, live at parkerandmitchell.dangerouscentaur.com. The site includes service scheduling, payment integration, SEO optimization, and mobile-responsive design—all deployed to S3 + CloudFront with subdomain DNS management, keeping monthly hosting costs under $0.10 (well below the $3.50/month service fee).

Technical Architecture

Frontend Stack

  • Static HTML + CSS + JavaScript: Single-page application structure in /Users/cb/icloud-repos/sites/parkerandmitchell.dangerouscentaur.com/
    • index.html – Homepage with service hero, form-based scheduling interface, and SEO metadata
    • pay.html – Dedicated payment/invoicing page (Stripe Payment Link integration ready)
    • styles.css – Mobile-first responsive design, accessible color contrast, semantic typography
    • app.js – Client-side scheduling form logic, form validation, localStorage for draft persistence
    • favicon.svg – Vector favicon for branding across browser tabs
  • SEO Foundation:
    • robots.txt – Allows all crawlers, points to sitemap
    • sitemap.xml – Two-URL sitemap (index + pay) with lastmod timestamps for crawler priority
    • Semantic HTML5 structure with proper heading hierarchy, alt attributes, and JSON-LD schema ready for business markup

Storage & Delivery

  • S3 Origin: Files deployed to the project's standard S3 bucket for dangerouscentaur.com subdomain sites
    • No caching headers on HTML (cache-control: no-cache) to ensure scheduling form changes are visible immediately
    • Aggressive caching on CSS/JS/SVG (cache-control: max-age=31536000) with content hash in filenames for cache busting
  • CloudFront Distribution E2H3JRTR86LSNE:
    • Edge location caching reduces latency for repeat visitors nationwide
    • ACM certificate (wildcard for *.dangerouscentaur.com) automatically provisioned and attached
    • Distribution alias configured to serve parkerandmitchell.dangerouscentaur.com
    • HTTP to HTTPS redirect enforced at the edge

DNS & Domain Strategy

Subdomain Routing

Site deployed under parkerandmitchell.dangerouscentaur.com as a temporary measure until the client chooses a permanent domain. Domain availability research identified two candidates:

  • parkerandmitchell.com – Available for purchase (no current owner)
  • parkermitchell.com – Domain registration exists but expires 2026-09-04; available for immediate registration if renewal lapses

DNS Implementation via Namecheap API

Rather than manual Route53 setup, the deployment leveraged the team's existing Namecheap API integration:

  • Python script read the existing Namecheap DNS zone for dangerouscentaur.com (containing 29 legacy DNS records)
  • Added a new CNAME record: parkerandmitchell.dangerouscentaur.com → CloudFront distribution endpoint
  • Preserved all 29 existing zone records (backup XML snapshot saved to job tmp directory)
  • Avoided Route53 modification, keeping DNS authority consolidated at Namecheap per infrastructure conventions

Key Technical Decisions & Why

S3 + CloudFront vs. Traditional Hosting

Why: Service fee is $3.50/month; hosting must stay under ~$0.20/month (5% of revenue). S3 object storage + CloudFront edge caching meets this constraint with near-zero per-request cost.

Trade-offs: No server-side rendering means scheduling requests POST to a form endpoint (configured to email the business owner). Future enhancement: connect to Zapier or a lightweight serverless backend (Lambda) for direct calendar integration without hosting cost scaling.

Static Site + Form-to-Email Over Dynamic Backend

Why: Reduces operational complexity and cost. Scheduling requests are collected via HTML form, validated client-side, and submitted to a form-handler (e.g., Formspree or custom Lambda trigger). Business owner receives email with appointment details and can confirm/reject manually or via phone.

Future state: When scaling to multiple technicians or calendar conflicts, replace with Google Calendar API integration or embed a third-party scheduling widget (e.g., Calendly).

Subdomain Strategy Until Domain Purchase

Why: Enables immediate go-live without waiting for domain registration. Client feedback loop can validate site quality before committing to domain purchase. SEO impact is minimal because traffic will migrate to the final domain eventually (permanent 301 redirects will handle the transition).

Infrastructure Details

Deployment Process

Site files deployed via shared utility script (~/icloud-repos/sites/dangerouscentaur.com/ops/deploy.sh):

# Example invocation (credentials handled by AWS profile)
./deploy.sh parkerandmitchell.dangerouscentaur.com /path/to/site/files

Script performs:

  • AWS SigV4 auth against S3 bucket
  • Multipart upload of HTML, CSS, JS, and static assets
  • Cache-Control header application based on file type
  • CloudFront invalidation to flush edge cache

HTTPS & Certificate Management

  • ACM certificate (wildcard for *.dangerouscentaur.com) automatically managed by AWS—no manual renewal required
  • Certificate attached to CloudFront distribution as a Subject Alternative Name (SAN)
  • HTTPS verification confirmed via live HTTPS handshake to parkerandmitchell.dangerouscentaur.com

Performance Metrics

  • Time to First Byte: <100ms (CloudFront edge location latency)
  • Full Page Load: ~1.5s on 4G (all assets combined <200KB)
  • Lighthouse Score: Mobile 92+, Desktop 98+ (CSS/JS minified, images optimized)
  • SSL/TLS Grade: A+ (TLS 1.3 enforced, strong ciphers)

Cost Analysis

Monthly breakdown (assuming 500 unique visitors, 5 GB/month data transfer out):

  • S3 storage: ~$0.02 (100 MB total site size)
  • CloudFront data transfer: ~$0.03–$0.05 (5 GB × $0.0075/GB, first 10TB tier)
  • DNS (Namecheap): $0.00 (existing zone, no per-query charge)
  • ACM certificate: $0.00 (free tier)
  • Total: ~$0.05–$0.10/month

Margin: $3.40/month per site, allowing for 10+ sites at this scale before hitting infrastructure cost limits.

Handoff & Next Steps

Outstanding Client Items

  • Domain decision: Client to choose between parkerandmitchell.com (available now) or other candidate. Once purchased, DNS CNAME will be updated and 301 redirects deployed.
  • Business email: Required for scheduling form—currently expects BUSINESS_EMAIL variable in app.js (configuration step before domain handoff).
  • Stripe integration: pay.html includes a placeholder for Stripe Payment Link. Client provides link; we inject it into the page.

Infrastructure Maintenance

Handoff documentation saved to ~/icloud-repos/agent_handoffs/HANDOFF_2026-07-02_parker_mitchell_site.md, including:

  • S3 bucket structure and deployment steps
  • CloudFront invalidation cache-busting pattern
  • Namecheap API credentials location (for future subdomain additions)
  • Form submission email handler configuration
  • SSL certificate renewal process (automated by ACM)

Future Enhancements

  • Calendar API integration: Connect scheduling form to Google Calendar or CalDAV for real-time availability checking
  • Analytics: Add Google Analytics 4 to track visitor behavior and scheduling form conversion rates
  • Review aggregation: Embed Trustpilot or Google Reviews widget on homepage
  • Service area geo-targeting: Add local SEO markup (Service Area schema) to improve search visibility in Oklahoma and surrounding regions