Simon Eramo Studio · 2026
Master Site Template
A production-ready Astro site template that compresses days of boilerplate setup into a single CLI command — with CMS, contact forms, a block-based page builder, and WCAG 2.1 accessibility baked in from day one.
Role
Product Designer & Full-Stack Developer
Version
2.0.0
Stack
Astro 5 · TinaCMS · Tailwind CSS v4 · Alpine.js · Resend · Vercel
Overview
Executive Summary
The Master Site Template is a production-ready Astro site template designed to dramatically reduce the time it takes to launch a new client website — from days of boilerplate setup down to a focused strategy session and a single CLI command.
Rather than a simple starter kit with a hero section and a nav bar, it is an opinionated, full-featured platform — complete with a CMS, a contact system, a flexible block-based page builder, a 3-tier page architecture, a Project Starter CLI tool, and WCAG 2.1 accessible components across the board.
The Challenge
The Boilerplate Loop
For a solo developer or boutique agency, spinning up a new client site involves a predictable, exhausting loop — repeating the same tasks before writing a single line of client-specific code.
- Copy files from the last project and strip out client-specific content.
- Rebuild the same FAQ, CTA, and contact form components — again.
- Reconnect CMS schemas to fresh content collections.
- Configure email delivery, environment variables, and deployment adapters.
- Do all of this before writing a single line of client-specific code.
- Configuration drift means each project subtly diverges from the last.
This repetition isn't just inefficient — it's risky. Configuration drift means each project subtly diverges from the last, making it harder to apply improvements retroactively or share patterns across codebases.
The Solution
Build Once, Deploy Everywhere
The template approaches the problem at two levels:
Master Template Repository
The canonical source of truth for every component, page, schema, and style pattern.
Project Starter CLI
Scaffolds a new project from the master template, selecting only the pages and features the client needs.
Together, they eliminate the setup phase. A new project is ready to
receive client content within minutes of the first git clone.
3-Tier Page System
Pages categorised as Core (always included), Common (opt-out), or Optional (opt-in) — driving a principled, data-driven scaffold process.
Block-Based Page Builder
A flexible page system where non-technical editors compose pages from pre-built blocks via TinaCMS — no developer needed for new layouts.
TinaCMS Visual Editing
Content lives as Markdown in Git with visual editing via the TinaCMS admin UI. Rollbacks are a git revert away.
Contact Form via Resend
Full contact form with centered and split layout variants, powered by a Resend serverless API route — no SMTP config required.
WCAG 2.1 Accessible
Semantic HTML5, skip-to-content links, full keyboard nav, ARIA labels, high-contrast theme, and focus-visible styles on everything.
SEO Built-In
Dynamic title/meta tags from CMS content, Open Graph, Twitter Cards, JSON-LD structured data, and auto-generated XML sitemap.
Architecture
3-Tier Page System
The most important architectural decision — a principled data model that drives the entire scaffold process.
Tier 1 — Core
Required on every site, non-negotiable
Homepage, About, Contact, 404, Privacy Policy
Tier 2 — Common
Standard business pages, included by default
Services, Blog, FAQ, Pricing, Process, Team
Tier 3 — Optional
Specialised pages, toggled per project
Portfolio, Careers, Reviews, Events, Partners, Book
Configuration is driven by template.config.json — a single source of truth that maps pages to their content collections,
CMS fields, and default states. The starter tool logic is entirely data-driven.
Components
Pre-Built Component Library
Every component is a typed Astro .astro file — no React, no Vue, no framework dependency.
</>
HeroSection
Homepage hero — split, centered, and bold variants
</>
PageHeroSection
Interior page hero — center or left aligned
</>
CTASection
Call-to-action block — reusable across pages
</>
FAQ
Interactive Alpine.js accordion — center / left variants
</>
ContactForm
Full form with centered and split layouts
</>
PricingTiers
Pricing cards with feature lists
</>
BlockRenderer
Maps CMS block templates to Astro components
</>
TestimonialsMarquee
Animated scrolling testimonials strip
Engineering
Technical Decisions
Every dependency was chosen deliberately — optimised for developer experience, performance, and long-term maintainability.
Astro 5
Island architecture delivers zero JavaScript by default. Content Collections provide end-to-end typing for all Markdown, preventing an entire class of runtime bugs when content schemas drift.
TinaCMS
Visual editing without locking content into a proprietary database. Content lives as Markdown in Git — version-controlled, rollback-friendly, and builds with no external API dependency.
Tailwind CSS v4
CSS-native configuration via @theme reduces boilerplate. The design system — high-contrast black/white palette, 2px borders, Inter variable font — is defined once and flows through every component.
Alpine.js
Reactive interactivity (mobile menus, dark mode, FAQ accordions, form states) without a build step or component framework. Pages stay fully static-renderable with minimal bundle overhead.
Resend
Developer-first API with a generous free tier and first-class Vercel integration. Replaces complex SMTP relay configuration with a single serverless API route.
Vercel
Edge-deployed with zero-config from the Astro adapter. Git push → production deploy. Preview deployments for every PR. The natural deployment target for SSR-capable Astro sites.
Process
Launching a New Project
The entire foundation — routing, CMS, email, dark mode, accessibility, SEO, sitemap — is already in place. The developer's attention goes to what's actually unique about the client.
Run Project Starter CLI
Select pages, name the project — Tier 1 always included, Tier 2/3 toggled per client.
Connect TinaCMS
Create a TinaCMS project, copy API keys into .env. Visual editing is live.
Connect Resend
Add Resend API key for contact form email delivery — one environment variable.
Push to Vercel
Push to GitHub, import into Vercel. Git push → production deploy, preview on every PR.
Customise & Launch
Brand, content, copy. The foundation — routing, CMS, email, dark mode, a11y, SEO — is already done.
Impact
The Result
At v2.0.0 the template represents a mature, opinionated platform rather than a starter kit. It encodes months of accumulated decisions about how to structure Astro projects for client work — from content modelling to deployment — into a single, reusable repository.
- Days compressed into minutes — new projects are client-ready within minutes of the first git clone.
- Zero configuration drift — every project starts from the same canonical master template, with improvements applied once and inherited everywhere.
- Production-grade from first run — CMS, contact forms, dark mode, accessibility, SEO, and sitemap are all functional before the developer writes a single line of client-specific code.
- Compounding advantage — each deployment reinforces the template. Bugs fixed once, patterns proven once, improvements shared instantly across all future projects.
💡 Building a template that's truly reusable requires resisting the urge to hardcode anything client-specific — a discipline that pays off enormously on the second project, and becomes a compounding advantage with each new deployment.
Last updated · June 2026