Cursor-Praxisprojekt-16: Schnelle Entwicklung eines Social-Media-Bildertools mit Cursor – Vollständiger Leitfaden von der Idee bis zur Veröffentlichung (Teil 4) — Domain-Kauf+GitHub+Vercel+Cloudflare→Online-Veröffentlichung der Website

Projektbeschreibung

Von Null zur Veröffentlichung: Mit Domain + GitHub + Vercel + Cloudflare veröffentlichen Sie Ihre Website in 2 Stunden im Internet.

Sie werden Folgendes abschließen: Domain auswählen/binden → Code auf GitHub pushen → Automatische Builds und Veröffentlichung mit Vercel → DNS und HTTPS konfigurieren – alles in einem.

Kernidee: Konzentrieren Sie sich nur auf den Code, den Rest erledigt die Automatisierungspipeline; jeder Commit löst eine Bereitstellung aus, Updates gehen sofort live, und Fehler können mit einem Klick rückgängig gemacht werden.

Endergebnis: Eine online verfügbare Website mit Ihrer eigenen Domain, global erreichbar und mit HTTPS.

Geschätzter Zeitaufwand: Ca. 2 Stunden, auch für Anfänger geeignet.

Ergebnispräsentation

Website ist live: pixtoolkits.com

pixtoolkits.com

Vorbereitung

Cursor
- Version: 1.3.9
- Cursor-Regeln: https://cursorpractice.com/zh/cursor-tutorials/prompts/system-prompts
- Agent: claude-4-sonnet-thinking, GTP-5
- Projektregeln: ./cursorpractice-06-10xUse.md
Optional: Gemini CLI
- Installation: npm install -g @gemini-cli/gemini
- Verwendung: gemini --help

Warum dieses Modell?

Rollen und Vorteile der Komponenten: GitHub (Kollaboration & Versionierung), Vercel (Zero-Config-Deployment & Edge-Funktionen), Cloudflare (Globales DNS & Sicherheit).
Einfach und bequem: Code auf GitHub pushen, die Website wird automatisch gebaut und veröffentlicht – kein Server-Management nötig.
Kostengünstig: Alle drei bieten kostenlose Tarife, ideal für Einzelpersonen oder kleine Teams.
Schneller: Globale Beschleunigung, guter Zugriff aus dem In- und Ausland.
Sicherer: HTTPS standardmäßig, grundlegender Schutz out-of-the-box.
Bessere Zusammenarbeit: Änderungen werden protokolliert, Vorschau-URLs verfügbar, Probleme mit einem Klick rückgängig machbar.
Flexibel: Domain bei Cloudflare verwaltet, späterer Wechsel der Hosting-Plattform problemlos möglich.
Hinweise:
- Domain- und SSL-Bindung kann einige Minuten bis Stunden dauern.
- Bilder/Seiten können gecached werden, APIs oder Echtzeitdaten sollten nicht zwangsgecached werden.
- Bei Problemen nach der Veröffentlichung kann schnell auf eine vorherige Version zurückgesetzt werden.

Gesamtprozess

Domain registrieren;
GitHub-Repository erstellen;
Code in Cursor bearbeiten, mit GitHub-Repository verbinden und pushen;
Vercel registrieren und Projekt initialisieren, GitHub-Repository verbinden;
Domain binden, DNS einrichten, HTTPS-Zertifikat automatisch generieren;
Domain im Browser öffnen und aufrufen.

Detaillierte Projektsschritte

1) Domain-Registrierung

Es gibt viele Domain-Anbieter, ich habe namesilo gewählt: www.namesilo.com/
Lassen Sie sich von Cursor einige Domain-Vorschläge basierend auf der Projektfunktionalität geben und prüfen Sie die Verfügbarkeit.
pixtoolkits.com war verfügbar, ausgewählt und bezahlt.

2) GitHub-Repository erstellen

GitHub registrieren;
Neues Repository erstellen: Oben rechts "+" → "New repository";
Repository-Name eingeben (kann mit Domain übereinstimmen), öffentlich oder privat wählen;
Repository-Link kopieren;

3) Code in Cursor bearbeiten, mit GitHub verbinden und pushen

Im Git-Menü (Symbol) "..." → "Remote" → "Remote-Repository hinzufügen" → Link und Name eingeben;
Authentifizierung möglicherweise erforderlich – bei Fragen Cursor nutzen;
Nach erfolgreicher Bindung Code pushen: "Commit" im linken Menü, orangefarbene Wolke zeigt Remote-Repository-Version an;

4) Vercel registrieren, Projekt initialisieren und GitHub-Repository verbinden

Vercel registrieren;
Projekt erstellen: "ADD NEW..." → "Project";
GitHub-Konto verbinden (Authentifizierung folgen);
Unter 'Import Git repository' Repository auswählen, ggf. GitHub-App konfigurieren;
In GitHub unter Settings → Applications → Repository access Repository freigeben;
Zurück zu Vercel, Repository auswählen und 'Import' klicken;
Projektname eingeben und 'Deploy' klicken;
Bereitstellungsprozess überwachen, ggf. Fehler beheben (Cursor nutzen);
Nach erfolgreicher Bereitstellung zur Konsole navigieren;

5) Domain binden, DNS einrichten, HTTPS-Zertifikat generieren

Domain hinzufügen: 'Settings' → 'Domains' → 'ADD Domain';
Domain eingeben (z.B. 'pixtoolkits.com'), 'www'-Version aktivieren;
Warnung wegen fehlendem SSL-Zertifikat – Cloudflare-Einstellungen vornehmen;
Cloudflare registrieren, unter 'Account Home' → 'Onboard a domain';
Domain eingeben, manuelle DNS-Einstellungen wählen, Nameserver-Adressen notieren;
Zurück zu namesilo, Nameserver eintragen (überschüssige entfernen);
In Cloudflare erscheint nach kurzer Zeit 'active' bei der Domain;
In Vercel die bereitgestellte IP-Adresse kopieren und in Cloudflare eintragen;
In Cloudflare unter 'DNS' → 'Records' die IP eintragen;
Fertige Konfiguration;
In Vercel verschwindet die Warnung, SSL-Zertifikat wird generiert;
In Cloudflare SSL/TLS-Modus auf 'FULL (Strict)' setzen;

6) Domain im Browser öffnen und aufrufen

Fertig! Domain (z.B. pixtoolkits.com) im Browser eingeben;
Weitere Updates werden automatisch über GitHub gepusht und die Website aktualisiert sich in Echtzeit.

Cursor-Praxisprojekt-16: Schnelle Entwicklung eines Social-Media-Bildertools mit Cursor – Vollständiger Leitfaden von der Idee bis zur Veröffentlichung (Teil 4) — Domain-Kauf+GitHub+Vercel+Cloudflare→Online-Veröffentlichung der Website

Projektbeschreibung

Ergebnispräsentation

Vorbereitung

Warum dieses Modell?

Gesamtprozess

Detaillierte Projektsschritte

1) Domain-Registrierung

2) GitHub-Repository erstellen

3) Code in Cursor bearbeiten, mit GitHub verbinden und pushen

4) Vercel registrieren, Projekt initialisieren und GitHub-Repository verbinden

5) Domain binden, DNS einrichten, HTTPS-Zertifikat generieren

6) Domain im Browser öffnen und aufrufen

Serie