Astro Wellness

Astro Wellness is a gym and fitness website template built on the Astro framework and styled with Bulma, shipped as a static site with typed sample content ready to adapt for a gym, studio, or training brand.

What is Astro Wellness?

Astro Wellness is a static website template for gyms, fitness studios, and personal training brands, built with Astro and the Bulma CSS framework. It takes Markdown blog posts and TypeScript data files (site metadata, services, team, pricing, testimonials) as input and produces a static dist/ folder for any static host. The project requires Node.js 22.22.0 or newer and uses pnpm 10+ exclusively, and it is released under the MIT license.

Key Features

• Astro static site — pages are pre-rendered to dist/ via pnpm build, with zero client-side framework and small delegated scripts.
• Bulma styling, module-by-module — Bulma is imported through src/assets/styles/main.scss with design tokens passed via Sass @use, and unused Bulma components are excluded.
• Dark and light themes — a dark theme with orange accent plus an adaptive light theme, toggled from the navbar, persisted in localStorage, and defaulting to the OS prefers-color-scheme before first paint.
• SPA page transitions — <ClientRouter /> gives client-side navigation with a soft fade and respects prefers-reduced-motion.
• Blog via Content Collections — a typed frontmatter schema (title, description, pubDate, optional tags and updatedDate), a listing page, individual posts, and an auto-generated RSS feed at /rss.xml.
• SEO setup — per-page title/description, canonical URLs, Open Graph, JSON-LD (HealthClub on home, BlogPosting on posts), a sitemap, and robots.txt.
• Accessibility — semantic markup, a skip-to-content link, a keyboard-navigable mobile menu, visible focus states, and aria attributes where needed.
• Pages included — home (hero, stats, services, testimonials, latest articles, CTA), about, services with three membership plans, blog listing and post routes, contact, a custom 404, and an RSS feed.

Who is it for?

• Gym and studio owners: launch a marketing site with services, pricing plans, coach profiles, and testimonials by editing the files in src/data/.
• Fitness coaches and personal trainers: publish training articles as Markdown files under src/content/blog/ and have the listing and RSS feed update automatically.
• Astro developers: use the typed components, SEO-ready BaseLayout, and theme script as a starting point for a static fitness site.

What can you do with Astro Wellness?

• Rebrand for your gym: change the accent color and background in the Bulma @use block and the --aw-* custom properties to re-theme the whole site.
• Publish a content blog: add .md files with the required frontmatter and get a listing page, individual post pages with reading time and tags, and an RSS feed.
• Collect enquiries: the contact form validates in the browser and opens the visitor's email client pre-filled to the configured site email; swap in a form endpoint like Formspree or Netlify Forms for a real backend.

How does Astro Wellness work?

Install dependencies with pnpm install, run pnpm dev for a local server at localhost:4321, and pnpm build to generate the static site in dist/. pnpm check type-checks the Astro and TypeScript code, and pnpm preview serves the production build locally. Customisation happens through src/data/site.ts for site identity and navigation and the matching data files for services, team, pricing, and testimonials.

Pricing

The template is free and open source under the MIT license.

FAQ

Is Astro Wellness free to use?

Yes. Astro Wellness ships under the MIT license, so you can use and modify it for your own gym or studio site.

Does Astro Wellness need a backend?

No. The site is fully static. The contact form opens the visitor's email client with a pre-filled message, so a real form endpoint such as Formspree or Netlify Forms is needed if you want submissions sent to a server.

Can I add blog posts without touching the layout?

Yes. Adding Markdown files under src/content/blog/ with title, description, and pubDate frontmatter updates the blog listing and RSS feed automatically through Astro Content Collections.

What Node.js version does it require?

Astro Wellness requires Node.js 22.22.0 or newer, the minimum for Astro 7, and pnpm 10 or newer. The project uses pnpm exclusively, so npm and yarn are not supported.