Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

Multi-Artist Event Pages with Themed Branding and Modal Booking: Infrastructure and Implementation

During this development session, we built and deployed six new artist event pages for the Rady Shell Summer concert series, complete with branded themes and functional booking modals. This post details the technical architecture, deployment pipeline, and design decisions that made this possible.

The Problem

The Queen of San Diego events page listed six upcoming Rady Shell concerts, but only had detailed artist pages for five performers. The remaining artists (Wynonna, Sarah McLachlan, Buddy Guy, Weird Al, and Mariachi USA) had no individual landing pages—a missed opportunity for artist-specific branding and conversion optimization.

Architecture Overview

The existing concert page infrastructure used a multi-subdomain approach:

  • Main domain: queenofsandiego.com (events listing page)
  • Artist subdomains: Each artist got a branded subdomain (bobdylan.queenofsandiego.com, paulsimon.queenofsandiego.com, etc.)
  • Hosting: S3 static site hosting with CloudFront distributions
  • DNS: Route53 with ALIAS records pointing to CloudFront distributions
  • SSL/TLS: AWS Certificate Manager with wildcard certificates

We followed this exact pattern for all six new pages, ensuring consistency across infrastructure and deployment procedures.

Static Site Generation Pipeline

The existing workflow relied on a render script at /Users/cb/Documents/repos/sites/queenofsandiego.com/render_static_site.sh that read event metadata from events.json and generated themed HTML pages. Each page template included:

  • Artist-specific CSS theming in the <style> block
  • Navigation elements linking back to the main events page
  • Event details (date, venue, ticket information)
  • Call-to-action buttons wired to a booking modal

The render script processed template variables and generated final HTML, which was then deployed via the publish script.

Theming Strategy

Each page required visual identity matching the artist's online presence. We applied branded color schemes, typography choices, and imagery:

  • Wynonna Judd: Country music aesthetic with warm earth tones
  • Sarah McLachlan: Contemporary folk-pop styling with cool, calming palette
  • Buddy Guy: Blues legend theme with deep blues and warm golds
  • Weird Al Yankovic: Playful, colorful design reflecting his comedic style
  • Mariachi USA: Traditional Mexican color palette with vibrant accents

Rather than using external image assets (which would complicate deployment), we used CSS-driven styling with carefully chosen color variables and web-safe typography. This kept S3 bucket sizes minimal and deployment times fast.

Booking Modal Implementation

All CTA buttons across the six new pages and existing pages were wired to a single booking modal component. This required:

  1. Identifying all href="#book" anchor links across pages
  2. Verifying the modal HTML existed in each page template
  3. Testing button click behavior to ensure proper modal trigger

The modal pattern followed the existing implementation from established pages like Bob Dylan's, using vanilla JavaScript to toggle visibility and handle form submissions.

Infrastructure Provisioning

S3 Buckets

Each artist subdomain required a dedicated S3 bucket following the naming pattern:

s3://[artist-name].queenofsandiego.com/

Buckets were configured for static website hosting with index.html as the default document and error.html as the error page. Public read access was restricted to CloudFront only using Origin Access Identity (OAI).

CloudFront Distributions

Six new CloudFront distributions were created with:

  • S3 bucket as origin (using OAI for secure access)
  • SSL/TLS certificate from AWS Certificate Manager (wildcard: *.queenofsandiego.com)
  • Default cache behavior set to aggressive caching for static HTML/CSS
  • Query string forwarding disabled (no dynamic parameters)
  • Custom error pages for 404 responses

Route53 DNS Configuration

For each new artist subdomain, an ALIAS record was created pointing to the corresponding CloudFront distribution:

wynonnamelissa.queenofsandiego.com → CloudFront distribution D-XXXXX
sarahmclachlan.queenofsandiego.com → CloudFront distribution D-XXXXX
buddyguy.queenofsandiego.com → CloudFront distribution D-XXXXX
weirdal.queenofsandiego.com → CloudFront distribution D-XXXXX
mariachiusa.queenofsandiego.com → CloudFront distribution D-XXXXX
bonnieraitt.queenofsandiego.com → CloudFront distribution D-XXXXX

ALIAS records were preferred over CNAME records because they resolve at the apex level and don't incur additional Route53 queries, improving response times.

SSL/TLS Certificate Management

An existing wildcard certificate (*.queenofsandiego.com) issued by AWS Certificate Manager was reused. During provisioning, an accidental pending certificate request was identified and deleted to avoid confusion. All distributions were attached to the active certificate without additional provisioning delays.

Deployment Pipeline

The publish_static_site.sh script handled all deployment operations:

  1. Rendered HTML pages from templates using render_static_site.sh
  2. Synced generated files to respective S3 buckets using AWS CLI
  3. Invalidated CloudFront caches to force distribution updates
  4. Verified DNS propagation and HTTPS availability

Each artist page and the main events.html were deployed independently, allowing staged rollouts and easy rollback if issues occurred.

Testing and Verification

Post-deployment verification included:

  • Live checks of all six subdomain URLs via browser
  • Verification of HTTPS/TLS certificate validity
  • Booking modal functionality testing across all pages
  • Cross-page navigation testing (artist pages → events listing)
  • Staging environment validation before production deployment

All six subdomains were confirmed live and accessible within hours of infrastructure provisioning.

Key Decisions and Tradeoffs

  • Static site generation over dynamic CMS: Eliminates server overhead, reduces operational complexity, and enables aggressive caching strategies.
  • Subdomain architecture over URL paths: Each artist gets a distinct domain, improving SEO signal isolation and enabling independent infrastructure scaling if needed.
  • CSS-driven theming over image assets: Reduces bandwidth, simplifies deployment, and accelerates page load times.
  • Single booking modal component: Maintains consistency across all pages, simplifies maintenance, and reduces code duplication.