Lovable → GitHub → Vercel: Der komplette Deployment-Flow für SEO-ready Apps

Warum dieser Flow?

Lovable ist fantastisch für die Generierung von Web-Apps. Aber für Production-Deployments mit SEO-Anforderungen brauchst du mehr:

• Versionskontrolle – Wer hat wann was geändert?
• CI/CD – Automatische Builds und Tests bei jedem Push
• Edge Delivery – Statische Assets von CDN-Nodes weltweit ausliefern
• Preview Deployments – Jeder Branch bekommt eine eigene URL zum Testen
• Custom Domain – Deine eigene Domain statt einer Subdomain

Der Flow Lovable → GitHub → Vercel löst all das. Und in Kombination mit Playwright SSG und automatischem JSON-LD Schema wird deine App vollständig SEO-ready.

Kontext: Dieser Artikel ist Teil unseres Vibe Coding SEO Playbooks.

Schritt 1: Code von Lovable nach GitHub exportieren

GitHub-Integration aktivieren

1. Öffne dein Lovable-Projekt
2. Klicke auf Settings → GitHub
3. Verbinde dein GitHub-Konto
4. Wähle ein Repository (neu erstellen oder bestehendes nutzen)
5. Klicke auf Push to GitHub

Lovable pusht den gesamten Quellcode – inklusive package.json, vite.config.ts, und alle Komponenten.

Was wird exportiert?

my-lovable-app/
├── src/
│   ├── components/    # React-Komponenten
│   ├── pages/         # Seiten
│   ├── hooks/         # Custom Hooks
│   ├── lib/           # Utility-Funktionen
│   └── App.tsx        # Root-Komponente
├── public/            # Statische Assets
├── package.json       # Dependencies
├── vite.config.ts     # Build-Konfiguration
├── tailwind.config.ts # Styling
└── tsconfig.json      # TypeScript

Wichtig: Nach dem ersten Export kannst du sowohl in Lovable als auch lokal weiterarbeiten. Lovable synchronisiert bidirektional mit GitHub.

Schritt 2: Repository-Struktur und Branch-Strategie

Empfohlene Branch-Strategie

main          → Production (Vercel Production Deployment)
├── develop   → Staging (Vercel Preview Deployment)
│   ├── feature/seo-optimization
│   ├── feature/new-landing-page
│   └── fix/mobile-navigation

Wichtige Dateien hinzufügen

Nach dem Export solltest du folgende Dateien ergänzen:

.github/workflows/ci.yml – CI Pipeline:

name: CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - run: npm run lint

vercel.json – Vercel-Konfiguration:

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ],
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

Die rewrites-Regel ist kritisch für SPAs: Sie stellt sicher, dass alle Routen auf index.html zeigen, damit React Router funktioniert.

Schritt 3: Vercel-Projekt anlegen

Vercel mit GitHub verbinden

1. Gehe zu vercel.com und erstelle ein Konto
2. Klicke auf New Project
3. Wähle Import Git Repository
4. Autorisiere den Zugriff auf dein GitHub-Repository
5. Vercel erkennt automatisch: Vite Framework, dist Output Directory
6. Klicke auf Deploy

Das war's. Ab jetzt wird jeder Push zu main automatisch deployed.

Was Vercel automatisch macht

• ✅ Build: npm run build bei jedem Push
• ✅ Preview URLs: Jeder Branch/PR bekommt eine eigene URL
• ✅ SSL: Automatisches HTTPS-Zertifikat
• ✅ CDN: Globale Edge-Distribution
• ✅ Rollbacks: Ein-Klick-Rollback zu jeder Version

Schritt 4: Build-Settings optimieren

Environment Variables

In Vercel → Settings → Environment Variables:

VITE_API_URL=https://api.deine-domain.com
VITE_SUPABASE_URL=https://xxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJ...

Wichtig: Alle Vite-Variablen müssen mit VITE_ beginnen, damit sie im Client-Bundle verfügbar sind.

Build-Konfiguration

Optimiere deine vite.config.ts für Production:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom', 'react-router-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
        },
      },
    },
    sourcemap: true,
  },
});

Warum manualChunks? Vendor-Libraries ändern sich selten. Durch das Splitting in eigene Chunks können Browser sie länger cachen → schnellere Folge-Besuche.

Schritt 5: Custom Domain & Edge Functions

Custom Domain einrichten

1. Vercel → Settings → Domains
2. Füge deine Domain hinzu: deine-domain.com
3. Vercel zeigt dir die DNS-Einträge, die du beim Domain-Registrar setzen musst
4. Warte auf DNS-Propagation (meist < 1 Stunde)

Edge Functions für dynamische Inhalte

Wenn du serverseitige Logik brauchst (z. B. API-Proxying, Redirects), nutze Vercel Edge Functions:

// api/og-image.ts
import { ImageResponse } from '@vercel/og';

export const config = { runtime: 'edge' };

export default function handler(req: Request) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') || 'Default Title';

  return new ImageResponse(
    <div style={{ display: 'flex', fontSize: 48, background: '#1a2744', color: 'white', width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center' }}>
      {title}
    </div>,
    { width: 1200, height: 630 }
  );
}

Das Ergebnis

Nach der Implementierung dieses Flows hast du:

Metrik	Lovable Hosting	Lovable → GitHub → Vercel
TTFB	200-500ms	< 50ms
CDN	Begrenzt	Globales Edge Network
CI/CD	Manuell	Automatisch
Preview URLs	❌	✅ Jeder Branch
Custom Domain	❌	✅
Rollbacks	❌	✅ Ein-Klick
Edge Functions	❌	✅

Kompletter SEO-Stack

Dieser Deployment-Flow ist das Fundament. Für vollständige SEO brauchst du zusätzlich:

1. Playwright SSG → Rendert statisches HTML für Suchmaschinen
2. JSON-LD Schema → Strukturierte Daten für Rich Snippets
3. Meta-Tags → Open Graph, Twitter Cards, Canonical URLs
4. Sitemap → Automatisch generiert

Alles zusammen ergibt den Stack, mit dem wir till-freitag.com auf Lighthouse 100 gebracht haben.

---

Du willst den kompletten Stack implementiert bekommen? Wir machen das für dich →

Unser SEO-Audit analysiert deine aktuelle Situation und liefert einen konkreten Implementierungsplan – inklusive Deployment-Setup.

Verwandte Artikel

• 📸 OG-Image Best Practices für SPAs – Dein Vercel-Deploy ist live, aber LinkedIn zeigt keinen Preview? So löst du das.
• 📊 Google Search Console für Vibe-Coding-Projekte – Nach dem Deployment: So verifizierst du deine Domain und trackst die Indexierung.