Website live schalten
robinDeine 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 init1.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 mainGit-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.app5.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 push4 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! 🎉
