Astro Starter Kit RTL

A production-ready Astro website template with full RTL (right-to-left) and LTR support. Built for speed, accessibility, and SEO — ideal for business websites, consulting firms, agencies, and service providers.

Features

• 10+ Pages — Home, About, Services, Contact, Blog, Privacy, Terms, 404, Styleguide
• 15+ Components — Hero, PricingTable, StatsBar, FeatureGrid, SplitSection, Breadcrumb, Pagination, BlogCard, FAQ accordion, testimonials, forms, and more
• Dark Mode — Automatic dark mode via prefers-color-scheme media query
• RTL & LTR — Full bidirectional support with logical CSS properties
• SEO Optimized — JSON-LD schema, meta tags, Open Graph, sitemap, canonical URLs
• Blog System — MDX-powered blog with content collections, tags, and date formatting
• Scroll Animations — Fade-in and slide-in effects via IntersectionObserver
• Accessible — Skip links, ARIA labels, semantic HTML, keyboard navigation
• Zero JavaScript Frameworks — Vanilla JS only, minimal footprint
• Static Output — Deploys anywhere (Vercel, Netlify, Cloudflare Pages, any CDN)

Quick Start

npm install
npm run dev

Open http://localhost:4321 in your browser.

Build for Production

npm run build
npm run preview

Customization Guide

You only need to touch 5 files to make this template your own:

1. astro.config.mjs

Change the site URL to your production domain:

site: 'https://yourdomain.com',

2. .env

Set your site name and optional analytics keys:

SITE_NAME="Your Business Name"

3. public/css/tokens.css

Change brand colors, fonts, and spacing to match your identity. The entire site theme is controlled by CSS custom properties in this single file.

4. src/components/Header.astro

Update navigation links, logo, and CTA button to match your site structure.

5. src/components/Footer.astro

Update contact information, social links, and footer content.

RTL to LTR Switching

To switch from RTL (Hebrew/Arabic) to LTR (English):

1. src/layouts/BaseLayout.astro — Change dir = 'rtl' to dir = 'ltr' and lang = 'he' to lang = 'en'
2. public/css/base.css — Change direction: rtl to direction: ltr (if present)

The template uses CSS logical properties (inline-start, inline-end, block-start, block-end) so layouts adapt automatically.

File Structure

src/
  components/       # Reusable Astro components
  content/
    blog/            # Blog posts (MDX files)
  data/              # Static data files
  layouts/
    BaseLayout.astro # Main HTML wrapper
  pages/
    about/           # About page
    blog/            # Blog listing and post pages
    contact/         # Contact form
    privacy/         # Privacy policy
    services/        # Services overview
    terms/           # Terms of service
    404.astro        # Not found page
    index.astro      # Homepage
    styleguide.astro # Component showcase
public/
  css/               # Stylesheets (tokens, base, components, utilities)
  fonts/             # Web fonts (woff2)
  img/               # Images and logos
  js/                # Vanilla JavaScript

Deployment

Vercel

npx vercel

Netlify

Push to a Git repository and connect it in the Netlify dashboard. Build command: npm run build. Publish directory: dist.

Cloudflare Pages

Connect your repository in the Cloudflare dashboard. Build command: npm run build. Build output directory: dist.

License

MIT License. See LICENSE.md for details.

Support

No support. No guaranteed updates. Source code as-is.