Cursor AI, GitHub, Vercel und Cloudflare – vier Werkzeuge, ein nahtloser Workflow. Kein Server-Setup, kein manuelles Deployment. Nur Prompts und Ergebnisse. Ideal für DSGVO-konforme Landingpages im eigenen Produkt- und Dienstleistungsportfolio.
Starte Cursor AI. Klicke oben links auf File → Open Folder und wähle einen vorhandenen Ordner – oder erstelle einen neuen, z.B. ~/Projekte/mein-relaunch. Cursor lädt den Ordner als Projekt.
Der linke Explorer zeigt alle Dateien und Ordner deines Projekts. Neue Dateien, die Cursor erstellt, erscheinen hier sofort. Du siehst jederzeit, was lokal auf deinem Rechner liegt.
Rechtsklick im Explorer → New File → index.html. Ab jetzt arbeitet Cursor in diesem Ordner. Alle generierten Dateien landen direkt hier – lokal, offline verfügbar, unter deiner Kontrolle.
Lege gleich passende Unterordner an: /assets/images/ für Grafiken, /assets/fonts/ für Schriftarten. So bleiben übernommene Dateien aus der bestehenden Webseite sauber organisiert.
Spiegelt die komplette Webseite lokal – HTML, CSS, Bilder und alle verlinkten Dateien. Einfach URL eingeben, Zielordner wählen, starten. Ideal wenn kein FTP-Zugang vorhanden ist.
Direkter Zugriff auf den Hosting-Server. Vollständige Kontrolle über alle Dateien – auch solche, die bei einem Browser-Download nicht erfasst werden (z.B. serverseitige Konfigurationen).
Kopiere die heruntergeladenen Assets (Logos, Bilder, Fonts) aus dem Download-Ordner in deinen Cursor-Projektordner – z.B. nach /assets/images/. Cursor erkennt sie sofort im Explorer.
Im Cursor-Chat einfach @dateiname.png eintippen – Cursor zeigt Vorschläge aus deinem Projekt. So kann die KI direkt auf deine Grafiken zugreifen und sie im Relaunch berücksichtigen.
Füge heruntergeladene HTML- oder CSS-Dateien ebenfalls in den Projektordner. Mit @index.html oder @style.css kann Cursor das bestehende Corporate Design erkennen und übernehmen.
Nicht alles vom alten Server ist sinnvoll. Wähle gezielt: Logo, Schriften, Hauptgrafiken, ggf. bestehende CSS-Variablen. Überflüssige CMS-Dateien oder Server-Konfigurationen weglassen.
KI-gestützter Code-Editor. Du beschreibst in natürlicher Sprache – Cursor schreibt den Code. Ideal ohne tiefe Programmierkenntnisse.
Speichert alle Dateien deiner neuen Webseite und protokolliert jede Änderung. Jederzeit zurück zu einem früheren Stand. Und Vercel hört aktiv zu.
Sobald du nach GitHub pushst, deployed Vercel automatisch. Live-Link zum Testen – ohne Server-Setup, ohne manuelle Uploads, kostenlos.
Steuerung deiner Domain, SSL-Zertifikat, Statistiken und Angriffsschutz. Der kostenfreie Account reicht für den Start vollständig aus.
DNS-Einträge, SSL-Zertifikat, Statistiken und Schutz deiner Domain – alles über den kostenlosen Cloudflare-Account. Sobald Vercel als Nameserver eingetragen ist, läuft deine echte Domain über denselben automatisierten Prozess.
Führe die Prompts in dieser Reihenfolge aus. Nach jedem Schritt: Ergebnis lesen, einordnen, ggf. für den nächsten Prompt nutzen. Das Ergebnis ist eine deploybare, DSGVO-taugliche Basis – auch für Landingpages. Am Ende der Änderungen: Commit und Push. Cursor kann dir die Befehle für das Projekt vorschlagen; ist GitHub per SSH-Key dauerhaft verbunden, reicht es, „Commit und Push“ einzugeben oder einzusprechen. Die Befehle kannst du auch aus dem Chat ins Cursor-Terminal kopieren (git add ., git commit -m "…", git push).
og:title, og:description, og:image, og:url)? Notiere die wichtigsten Punkte für Prompt 3.
Nach Änderungen an der Seite immer Commit und Push ausführen – z. B. Befehle aus dem Cursor-Chat ins integrierte Terminal kopieren. Warum manchmal keine erneute Anmeldung nötig ist: Cursor nutzt deinen lokalen Git-Zustand; wenn der SSH-Key einmal entsperrt ist (oder die Passphrase im Kennwort-Manager/Keychain gespeichert), übernimmt das Terminal das. Bei manueller Nutzung im eigenen Terminal wird die Passphrase bei jedem Push abgefragt, sofern nicht gespeichert.
Für Commit und Push auf GitHub einen SSH-Key verwenden – keine Kennwörter im Browser, keine Token-Pflege. Passphrase im Kennwort-Manager ablegen; dann liefert sie die Authentifizierung bei Bedarf.
ssh-keygen -t ed25519 -C "[email protected]" – Enter, optional Passphrase setzen und im Kennwort-Manager speichern.cat ~/.ssh/id_ed25519.pub (bzw. id_rsa.pub bei RSA).git remote set-url origin [email protected]:nutzer/repo.git Danach: Commit wie gewohnt, Push nutzt den SSH-Key.Am Ende von Änderungen:git add .git commit -m "…"git push – die Befehle kannst du aus dem Chat ins Cursor-Terminal kopieren.
Rules und Skills legen fest, wie deine Webseite und alle zugehörigen Seiten (z. B. Landingpages) aussehen und aufgebaut sind. Die KI hält sich daran – einheitliches Layout, Farben, Typo, responsive. So bleiben alle Unterseiten konsistent. Einheitliche Vorgaben unterstützen DSGVO-konforme Landingpages und können mit der Zeit zu größerer Reichweite und mehr Aufrufen beitragen.
Einen Claude Skill bzw. Cursor Rules anlegen, die dein CI und deine Layout-Vorgaben beschreiben (Farben, Schriften, responsive, wiederkehrende Elemente).
.cursor/rules/anlegen (oder vorhandenes Rules-Repo als Submodule einbinden)..mdc-Dateien mit Beschreibung (description), ggf. globs (z. B. **/*.html), und den konkreten Vorgaben: Farben, Typografie, Breakpoints, Komponenten.Nach Anpassungen: Commit und Push; Befehle ggf. aus dem Chat ins Terminal kopieren.
Ein Template-Repo enthält das vollständige Projektgerüst inkl. Rules (als Submodule). Es eignet sich besonders für DSGVO-konforme Landingpages zu Produkten und Dienstleistungen – mit der Zeit kann das zu größerer Bedeutung der Webseite durch mehr Aufrufe und Reichweite führen. Du nutzt es je nach Situation unterschiedlich:
meine-landing.de).git clone --recurse-submodules [email protected]:nutzer/meine-landing.de.git.npm installnpm run build (falls im Template vorgesehen); mit Vercel verbinden, Include Git submodules aktivieren.berent-rules-setupausführen (oder Setup-Skript von deinem Rules-Repo). Das hängt das Rules-Repo als Submodule unter .cursor/rules ein.git add .gitmodules .cursor/rulesgit commit -m "Rules als Submodule einbinden"git push In Vercel „Include Git submodules“ aktivieren.Rules zentral aktualisieren:git submodule update --remote .cursor/rules Dann Commit und Push. Alle Projekte können so die gleichen Rules nutzen.
Damit LinkedIn in Beiträgen eine Vorschau (Titel, Beschreibung, Bild) zeigt, braucht deine Seite Open-Graph-Meta-Tags im <head>. In Kommentaren zeigt LinkedIn in der Regel nur einen Textlink ohne Vorschau – das ist plattformseitig und nicht per Code erzwingbar.
<head> setzen: og:title, og:description, og:image, og:url.og:image eine öffentlich erreichbare https://-URL verwenden (empfohlenes Format: ca. 1200×627 px).