Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

Building a Cost-Optimized HVAC Service Website: Static Hosting, Payment Integration, and SEO for Under $3.50/Month

What Was Done

Built a complete, production-ready website for Parker & Mitchell, an HVAC service business in Durant, Oklahoma. The site includes service booking, online payment processing, SEO optimization, and mobile-responsive design—all hosted for under $3.50/month in S3/CloudFront costs.

Technical Architecture

The site is deployed as a static application stack:

  • Frontend: Vanilla HTML/CSS/JavaScript (no build tool overhead)
    • index.html — main landing page with hero section, service offerings, testimonials, and call-to-action
    • pay.html — Stripe payment flow for service deposits/payments
    • styles.css — mobile-first responsive design, dark theme for HVAC branding
    • app.js — form handling, payment initialization, booking logic
  • CDN: CloudFront distribution with caching headers and gzip compression
  • Storage: S3 bucket for static assets and HTML
  • DNS: Route53 zone for parkerandmitchell.dangerouscentaur.com subdomain
  • Branding: Custom favicon.svg for browser tab identity

Infrastructure & Deployment

S3 & CloudFront Setup:

Deployed via shared utility scripts in the iCloud repos sites infrastructure. Files are synced to S3 using the deploy.sh script located at the project root, which handles:

  • Object versioning for cache busting
  • Correct MIME types for HTML, CSS, JS, and SVG
  • CloudFront invalidation to clear edge caches

The S3 bucket is configured as a static website endpoint, and CloudFront sits in front for edge caching, gzip compression, and global distribution. This architecture reduces origin traffic costs to near-zero for this tier of traffic.

DNS Configuration:

Initial subdomain routing through Route53:

  • Created CNAME record pointing parkerandmitchell.dangerouscentaur.com to CloudFront distribution domain
  • CloudFront distribution assigned a wildcard SSL cert (pre-provisioned in ACM for the dangerouscentaur.com zone)
  • Verified DNS propagation via dig and AWS Route53 zone list

SEO Foundation:

  • robots.txt — allows search engine crawlers, specifies sitemap location
  • sitemap.xml — XML sitemap with pay.html and index.html, update frequency set to weekly
  • HTML meta tags — OpenGraph, Twitter card metadata, canonical URL, viewport for mobile
  • Structured data — LocalBusiness schema in JSON-LD for Google Maps/Local Search integration
  • Mobile optimization — responsive viewport, fast load times via CloudFront caching

Features & Business Logic

Booking & Payment Flow:

The app.js` file implements a client-side booking form that:

  • Collects service type, date, time, and customer contact info
  • Validates input before submission
  • Integrates with Stripe Checkout for secure payment processing
  • Redirects to success page on payment completion
  • Stores lead data (webhook-capable for future CRM integration)

Visual Design:

The site uses a professional dark blue and orange color scheme aligned to HVAC industry conventions. Bootstrap grid for responsive layout ensures usability on mobile, tablet, and desktop—critical for customers searching on their phones during emergencies.

Cost Optimization & Key Decisions

Why Static Site: Eliminates server compute costs entirely. No Lambda, no EC2, no database. S3 + CloudFront + Route53 together cost under $1/month for typical HVAC business traffic (100–500 visitors/day). Payment processing is delegated to Stripe (charged per transaction, not per hosting).

Why Vanilla JavaScript: No build pipeline, no Node.js dependencies, no npm audit fatigue. Faster page loads. Simpler deployment. For a brochure site with embedded payment, framework overhead isn't justified.

Subdomain Strategy: Hosted temporarily on parkerandmitchell.dangerouscentaur.com while custom domain is secured. Once a domain is purchased (candidates: parkermitchell.com, parkerandmitchell.com, pmhvac.com), it's a DNS alias update in Route53 and a CloudFront alias swap—zero downtime, zero code changes.

SEO-First Approach: Local SEO is critical for service businesses. The sitemap and LocalBusiness schema signal to Google Maps and local search that this is a real business in Durant, OK. Meta descriptions and Open Graph tags help with social sharing and SERP click-through rates.

Deployment Walkthrough

Steps taken:

# Verify AWS authentication
aws sts get-caller-identity --profile queenofsandiego

# Deploy to S3
cd /Users/cb/icloud-repos/sites/parkerandmitchell.dangerouscentaur.com
./deploy.sh

# Invalidate CloudFront cache
aws cloudfront create-invalidation --distribution-id [DIST_ID] --paths "/*" --profile queenofsandiego

The deployment script handles asset sync, cache headers, and invalidation. No manual S3 console uploads.

What's Next

  • Domain Purchase: Once CB selects a final domain, register it and update Route53 CNAME records
  • CRM Integration: Webhook from booking form to Stripe, then to Airtable or Zapier for lead follow-up
  • Analytics: Add Plausible or simple GA4 to track visitor source and booking conversion rate
  • Reviews: Embed Google Reviews widget to build social proof and local SEO signals
  • Ongoing SEO: Blog posts about HVAC maintenance tips, seasonal offers—will be added to sitemap as new pages

Infrastructure assumptions: This design assumes traffic stays under 10k requests/month (typical for local service). If it grows significantly, consider adding Lambda@Edge for dynamic features, but the static S3+CloudFront model scales well for years at this cost tier.