Ziel: Am Ende hast du eine echte Webseite im Internet – mit einem Lead-Formular, dessen Einträge live bei dir ankommen. Gebaut, hochgeladen und online gestellt zusammen mit Claude Code.
Dauer: ca. 90 Minuten · Vorwissen: keins nötig · Motto: Claude macht die Technik, du gibst die Richtung.
1. Accounts → 2. Verbinden → 3. Bauen → 4. Online stellen → 5. Lead-Formular
GitHub GitHub-Token Webseite Cloudflare Pages + dein Secret
Cloudflare an Claude mit Claude (deine Live-URL!) (Leads live sehen!)
Drei goldene Regeln für heute:
Auf deinem Rechner ist bereits installiert (von der IT vorbereitet):
Du brauchst außerdem:
Claude Code starten: Öffne das Terminal / die Eingabeaufforderung, tippe
claudeund drücke Enter. Du siehst eine Eingabezeile – hier sprichst du mit Claude. (Beenden:/exit.)
Erster Test – sag einfach Hallo. Tippe in Claude Code:
Hi! Ich mache gerade einen Workshop und baue gleich meine erste Webseite.
Erklär mir in 2 Sätzen, was du als Nächstes für mich tun kannst.
Wenn Claude antwortet: 🎉 Du bist startklar.
Was ist GitHub? Ein Online-Lager für Code (wie eine Dropbox für Projekte). Cloudflare holt sich später deine Webseite von dort.
vorname-medumio)✅ Geschafft, wenn du auf github.com eingeloggt bist und dein Profil siehst.
Was ist Cloudflare? Der Dienst, der deine Webseite ins Internet stellt (kostenlos, schnell). Wir nutzen davon Cloudflare Pages.
✅ Geschafft, wenn du das Cloudflare-Dashboard siehst.
💡 Du musst hier nichts weiter einrichten – wir kommen in Phase 5 zurück.
Damit Claude Code Code für dich hochladen darf, braucht es einen Zugangsschlüssel zu deinem GitHub – einen API-Token (= ein Passwort für Programme).
claude-code-workshoprepo und bei workflow setzenghp_…) – er wird nur einmal angezeigt!🔐 Merke: Ein Token ist wie ein Passwort. Niemals in eine E-Mail, einen Chat oder direkt in den Code schreiben. Heute behandeln wir ihn wie einen Hausschlüssel.
Tippe in Claude Code:
Ich möchte mich bei GitHub anmelden, damit du später meinen Code hochladen kannst.
Führe mich durch die GitHub-Anmeldung. Ich habe einen Personal Access Token bereit.
Mein GitHub-Benutzername ist: <DEIN-BENUTZERNAME>
Claude startet die Anmeldung (gh auth login) und sagt dir, wo du den Token einfügst.
Folge seinen Anweisungen.
✅ Geschafft, wenn Claude bestätigt: „Du bist bei GitHub angemeldet.“
Jetzt der schöne Teil. Beschreibe Claude deine Wunschseite. Je konkreter, desto besser. Nutze diese Vorlage und passe sie an dein Thema an:
Bau mir eine moderne, einseitige Landingpage als einzelne index.html-Datei
(mit eingebettetem CSS, ohne Build-Tools).
Thema: <z. B. "kostenloser 7-Tage-Energie-Guide" / dein eigenes Thema>
Stil: hochwertig, vertrauenswürdig, freundlich; eine klare Hauptfarbe.
Inhalt:
- Kopfzeile mit Logo-Text
- Hero-Bereich: starke Überschrift + kurzer Untertitel + Vertrauens-Hinweise
- rechts daneben eine Karte mit einem Lead-Formular (Vorname + E-Mail + Button)
- darunter 3 Vorteils-Kacheln
- schlichter Footer
Das Formular soll später per JavaScript an /api/lead gesendet werden.
Leg das Projekt in einem neuen Ordner "meine-webseite" an.
Claude legt den Ordner und die index.html an. Schau dir gern an, was er schreibt – du musst
es nicht verstehen, aber es ist spannend zu sehen.
Sofort ansehen – sag einfach:
Zeig mir die Seite in einer Vorschau im Browser.
Gefällt dir was nicht? Sag es in normaler Sprache:
Mach die Hauptfarbe wärmer (Richtung Orange) und die Überschrift mutiger.
Tausch die mittlere Vorteils-Kachel gegen das Thema "Schlaf".
✅ Geschafft, wenn dir deine Seite in der Vorschau gefällt.
Tippe:
Mach aus dem Ordner "meine-webseite" ein Git-Repository und lade es zu meinem GitHub hoch.
Erstelle dafür ein neues, öffentliches Repository namens "meine-webseite".
Claude erstellt das Repo und pusht den Code. Danach gibt er dir einen Link – öffne ihn, deine Dateien sind jetzt auf GitHub. ✅
Jetzt im Browser (Cloudflare-Dashboard):
meine-webseite → Begin setup/ (Schrägstrich – also das Hauptverzeichnis)Cloudflare baut jetzt ein paar Sekunden … und zeigt dir eine Live-URL an, z. B.
https://meine-webseite-xyz.pages.dev.
🥳 Großer Moment – das ist dein erstes Deployment. Schick den Link gern in den Workshop-Chat und schau dir die Seiten der anderen an.
✅ Geschafft, wenn deine Seite öffentlich unter einer .pages.dev-Adresse erreichbar ist.
Aktuell ist das Formular nur Deko. Jetzt bauen wir die Funktion dahinter – eine kleine Cloudflare-Funktion, die Einträge entgegennimmt. Und wir nutzen unseren ersten Secret.
Tippe in Claude Code:
Bau in mein Projekt "meine-webseite" eine Cloudflare Pages Function unter
functions/api/lead.js ein. Sie soll POST-Anfragen vom Formular annehmen (JSON mit name + email),
die E-Mail kurz prüfen und eine freundliche Erfolgsmeldung zurückgeben.
Wenn die Umgebungsvariable LEAD_WEBHOOK_URL gesetzt ist, soll die Funktion den Lead
zusätzlich als JSON an diese URL weiterleiten.
Stell sicher, dass das Formular in index.html den Eintrag per fetch an /api/lead schickt
und die Antwort als Erfolgs- oder Fehlermeldung anzeigt.
Danach committe alles und pushe es zu GitHub.
Sobald Claude gepusht hat, deployt Cloudflare automatisch neu (weil es mit dem Repo verbunden ist). Nach ~1 Minute ist die neue Version live.
Damit die Weiterleitung funktioniert, geben wir Cloudflare deine webhook.site-URL – als Secret, nicht im Code:
meine-webseiteLEAD_WEBHOOK_URL🔐 Das ist der Unterschied: Eine normale Variable ist sichtbar. Ein Secret ist verschlüsselt – perfekt für Tokens, Passwörter, private URLs.
…pages.dev)🏆 Du hast es geschafft: eigene Webseite, online gestellt, mit funktionierendem Lead-Formular und sicherem Secret. Das ist – im Kleinen – genau das Prinzip hinter jedem Medumio-Funnel.
Sag Claude einfach, was du willst:
Der wichtigste Trick: Kopiere die Fehlermeldung in Claude und schreib dazu:
Das ging schief – hier die Meldung: <Fehlermeldung einfügen>. Was bedeutet das und wie behebe ich es?
Häufige Fälle stehen im Dokument 04_Troubleshooting.md – oder ruf eine:n Helfer:in im Raum.
Du brauchst diese Links nochmal: