Most small business websites I get asked about have the same shape: a home page, an about page, a list of products or services, a page for each product, and a contact page with a phone number, a WhatsApp button and a map. The owner wants it fast, wants it to show up on Google, and wants to change the phone number without calling a developer.

I'm a backend .NET developer by day, so my instinct was to treat this like a data problem. The pages are just views over one object. In this post I'll walk through how I set that up with Astro 7 and Tailwind CSS 4 , using real code from the template I built. You can reuse every pattern here in your own project.

1. Put all the content in one typed file

Everything a visitor sees lives in src/data/site.ts : name, colours, contact details, SEO text, products, testimonials and navigation. Pages and components only read from it.

// src/data/site.ts export interface Product { /** URL slug: /products/<slug>. Lowercase, hyphens only.…