A Static Anglican Parish Site in 1,500 Lines (No Build Step)

Overview

The Bay of Islands Anglican Parish — St. James' (Lark Harbour) and St. Ambrose (John's Beach), in Western Newfoundland — needed a website that would still work in five years without anyone having to remember an npm install command. The answer was the boring one: pure HTML, CSS, and vanilla JavaScript, served as static files from Cloudflare Pages. No framework, no build, no package.json.

Stack

• Type: Static HTML website (no build step)
• Frontend: HTML5, CSS3, Vanilla JavaScript
• Fonts: Google Fonts (Cormorant Garamond, Nunito Sans)
• Dependencies: None
• Deployment: Cloudflare Pages

Key Features

• Home page with hero and parish information
• Parish history and mission (about page)
• Worship service schedule
• Interactive calendar with dynamic service rendering
• Pastoral team directory
• Photo gallery (~47 images) with lightbox viewer
• News and announcements
• Contact form with client-side validation

Architecture

All functionality lives in two files:

• files/js/main.js (408 lines) — navbar scroll behavior, mobile hamburger menu, the ChurchCalendar class, lightbox gallery, form validation.
• files/css/styles.css (1,141 lines) — CSS variables theming, responsive grid, wave animations, calendar grid layout.

Calendar Logic (ChurchCalendar)

The calendar dynamically renders a service schedule based on the week-of-month:

• Weeks 1-2: St. James' 11AM, St. Ambrose 7PM
• Weeks 3-4: St. James' 7PM, St. Ambrose 11AM
• Holy Communion on alternating Sundays (odd weeks)
• Special services (Easter, Christmas, Advent) hardcoded into the class

This is the kind of logic that's tempting to put behind an API. It doesn't need to be — the schedule is stable and the JS is ~30 lines.

CSS Architecture

• Color palette in :root CSS variables
• Primary: deep sea blue (#1a3a4a), ocean blue (#2d5a6b)
• Accents: warm sand (#f5f1eb), soft gold (#c9a959)
• Mobile breakpoint at ~768px with a hamburger menu
• Navbar background changes on scroll past 100px

Pages

Development

# Serve locally (no build needed)
npx serve files/ -p 3000
 
# Or just open it
open files/index.html

Lessons Learned

• All source files live in files/, not the project root — Cloudflare Pages publishes from a subdirectory cleanly, but it's worth documenting.
• The lightbox uses raw DOM APIs — textContent only, no innerHTML with user data. (One of those things you only think about after an audit catches it.)
• 47+ JPG images need to stay optimized. WebP with JPG fallbacks would shave the page weight further.
• No test suite — manual testing covers inter-page links, mobile menu, and calendar rendering. Acceptable for a site this size.