Skip to content
Astro Swiss Theme

Deployment

Goal: Deploy to Netlify in 5 minutes.

Deploy your Astro Swiss Theme site to production in minutes. These deployment instructions work for both the free starter theme and the paid version.

Building for Production

Section titled “Building for Production”

Build Command

Section titled “Build Command”
Terminal window
npm run build

This creates an optimized production build in the dist/ folder.

Preview Build Locally

Section titled “Preview Build Locally”

Before deploying, test your production build:

Terminal window
npm run preview

Visit http://localhost:4321 to preview the built site.

Build Output

Section titled “Build Output”

The build process:

  1. ✅ Compiles TypeScript to JavaScript
  2. ✅ Optimizes and bundles CSS
  3. ✅ Minifies HTML
  4. ✅ Optimizes images
  5. ✅ Generates static routes for all languages
  6. ✅ Creates sitemap (if configured)

Output structure:

dist/
├── index.html           # French homepage (default locale)
├── de/
│   └──index.html      # German homepage
├── en/
│   └──index.html      # English homepage
├── 404.html            # Language-aware 404 page
├── _astro/             # Bundled CSS and JS
├── fonts/              # Font files
└── favicon.svg

Deploy to Netlify (Primary)

Section titled “Deploy to Netlify (Primary)”

Why Netlify?

  • Simple configuration
  • Automatic HTTPS & CDN
  • GitHub integration
  • Free tier available

Netlify

Section titled “Netlify”

  1. Create netlify.toml in project root:

    netlify.toml
    [build]
      command = "npm run build"
      publish = "dist"

    No redirect rules are needed: this is a static multi-page build, and Netlify automatically serves the theme’s 404.html for unknown URLs. Do not add a catch-all /* → /index.html rewrite — it would silently serve the homepage instead of a 404 for mistyped or removed URLs.

  2. Deploy:

    • Via Dashboard: Go to netlify.com and import your repository
    • Via CLI:
      Terminal window
      npm install -g netlify-cli
      netlify deploy --prod

Language detection in production

Section titled “Language detection in production”

The theme ships client-side first-visit detection: a small inline script on the default-locale homepage reads navigator.language and redirects first-time visitors to /de/ or /en/ — it works on any static host, needs no configuration, and never overrides a language the visitor picked explicitly in the selector.

Optionally, Netlify users can add zero-JS server-side redirects on top:

netlify.toml
[[redirects]]
  from = "/"
  to = "/de/"
  status = 302
  conditions = { Language = ["de"] }


[[redirects]]
  from = "/"
  to = "/en/"
  status = 302
  conditions = { Language = ["en"] }

Broken URLs serve a real language-aware 404 page (there is no SPA catch-all): visitors get a proper 404 status with the message in French, German and English.

Alternative: Vercel

Section titled “Alternative: Vercel”

Vercel auto-detects Astro projects - no configuration file needed:

  1. Go to vercel.com and import your GitHub repository
  2. Vercel automatically configures build settings
  3. Click “Deploy”

Or use CLI:

Terminal window
npm i -g vercel
vercel

Environment Variables

Section titled “Environment Variables”

Public Variables

Section titled “Public Variables”

Variables prefixed with PUBLIC_ are available in client-side code.

Create .env file:

.env
PUBLIC_SITE_URL=https://yourdomain.com
PUBLIC_GTM_ID=GTM-XXXXXXX

Use in components:

---
const siteUrl = import.meta.env.PUBLIC_SITE_URL;
---


<meta property="og:url" content={siteUrl} />

Private Variables

Section titled “Private Variables”

Variables without the PUBLIC_ prefix are only available at build time (and server-side, if you opt a route into on-demand rendering) — they are never exposed to the browser.

.env
API_KEY=secret-key-here
DATABASE_URL=postgres://...

Platform-Specific Setup

Section titled “Platform-Specific Setup”

Add variables in Project Settings → Environment Variables

License Note

Section titled “License Note”

Custom Domain

Section titled “Custom Domain”
  1. Go to Project Settings → Domains
  2. Add your domain
  3. Update DNS records as instructed

Next Steps

Section titled “Next Steps”