Website live schalten

Deine Website live schalten — Von localhost zu deiner Domain

Der große Moment ist gekommen! Deine Website ist fertig und wartet darauf, der Welt präsentiert zu werden. In diesem Tutorial zeigen wir dir, wie du dein Projekt auf Vercel deployst und mit deiner eigenen Domain verbindest.

Am Ende dieses Tutorials ist deine Website unter www.deine-domain.de erreichbar — professionell, schnell und sicher mit HTTPS.

Übersicht: Der Deployment-Prozess

1 Code auf GitHub pushen

Dein lokales Projekt wird zu GitHub hochgeladen.

2 Projekt mit Vercel verbinden

Vercel erkennt dein GitHub-Repository und richtet automatisches Deployment ein.

3 Erster Build

Vercel baut deine Website und gibt dir eine temporäre URL.

4 Domain verbinden

Deine gekaufte Domain wird auf die Vercel-Website gerichtet.

5 SSL aktivieren

Vercel aktiviert automatisch HTTPS für deine Domain.

Schritt 1: Git Repository initialisieren

Falls du noch kein Git-Repository hast, müssen wir es erst erstellen.

1.1 Terminal öffnen

Öffne das Terminal in Cursor (View → Terminal oder Ctrl+`).

1.2 Git initialisieren

Falls noch nicht geschehen:

git init

1.3 Alle Dateien hinzufügen

git add .

1.4 Ersten Commit erstellen

git commit -m "Initial commit: Website fertig"

Schritt 2: GitHub Repository erstellen

2.1 GitHub öffnen

Gehe zu github.com/new

2.2 Repository-Name eingeben

Wähle einen Namen, z.B. meine-website oder firmenname-website.

2.3 Sichtbarkeit wählen

Private empfohlen — dein Code ist nur für dich sichtbar. "Public" nur, wenn du den Code teilen möchtest.

2.4 Repository erstellen

Klicke auf "Create repository". Initialisiere NICHT mit README/gitignore (das haben wir schon).

2.5 Remote hinzufügen

GitHub zeigt dir die Befehle. Im Terminal:

git remote add origin https://github.com/deinname/meine-website.git
git branch -M main
git push -u origin main

Git-Authentifizierung: Falls du nach Benutzername/Passwort gefragt wirst, nutze statt deines Passworts einen Personal Access Token (unter GitHub Settings → Developer Settings → Personal Access Tokens erstellen).

Schritt 3: Projekt auf Vercel deployen

3.1 Vercel Dashboard öffnen

Gehe zu vercel.com/dashboard und logge dich ein.

3.2 Neues Projekt hinzufügen

Klicke auf "Add New..." → "Project".

3.3 Repository importieren

Du siehst eine Liste deiner GitHub-Repositories. Wähle dein Website-Repository aus.

Falls es nicht erscheint: "Adjust GitHub App Permissions" klicken und Zugriff gewähren.

3.4 Konfiguration prüfen

Vercel erkennt automatisch, dass es ein Next.js-Projekt ist. Die Standardeinstellungen sind meist korrekt:

Framework Preset: Next.js
Root Directory: ./ (oder leer)
Build Command: next build (automatisch)

3.5 Umgebungsvariablen setzen (falls nötig)

Wenn dein Projekt Umgebungsvariablen braucht (z.B. für Supabase oder Formspree), füge sie hier hinzu.

3.6 Deploy klicken

Klicke auf "Deploy". Vercel beginnt mit dem Build-Prozess.

Schritt 4: Build überwachen

Nach dem Klick auf "Deploy" siehst du den Build-Log in Echtzeit:

Typische Build-Schritte

Repository klonen
Dependencies installieren (npm install)
Build ausführen (next build)
Static Assets optimieren
Deployment auf CDN

Dauer: 30 Sekunden bis 2 Minuten

Bei Fehlern

Wenn der Build fehlschlägt:

Lies die Fehlermeldung genau
Meist sind es TypeScript-Fehler oder fehlende Dependencies
Kopiere den Fehler in Cursor und lass ihn beheben
Pushe den Fix zu GitHub
Vercel baut automatisch neu

Schritt 5: Preview URL testen

Nach erfolgreichem Build erhältst du eine Preview-URL wie:

https://meine-website-abc123.vercel.app

5.1 Website prüfen

Öffne die URL und prüfe:

Sieht alles richtig aus?
Funktionieren alle Links?
Funktioniert das Kontaktformular?
Funktioniert die Terminbuchung?

5.2 Mobile testen

Öffne die URL auf deinem Smartphone und prüfe die mobile Ansicht.

5.3 Geschwindigkeit prüfen

Teste auf PageSpeed Insights — Ziel: 90+ auf Mobile und Desktop.

Schritt 6: Eigene Domain verbinden

Jetzt verbinden wir deine gekaufte Domain mit Vercel.

6.1 Domain-Einstellungen öffnen

In Vercel: Projekt → Settings → Domains

6.2 Domain hinzufügen

Gib deine Domain ein: deine-domain.de

Vercel fragt, wie du die Domain konfigurieren möchtest.

6.3 www-Variante hinzufügen

Füge auch www.deine-domain.de hinzu. Vercel richtet automatisch eine Weiterleitung ein.

6.4 DNS-Methode wählen

Du hast zwei Optionen:

Nameserver (empfohlen): Vercel übernimmt DNS komplett
A-Record/CNAME: Du behältst DNS bei deinem Registrar

Option A: Nameserver-Methode (Empfohlen)

Bei dieser Methode übernimmt Vercel die komplette DNS-Verwaltung.

A.1 Vercel zeigt dir zwei Nameserver an, z.B.:
ns1.vercel-dns.com
ns2.vercel-dns.com

A.2 Gehe zu deinem Domain-Registrar (Namecheap, IONOS, etc.)

A.3 Finde die Nameserver-Einstellungen (oft unter "DNS" oder "Nameservers")

A.4 Ersetze die bestehenden Nameserver durch die von Vercel

A.5 Speichere und warte 5-30 Minuten (manchmal bis zu 48 Stunden)

Option B: A-Record/CNAME-Methode

Falls du die DNS-Verwaltung bei deinem Registrar behalten willst:

B.1 A-Record für Root-Domain
Host: @ oder leer
Type: A
Value: 76.76.21.21

B.2 CNAME für www
Host: www
Type: CNAME
Value: cname.vercel-dns.com

Schritt 7: SSL-Zertifikat

Vercel stellt automatisch ein SSL-Zertifikat aus, sobald die Domain verifiziert ist. Du musst nichts tun!

Nach ein paar Minuten ist deine Website unter https://deine-domain.de erreichbar — mit dem grünen Schloss-Symbol im Browser.

Was ist SSL? SSL (Secure Sockets Layer) verschlüsselt die Verbindung zwischen Browser und Server. Es ist erkennbar am https:// statt http:// und wird von Google als Ranking-Faktor berücksichtigt.

Schritt 8: Automatische Deployments

Das Beste an der GitHub-Vercel-Integration: Jedes Mal, wenn du Änderungen zu GitHub pushst, wird deine Website automatisch aktualisiert!

Workflow für Änderungen

1 Änderung in Cursor machen

Bearbeite deine Website lokal.

2 Änderungen committen

git add .
git commit -m "Beschreibung der Änderung"

3 Zu GitHub pushen

git push

4 Automatisches Deployment

Vercel erkennt den Push, baut neu und deployed. In 30-60 Sekunden ist die Änderung live!

In Cursor: Du kannst Git-Befehle auch über die Sidebar (Source Control) oder den Cursor-Chat ausführen: "Committe alle Änderungen mit der Nachricht 'Hero-Section aktualisiert' und pushe zu GitHub"

Häufige Probleme und Lösungen

Domain zeigt alte Website

Problem: Nach DNS-Änderung erscheint noch die alte Website.

Lösung: DNS-Propagation dauert bis zu 48 Stunden. Browser-Cache leeren (Cmd+Shift+R) oder anderen Browser/Inkognito-Modus testen.

Build schlägt fehl

Problem: Vercel zeigt Fehler beim Build.

Lösung: Lies den Build-Log genau. Typische Ursachen: TypeScript-Fehler, fehlende Umgebungsvariablen, falsche Import-Pfade. Behebe lokal und pushe erneut.

SSL-Zertifikat fehlt

Problem: Website lädt nur über http, nicht https.

Lösung: Warte 5-10 Minuten — Vercel braucht Zeit für das Zertifikat. Falls nach 1 Stunde noch nicht: Prüfe DNS-Einstellungen.

Formular funktioniert nicht

Problem: Kontaktformular sendet keine E-Mails.

Lösung: Prüfe Umgebungsvariablen in Vercel. Bei Formspree: Ist die Formular-ID korrekt? Bei Supabase: Sind die Keys hinterlegt?

Nach dem Launch: Checkliste

Deine Website ist live! Prüfe folgende Punkte:

☐ Website unter Domain erreichbar (mit und ohne www)
☐ HTTPS funktioniert (grünes Schloss)
☐ Alle Seiten laden korrekt
☐ Kontaktformular funktioniert (Test-Nachricht senden!)
☐ Kalender-Buchung funktioniert (falls vorhanden)
☐ Mobile Ansicht sieht gut aus
☐ PageSpeed Score über 90
☐ Impressum und Datenschutz vorhanden
☐ Google Search Console einrichten (nächster Schritt!)
☐ Google Analytics einrichten (nächster Schritt!)

Nächste Schritte

Herzlichen Glückwunsch! Deine Website ist live. Aber das ist erst der Anfang. In den nächsten Modulen lernst du:

Organische Sichtbarkeit

SEO-Grundlagen
Google Search Console einrichten
Blog als SEO-Werkzeug
Lokale Verzeichnisse

Bezahlte Sichtbarkeit

Google Ads Grundlagen
Meta Ads (Facebook/Instagram)
Conversion-Tracking
Kampagnen-Optimierung

Gratulation! Du hast gerade deine eigene professionelle Website erstellt und live geschaltet — ohne eine Zeile Code selbst zu schreiben. Das ist eine echte Leistung! 🎉