Ship it: Deploy auf Vercel, Domain verbinden, DNS und Cloudflare

Überblick

Das ist die Lektion, die aus einem lokalen Projekt eine echte Website macht, die jeder besuchen kann. Du verbindest dein GitHub-Repo mit Vercel, bekommst in Minuten eine Live-URL, zeigst eine eigene Domain darauf und verstehst DNS und Cloudflare gut genug, um nie wieder Angst vor ihnen zu haben. Schliess das ab und du hast getan, was der ganze Kurs versprochen hat: eine echte App mit KI gebaut und veröffentlicht.

Was du lernst

Du deployst aus deinem privaten GitHub-Repo auf Vercel, richtest automatische Deploys bei jedem Push ein, verbindest eine eigene Domain, verstehst, was DNS-Records tun, und nutzt Cloudflare für DNS, kostenloses HTTPS und grundlegenden Schutz. Keine vorherige Hosting-Erfahrung nötig.

Voraussetzungen

Ein Projekt, das aus der vorigen Lektion in ein privates GitHub-Repo gepusht ist, und ein kostenloser Vercel-Account. Die Grundlagen-Seite zu DNS vertieft den Domain-Abschnitt, aber diese Lektion erklärt genug, um dich live zu bringen. Falls du noch keine Domain besitzt, kannst du zuerst auf der kostenlosen Vercel-URL shippen und später eine Domain ergänzen.

Das Problem

Einsteiger bauen oft etwas Gutes und dann stirbt es auf ihrem Laptop, weil Deployment sich wie eine Wand aus unbekannten Worten anfühlt: Hosting, DNS, Nameserver, SSL, CDN. Also geht das Projekt nie live und bekommt nie Feedback. Diese Lektion löst diese Wand auf, indem sie es einmal, der Reihe nach, macht und den Jargon erklärt, sobald er auftaucht.

Schritt für Schritt: auf Vercel deployen

Vercel ist eine Hosting-Plattform, die genau dafür gebaut ist. Der glatteste Weg ist, dein GitHub-Repo zu verbinden: Vercel beobachtet es und deployt jedes Mal automatisch neu, wenn du pushst. Du fasst das Terminal kaum an.

• Melde dich bei Vercel mit deinem GitHub-Account an.
• Klick auf "Add New Project" und importiere dein privates Repository - Vercel kann private Repos lesen, sobald du es autorisierst.
• Vercel erkennt Framework und Build-Einstellungen automatisch; für eine Standard-Vite- oder Next.js-App kannst du die Defaults akzeptieren.
• Klick auf Deploy. In ein, zwei Minuten bekommst du eine Live-URL wie my-first-app.vercel.app, die jeder auf der Welt öffnen kann.

Von jetzt an löst jeder git push auf deinen main-Branch automatisch ein neues Deploy aus. Das ist der moderne Workflow: du baust lokal, pushst, und deine Live-Seite aktualisiert sich selbst. Wenn du Umgebungsvariablen (deine Secrets) im Vercel-Dashboard statt im Code setzt, bleiben sie sicher und berühren nie dein Repo - dieselbe .env-Disziplin aus der letzten Lektion, in Produktion angewandt.

Was DNS tatsächlich ist

DNS, das Domain Name System, ist das Telefonbuch des Internets. Es übersetzt einen menschlichen Namen wie yoursite.com in die Adresse des Servers, der antworten soll. Wenn du "eine Domain verbindest", fügst du diesem Telefonbuch Einträge hinzu, die sagen "für diesen Namen schick Besucher zu Vercel". Die beiden Records, die dir am häufigsten begegnen, sind ein A-Record (zeigt eine Domain auf eine IP-Adresse) und ein CNAME (zeigt einen Namen auf einen anderen Namen). Das ist ehrlich gesagt das meiste, was du zum Shippen wissen musst.

• A-Record: bildet eine Domain oder Subdomain auf eine numerische IP-Adresse ab.
• CNAME-Record: bildet einen Namen auf einen anderen Namen ab (zum Beispiel www auf dein Vercel-Ziel).
• Nameserver: entscheiden überhaupt erst, welche Firma dein DNS-Telefonbuch hält.
• Propagation: DNS-Änderungen können Minuten bis ein paar Stunden brauchen, um sich weltweit zu verbreiten - nicht kaputt, nur langsam.

Schritt für Schritt: eine eigene Domain verbinden

Öffne in Vercel dein Projekt, geh zu den Domain-Einstellungen und füge deine Domain hinzu. Vercel sagt dir dann genau, welche DNS-Records du bei deinem Domain-Anbieter erstellen sollst. Du kopierst diese Records in die DNS-Einstellungen deines Anbieters, speicherst und wartest auf die Propagation. Vercel verifiziert die Verbindung und stellt automatisch ein kostenloses HTTPS-Zertifikat aus, sodass deine Seite sicher mit dem Schloss lädt.

• Füge deine Domain in den Vercel-Projekteinstellungen hinzu.
• Kopiere die A- und/oder CNAME-Records, die Vercel dir gibt.
• Füge sie bei deinem DNS-Anbieter ein und speichere.
• Warte auf die Verifizierung, besuche dann deine Domain - sie liefert nun deine Live-Seite über HTTPS aus.

Wo Cloudflare reinpasst

Cloudflare ist ein beliebter Ort, um DNS zu verwalten, und es tut mehr als Records zu halten. Zeig die Nameserver deiner Domain auf Cloudflare und du bekommst ein sauberes DNS-Dashboard, kostenloses HTTPS, ein globales Content Delivery Network, das deine Seite weltweit schneller laden lässt, und grundlegenden Schutz gegen Angriffe und Bots. Für die meisten Builder ist das Muster: Domain irgendwo registriert, DNS bei Cloudflare verwaltet, Seite auf Vercel gehostet, mit Cloudflares Records, die auf das Vercel-Ziel zeigen. Du brauchst nicht jedes Cloudflare-Feature am ersten Tag - kostenloses DNS, HTTPS und CDN sind Grund genug, es zu nutzen.

Typische Fehler

Die häufigen: annehmen, die Seite sei kaputt, wenn DNS einfach noch nicht propagiert ist (warten, dann erneut prüfen); die falschen DNS-Records bearbeiten oder veraltete liegen lassen, die kollidieren; vergessen, Umgebungsvariablen in Vercel zu setzen, sodass der Live-Seite ihre Secrets fehlen; und so durch Cloudflare proxen, dass HTTPS doppelt behandelt wird. Wenn etwas falsch aussieht, prüf Propagation und Umgebungsvariablen, bevor du das Schlimmste annimmst.

Business-ROI

Beim Shippen erscheint endlich Wert. Ein Projekt auf deinem Laptop verdient nichts; eine Live-Seite kann Kunden gezeigt, von Google indexiert, von KI empfohlen und mit echtem Feedback iteriert werden. Automatische Deploys heissen, dass eine Verbesserung zu shippen dich einen einzigen git push kostet, sodass die Schleife von Idee zu Live-Update Minuten dauert, nicht Tage. Diese Geschwindigkeit ist der gesamte Wettbewerbsvorteil dieser Bauweise.

Checkliste

Du hast Kurs 1 abgeschlossen, wenn alles davon stimmt. Nimm dir einen Moment - das ist ein echter Meilenstein.

• Dein Projekt ist auf Vercel deployed und live unter einer öffentlichen URL.
• Jeder git push deployt die Seite automatisch neu.
• Secrets leben in Vercel-Umgebungsvariablen, nicht im Repo.
• Eine eigene Domain (oder die Vercel-URL) lädt deine Seite über HTTPS.

Ressourcen

Halt die Vercel- und Cloudflare-Dashboards als Lesezeichen und lehn dich an die DNS-Grundlagen-Seite, wann immer Records dich verwirren. Die Vercel-Deploy-Checkliste in der Ressourcen-Bibliothek hält diese Schritte fürs nächste Mal fest. Du hast jetzt die ganze Schleife durchlaufen: Idee, Bauen, Versionskontrolle, Shippen.

Deine Aufgabe

Deploye dein Projekt auf Vercel und bestätige, dass es unter einer öffentlichen URL lädt. Falls du eine Domain besitzt, verbinde sie über DNS und bestätige, dass HTTPS funktioniert. Mach dann eine kleine Änderung lokal, committe, pushe und sieh zu, wie Vercel automatisch neu deployt. Glückwunsch: du hast eine echte Website mit KI gebaut und veröffentlicht.

Nächste Lektion

Du kannst eine Idee jetzt den ganzen Weg bis zu einer Live-Seite bringen. Kurs 2, Claude Code Mastery, macht aus dem Agent statt eines hilfreichen Tools einen verlässlichen Power-User-Workflow: Projektregeln, wiederverwendbare Skills, automatisierte Quality Gates, MCP und Multi-Agent-Systeme.