Yoga Fitness

Yoga Fitness is an Astro theme for yoga and wellness studios that ships one rich home page, a Markdown blog, a contact page and a custom 404, all output as static HTML with almost no JavaScript. It is a theme, not a SaaS product: you clone the repository, edit TypeScript data files, and build a studio site.

What is Yoga Fitness?

Yoga Fitness is a static site theme built on Astro 7 and written in TypeScript, intended for yoga and wellness studios. Content lives in small data files under src/data/ and a blog collection under src/content/blog/, and npm run build writes the finished site to dist/. It runs on any static host and is published as an MIT-licensed repository by Scintillaweb.

Key Features

• Astro 7 static output — no UI framework, no client-side runtime; interactivity is small vanilla TypeScript scripts inlined by Astro.
• Plain CSS with design tokens — colors, type scale, radii and spacing are custom properties in src/styles/tokens.css.
• Single rich home page — hero, approach pillars, classes, tabbed practice focus with image hotspots, weekly schedule, coaches, first-visit steps, memberships with monthly/yearly toggle, member stories slider, gallery, retreats, FAQ, latest posts and newsletter.
• Markdown blog — an Astro content collection with featured post, tags, related posts, breadcrumbs, RSS feed and sitemap via @astrojs/sitemap and @astrojs/rss.
• Accessibility work — skip link, aria-current, keyboard-operable mobile menu, ARIA tabs with arrow keys, prefers-reduced-motion support and no-JavaScript fallbacks such as <details>-based FAQ.
• SEO and structured data — canonical URLs, Open Graph and X/Twitter cards, plus JSON-LD for WebSite, HealthAndBeautyBusiness, BlogPosting and BreadcrumbList.
• Provider-ready forms — contact and newsletter forms are static HTML; endpoints are set in src/config/site.ts for Formspree, Web3Forms or Netlify Forms.
• Sub-path deploys — a single BASE_PATH environment variable makes internal links and assets work from GitHub Pages project sites.

Who is it for?

• Yoga and wellness studio owners — launch a marketing site with class listings, timetable, pricing and coach bios without a CMS.
• Independent coaches and teachers — present classes, retreats and a blog from one notebook-editable data layer.
• Astro developers building a studio client site — start from a typed config and data layer in src/config/site.ts and src/data/*.ts rather than a component scaffold.

Use cases

• Scheduling a class timetable: edit src/data/schedule.ts with one entry per day (time, period, class name, instructor, duration, optional level and booking URL).
• Selling memberships: set monthlyPrice and yearlyPrice per plan in src/data/pricing.ts and optionally mark one as featured for a dark card; no payment system is included, so CTAs link to your booking page.
• Publishing studio articles: drop a Markdown file in src/content/blog/ with frontmatter for title, description, category, image, tags and reading time; the file name becomes the URL.
• Announcing retreats: add ISO-dated retreat entries in src/data/retreats.ts that format themselves on the card.

How does Yoga Fitness work?

Clone the repository, run npm install, then npm run dev on Node.js 22.12.0 or newer. Edit the data and config files, add your own WebP photos to public/images/, set SITE_URL for canonical links and the sitemap, and run npm run build. Deployment instructions are given for Vercel, Netlify, Cloudflare Pages, GitHub Pages and any static host.

FAQ

Is the Yoga Fitness contact form functional out of the box?

No. Both the contact form and the newsletter form run in demo mode: input is validated in the browser and a notice says nothing was sent. To send messages you set a provider endpoint such as Formspree or Web3Forms in the forms config.

Which pages does the theme include?

Only five routes exist: the home page, the contact page, the blog index, individual blog posts and a custom 404. Classes, schedule, coaches, pricing, retreats and FAQ are sections of the home page linked with hash anchors so they resolve from any page.

Are the demo photos licensed for a real business site?

The photographs come from pxhere.com under CC0 1.0, which covers copyright but not model releases since some show identifiable people. The repository recommends replacing them with your own studio photography, and the named coaches and members are fictional.

Can I deploy it to a GitHub Pages project site?

Yes. Set SITE_URL to your GitHub Pages origin and BASE_PATH to the repository name in the withastro/action workflow; internal links and assets respect the base path. The static output goes in dist.