Skip to content
Astro Swiss Theme

Getting Started

Goal: Get your multilingual site running locally in 10 minutes.

Welcome! Let’s get your site running and customized in about 10 minutes.

Install & Run 2 minutes

Section titled “Install & Run 2 minutes”

  1. Clone the repository

    Terminal window
    # Free starter theme (public repository)
    git clone https://github.com/vincentheimann/astro-swiss-free-starter-theme.git
    cd astro-swiss-free-starter-theme

  2. Install dependencies

    Terminal window
    npm install

  3. Start the dev server

    Terminal window
    npm run dev

✅ Success! Open http://localhost:4321 in your browser. You should see:

Homepage in light mode

Make It Yours 8 minutes

Section titled “Make It Yours 8 minutes”

1. Update Your Company Info 3 minutes

Section titled “1. Update Your Company Info 3 minutes”

Open src/consts.ts and update:

src/consts.ts
export const COMPANY: CompanyInfo = {
    name: "Your Company Name",           // ← Change this
    address: "Your Street Address",      // ← And this
    city: "CH-1000 Your City",          // ← And this
    phone: "+41 XX XXX XX XX",          // ← Your phone
    email: "contact@yourcompany.com",   // ← Your email
    // ... rest stays the same for now
};

Save and watch your browser update instantly! ⚡

2. Change Your Brand Colors 2 minutes

Section titled “2. Change Your Brand Colors 2 minutes”

Open src/styles/tokens.css and update the accent color:

src/styles/tokens.css
:root {
  --accent: #3b82f6;  /* Change to your brand color */
}

Try it! The theme will update immediately with your brand color.

3. Update Site Name & Description 3 minutes

Section titled “3. Update Site Name & Description 3 minutes”

Open src/i18n/ui.ts and find the fr: section (French):

src/i18n/ui.ts
fr: {
  'business.name': 'Your Company Name',
  'business.tagline': 'Your tagline here',
  'site.title': 'Your Site Title',
  'site.description': 'Your site description for SEO',
  // ... more below
}

Do the same for the de: section (German) if you’re using both languages.

What You Just Built

Section titled “What You Just Built”

You now have a multilingual website with:

  • 🌍 French & German language support
  • 🌓 Automatic dark/light mode
  • 📱 Mobile-responsive design
  • ⚡ Blazing-fast performance

Next Steps - Pick Your Path

Section titled “Next Steps - Pick Your Path”