Werkstatt
An welchem Rechner sitzt du? Wähl hier aus, dann zeigt dir die Seite nur die Schritte, die zu deinem Rechner passen.
KI Build Workshop · Deine große Netz-Karte

Ins Netz mit Cloudflare, alle Wege

THE COI

Diese Seite ist für alle. Du musst nichts davon vorher können, kein Terminal, kein Fachwort. Alles, was du brauchst, steht hier so genau, dass du es beim ersten Mal schaffst. Jede Sektion funktioniert für sich allein, du kannst also auch mittendrin einsteigen.

Es klemmt gerade? Spring direkt zur Rettungstabelle ↓
Was hier passiert, in drei Sätzen: Cloudflare ist der Dienst, der dein Tool ins Internet stellt, kostenlos. Veröffentlichen heißt nur: deine Datei dort hochbringen. Es gibt dafür drei Wege, alle führen zur gleichen Adresse, nimm den, der zu dir passt.
Die drei Wege im Überblick: Weg A, der eine Satz an Claude (unsere Empfehlung) · Weg B, von Hand im Dashboard, ohne Terminal · Weg C, den Befehl selbst tippen
Immer zuerst, egal welcher Weg

Punkt a brauchst du immer. Punkt b nur, wenn du Weg B oder C gehst.

a

Ein kostenloses Cloudflare Konto

Tipp diese Adresse oben in die Adresszeile deines Browsers, nicht in ein Suchfeld, und klick Sign up (Registrieren). Du brauchst nur deine Mailadresse und ein Passwort. Danach schickt Cloudflare eine Bestätigungsmail, die landet oft im Spam Ordner, schau dort zuerst nach. Klick in der Mail auf den Bestätigungsknopf, erst dann ist dein Konto fertig.

Adresse für dein Kontodash.cloudflare.com

Fragt Cloudflare dich nach dem Anmelden, ob du eine Website oder Domain hinzufügen willst oder welchen Tarif du möchtest: alles überspringen, oft steht dafür Skip (Überspringen) da. Der kostenlose Free Tarif ist immer der richtige, du musst nirgends Zahlungsdaten angeben. Du brauchst nur das Konto selbst.

b

Nur für Weg B und C: Claude packt dir den Ordner

Damit beim Hochladen von Hand garantiert die richtige Datei im richtigen Ordner liegt, lass Claude alles vorbereiten. Kopier diesen Satz und schick ihn Claude, und zwar in der Claude App auf deinem Rechner, in genau der Unterhaltung, in der ihr dein Tool gebaut habt. In einer neuen Unterhaltung kennt Claude dein Tool nicht.

Satz an Claude, Ordner packenBereite mein Tool für das Hochladen von Hand vor: Lege in unserem Ordner einen Unterordner namens veroeffentlichen an. Lege dort die aktuelle, funktionierende Fassung meines Tools als index.html hinein, dazu alles, was das Tool zum Laufen braucht, aber keine Sicherungen, keine alten Fassungen und keine ZIP-Dateien. Prüfe am Ende, dass die index.html nicht leer ist, und öffne den Ordner veroeffentlichen danach in meinem Dateifenster.

Am Ende steht der Ordner veroeffentlichen offen in deinem Dateifenster. Genau diesen Ordner lädst du gleich hoch.

Weg A · Der eine Satz an ClaudeUnsere Empfehlung

Du sagst einen Satz, Claude erledigt alles. Für die allermeisten der beste Weg.

Wichtig, wohin mit dem Satz: Schick ihn in der Claude App auf deinem Rechner, nicht auf der Claude Internetseite. Und zwar in genau der Unterhaltung, in der ihr dein Tool gebaut habt, in einer neuen Unterhaltung kennt Claude dein Tool nicht. Füg den Satz unten ins Eingabefeld ein und drück Enter.
Der eine SatzStell mein Tool ins Netz und sag mir danach meine Internetadresse.

Das Ganze dauert beim ersten Mal einige Minuten. Claude schreibt zwischendurch, was es gerade tut, solange unten etwas arbeitet, ist alles gut. Und das passiert dann, Schritt für Schritt:

1

Claude fragt mehrmals um Erlaubnis

Das ist normal und gut so, Claude darf nichts ohne dich. Klick jedes Mal auf Erlauben (auf Englisch: Allow). Auch wenn Claude fragt, ob es via Wrangler veröffentlichen darf (was Wrangler ist, erklärt gleich Schritt 2): das ist ein Ja.

2

Beim allerersten Mal lädt Claude ein kleines Werkzeug nach

Es heißt Wrangler und ist der Bote, der deine Datei zu Cloudflare bringt. Das Nachladen dauert einen Moment, einfach warten. Dafür braucht dein Rechner das Grundprogramm Node. Was das ist und wie du es bekommst, steht im Node Kasten weiter unten ↓

Du musst vorher nichts prüfen und nichts installieren. Schick einfach den Satz. Nur wenn Claude meldet, dass Node fehlt, gehst du in den Node Kasten, installierst es, startest die Claude App neu und schickst den Satz nochmal.

3

Dein Browser öffnet sich von selbst mit einer englischen Seite

Du musst dabei nichts aussuchen, dein normaler Browser geht von allein auf. Dort steht Wrangler wants to access your account (Wrangler möchte auf dein Konto zugreifen). Klick den blauen Knopf Authorize (Autorisieren).

Voraussetzung: Du bist in diesem Browser bei Cloudflare eingeloggt.

Windows: Edge und Chrome sind beide in Ordnung, da musst du nichts ändern.

Mac: Nimm Chrome, nicht Safari. Safari blockiert den Rückweg der Anmeldung, das war im Workshop ein echter Fall.

Öffnet sich die Seite trotzdem in Safari? Nicht schlimm. Schau in der Claude App nach, dort steht dieselbe Anmeldeadresse als Link zum Kopieren. Kopier sie und füg sie in Chrome oben in die Adresszeile ein. Dauerhaft hilft: Chrome als Standardbrowser festlegen, Claude kann das für dich einstellen, sag einfach Mach Chrome zu meinem Standardbrowser.

Kein Chrome auf dem Rechner? Hol es dir kostenlos unter google.com/chrome, herunterladen, öffnen, fertig.

4

Die Seite "Authorization granted" erscheint

Authorization granted heißt: Zugriff erteilt. Auf dieser Seite musst du nichts klicken. Fenster schließen, zurück zur Claude App, dort läuft es weiter.

5

Claude nennt dir deine Adresse

Sie endet auf .pages.dev. Das ist deine echte Internetadresse, weltweit erreichbar. Der Handybeweis: Tipp die Adresse am Handy ein. Wenn dein Tool dort erscheint, ist es wirklich im Netz, für alle.

Dein Rettungssatz, merk ihn dir

Du kommst nicht weiter? Mach einen Screenshot und schick ihn Claude mit diesem Satz:

Ich komme nicht weiter, hier hänge ich, bitte hilf mir Schritt für Schritt.

Und wenn Claude etwas sagt, das du nicht verstehst:

Ich weiß nicht, wovon du sprichst. Zeig mir eine Anleitung Schritt für Schritt.
Der Node Kasten
Gehört zu Weg A und Weg C

Was ist Node? Ein stilles Grundprogramm, das Werkzeuge wie Wrangler antreibt, du siehst es nie und musst es nie öffnen.

Wann brauchst du es? Nur für Weg A und Weg C. Für Weg B, das Hochladen von Hand, brauchst du kein Node.

So installierst du es: Öffne diese Adresse im Browser:

Download Adressenodejs.org/en/download

Den schwarzen Code Kasten oben auf der Seite kannst du ignorieren, der ist für Profis. Scroll runter bis Or get a prebuilt Node.js (Oder hol dir ein fertig gebautes Node.js). Mac: Dort klickst du den grünen Knopf macOS Installer (.pkg).Windows: Dort klickst du den grünen Knopf Windows Installer (.msi). Die Datei landet in deinem Downloads Ordner. Öffne sie dort mit Doppelklick, dann startet der Installer. Den klickst du einfach durch, überall weiter und zustimmen. Der Mac fragt dabei nach deinem Anmeldepasswort, und beim Tippen erscheint nichts auf dem Bildschirm, das ist normal, einfach tippen und bestätigen. Am Ende erscheint die Meldung, dass die Installation erfolgreich war, dann darfst du das Fenster schließen.

Danach Pflicht: Die Claude App einmal ganz schließen und neu öffnen. Mac: Cmd und Q drücken, dann neu öffnen.Windows: Rechtsklick auf das Claude Symbol in der Leiste unten, dann Beenden. Nur das X oben rechts reicht nicht, die App läuft dann im Hintergrund weiter. Ohne diesen Neustart kennt die App das frische Node nicht.

Fehlerbild "node wird nicht erkannt": Das ist fast immer nur der fehlende Neustart. App ganz schließen, neu öffnen, nochmal probieren.

Der Browser Kasten
Gehört zu allen Wegen, denn Anmelden, Autorisieren und Hochladen passieren im Browser

Der Merksatz: Dein fertiges Tool ansehen darfst du in jedem Browser, da ist jeder gut. Fürs Arbeiten (bei Cloudflare anmelden, Autorisieren klicken, Ordner hochladen) nimm Chrome, damit läuft alles am zuverlässigsten.

Chrome, unsere Empfehlung: Kostenlos, und der einzige Browser, bei dem im Workshop alle drei Schritte ohne Zicken liefen. Hast du ihn noch nicht:

Download Adressegoogle.com/chrome

Herunterladen, öffnen, fertig. Und wenn du magst, richtet Claude ihn dir dauerhaft ein:

Satz an Claude in der AppMach Chrome zu meinem Standardbrowser.

Der Chrome Trumpf, die Claude Erweiterung: Für Chrome gibt es die offizielle Claude Erweiterung (im Chrome Web Store nach Claude suchen, Zu Chrome hinzufügen (Add to Chrome), dann mit deinem Claude Konto anmelden, dein bezahltes Abo reicht dafür). Damit kann Claude, wenn du es erlaubst, die Seite sehen, auf der du gerade bist, und dich dort Schritt für Schritt führen. Das ist Gold für die Cloudflare-Seite: Statt zu beschreiben, was du siehst, sagst du einfach:

Satz an Claude mit ErweiterungIch bin auf der Cloudflare-Seite und komme nicht weiter. Schau bitte mit drauf und führe mich Schritt für Schritt.

Gut zu wissen: Die Erweiterung ist freiwillig, du siehst jede ihrer Aktionen, und Claude fragt, bevor es klickt. Nutze sie auf Seiten, denen du vertraust (Cloudflare gehört dazu), und lass sie nie Passwörter für dich eintippen, das machst du selbst.

Safari (dein Mac Standard): Wunderbar zum Ansehen deines Tools. Aber beim Autorisieren scheitert Safari oft am Rücksprung zur App ("Safari kann die Seite nicht öffnen"), genau daran sind im Workshop Leute hängen geblieben. Öffnet sich Safari beim Anmelden von selbst: nicht schlimm, Adresse kopieren, in Chrome einfügen, dort weitermachen.

Edge (dein Windows Standard): Funktioniert für Anmelden und Hochladen meist ordentlich, du darfst ihn nutzen. Klemmt irgendwas, wechsle nicht lange, nimm Chrome.

Firefox und andere: Gehen oft, aber wenn etwas hakt, kämpfe nicht mit dem Browser. Der schnellste Weg ist immer: dieselbe Adresse in Chrome öffnen.

Weg B · Von Hand im Dashboard

Ohne Node, ohne Terminal, alles klickbar im Browser. Sechs Schritte, klickgenau.

Vorher einmal den Ordner von Claude packen lassen, der Satz steht oben unter Immer zuerst, Punkt b ↑

1

Anmelden

Öffne dash.cloudflare.com im Browser und melde dich mit Mail und Passwort an.

2

Links im Menü: Workers & Pages

Klick in der linken Leiste auf Workers & Pages (Arbeiter und Seiten).

Achtung, Übersetzungsfalle: In der deutschen Oberfläche heißt derselbe Punkt manchmal wörtlich Mitarbeiter und Seiten. Das ist er, genau da klicken.

Findest du ihn gar nicht: Tipp oben in die Suche Pages.

3

Create klicken und zu Pages wechseln

Klick auf den blauen Knopf Create (Erstellen), er sitzt meist oben rechts auf der Seite. Cloudflare bietet dir zuerst einen Worker an, das ist nicht deiner. Scroll runter bis zur Zeile Looking to deploy Pages? (Du willst Pages veröffentlichen?) und klick daneben auf Get started (Leg los). Danach wählst du Upload assets (Dateien hochladen).

Sieht deine Seite anders aus als beschrieben? Cloudflare baut die Oberfläche manchmal um. Such nach dem Wort Pages, dann bist du richtig.

4

Projektname vergeben

Der Name wird deine Adresse: dein-name.pages.dev. Erlaubt sind nur Kleinbuchstaben, keine Leerzeichen, der Bindestrich als Trennzeichen ist erlaubt. Auch keine Umlaute (ä, ö, ü) und kein ß, schreib kueche statt küche. Ist der Name schon vergeben, häng einfach eine Zahl an, aus mein-tool wird mein-tool-2.

5

Der wichtigste Handgriff der ganzen Seite

Ziehen, nicht klicken Den ganzen Ordner veroeffentlichen aus deinem offenen Dateifenster mit gedrückter Maustaste in das Upload Feld der Cloudflare Seite ziehen. Niemals den Auswahl-Knopf der Seite nutzen: Dessen Dateifenster filtert oft auf ZIP-Dateien und versteckt deine index.html. Genau daran sind im Workshop viele hängengeblieben.

Mac: Mach das Browserfenster vorher etwas kleiner, sodass du daneben dein Dateifenster siehst. Dann den Ordner mit gedrückter Maustaste rüberziehen.Windows: Klick einmal ins Dateifenster und drück die Windows Taste und Pfeil links, dann im Browser die Windows Taste und Pfeil rechts. So liegen beide Fenster nebeneinander und du kannst in Ruhe ziehen.

Hat das Ziehen geklappt, listet Cloudflare deine Dateien im Feld auf, darin muss deine index.html stehen. Erst wenn du sie siehst, geht es weiter mit Schritt 6.

6

Veröffentlichen und Link finden

Klick Deploy site (Seite veröffentlichen). Das dauert meist unter einer Minute, dabei dreht sich eine kleine Anzeige. Nichts nochmal klicken und die Seite nicht neu laden, einfach warten, bis die Meldung mit Success (Erfolg) erscheint. Dein Link steht danach direkt unter der Erfolgsmeldung und endet auf .pages.dev. Draufklicken, dein Tool ist live.

Der Handybeweis: Tipp die Adresse am Handy ein. Wenn dein Tool dort erscheint, ist es wirklich im Netz, für alle.

Dein Rettungssatz, merk ihn dir

Du kommst nicht weiter? Mach einen Screenshot und schick ihn Claude mit diesem Satz:

Ich komme nicht weiter, hier hänge ich, bitte hilf mir Schritt für Schritt.

Und wenn Claude etwas sagt, das du nicht verstehst:

Ich weiß nicht, wovon du sprichst. Zeig mir eine Anleitung Schritt für Schritt.
Weg C · Wrangler selbst tippen

Für alle, die es selbst in der Hand haben wollen. Ehrlich gesagt: Nimm diesen Weg nur, wenn sich das Terminal für dich nicht fremd anfühlt.

1

Terminal öffnen

Mac: cmd und Leertaste drücken, Terminal tippen, Enter.Windows: Startmenü öffnen, PowerShell tippen, Enter.

2

In den Ordner veroeffentlichen wechseln

cd tippen, ein Leerzeichen, dann den Ordner veroeffentlichen mit der Maus ins Terminalfenster ziehen, Enter.

In den Ordner wechseln, danach Ordner ins Fenster ziehencd
3

Der Befehl

Ersetz dein-name durch deinen Wunschnamen, nur Kleinbuchstaben ohne Leerzeichen.

Veröffentlichennpx wrangler pages deploy . --project-name dein-name

Beim ersten Mal öffnet sich der Browser für die Anmeldung, das ist derselbe Authorize Ablauf wie bei Weg A, Schritte 3 und 4. Dieser Weg braucht Node, siehe Node Kasten ↑

Änderungen später live stellen

Dein Tool ist schon im Netz und du hast etwas verbessert. So kommt die neue Fassung online, je nach Weg.

Nicht sicher, welchen Weg du beim ersten Mal genommen hast? Nimm einfach Weg A, der Satz funktioniert immer und die Adresse bleibt gleich.

A

Weg A: wieder nur ein Satz

Stell die neue Fassung meines Tools ins Netz, gleiche Adresse wie vorher.
B

Weg B: frisch packen, wieder ziehen

Erst Claude den Ordner frisch packen lassen, der Satz steht unter Immer zuerst, Punkt b ↑. Dann im Cloudflare Dashboard in dein Projekt gehen, Create deployment (Bereitstellung erstellen) klicken, den Ordner wieder ins Feld ziehen und Save and deploy (Speichern und veröffentlichen) klicken. Gleiche Adresse, neuer Inhalt.

C

Weg C: gleicher Befehl nochmal

Neue Version veröffentlichennpx wrangler pages deploy . --project-name dein-name
Eigene Adresse verbinden

Die Kür, für später. Dein Tool läuft auch ohne diesen Schritt komplett, unter der .pages.dev Adresse.

1

Eigene Domain oder Subdomain anhängen

Statt dein-name.pages.dev willst du deine eigene Adresse. Beides geht: eine Subdomain wie tool.deine-domain.de oder die nackte Domain wie deine-domain.de. Geh im Cloudflare Dashboard in dein Projekt, Reiter Custom domains (eigene Domains), dann Set up a custom domain (eigene Domain einrichten). Tipp bei Enter domain (Domain eingeben) deine Wunschadresse ein und klick Continue (Weiter).

Im Schritt Configure DNS (DNS einrichten) gilt: Liegt deine Domain schon bei Cloudflare, genügt ein Klick, den Rest macht Cloudflare selbst. Liegt sie bei einem anderen Anbieter, zeigt dir Cloudflare einen CNAME Eintrag, den du dort einmal einträgst. Nach ein paar Minuten ist deine Domain aktiv, das sichere Schloss (HTTPS) kommt automatisch dazu. Das funktioniert für alle drei Wege gleich, es bleibt dasselbe Projekt.

Wenn es klemmt: die Rettungstabelle

Alle echten Fälle aus dem Workshop. Such dein Problem in der linken Spalte, rechts steht die Lösung.

Du kommst nicht weiter, egal wobei
Das ist normal, jeder hängt mal, und Claude sieht auf einem Screenshot sofort, wo.
Screenshot machen, an Claude schicken, dazu dieser Satz:
Ich komme nicht weiter, hier hänge ich, bitte hilf mir Schritt für Schritt.
Problem
Woran es liegt
Was du tust
Weiße oder leere Seite nach dem Hochladen
Die index.html lag nicht direkt im Ordner oder war leer.
Claude den Ordner frisch packen lassen (Satz unter Immer zuerst ↑) und neu hochladen.
Das Auswahl-Fenster zeigt nur ZIP-Dateien
Der Auswahl-Knopf der Seite filtert auf ZIP und versteckt deine index.html.
Den Knopf gar nicht nutzen. Den Ordner mit gedrückter Maustaste ins Upload Feld ziehen.
Der Menüpunkt heißt "Mitarbeiter und Seiten"
Die deutsche Oberfläche übersetzt Workers & Pages wörtlich.
Genau da klicken, das ist der richtige Punkt.
Nur "Create Application" zu sehen, nirgends Pages
Cloudflare zeigt zuerst den Worker Weg an, deiner steht weiter unten.
Runterscrollen bis Looking to deploy Pages? und dort Get started klicken.
Safari zeigt nach Authorize eine Fehlerseite
Safari blockiert den Rückweg der Anmeldung zur App.
Chrome nutzen, dort bei Cloudflare einloggen, dann den Satz an Claude nochmal schicken. Kein Chrome auf dem Rechner? Hol es dir kostenlos unter google.com/chrome, herunterladen, öffnen, fertig.
Der Browser fragt nach einem Cloudflare Login
Du warst in diesem Browser noch nicht bei Cloudflare eingeloggt.
Erst einloggen, dann zurück zur Claude App und den Satz nochmal schicken.
"node" oder "npx" wird nicht erkannt
Die Claude App kennt das frisch installierte Node noch nicht.
App ganz schließen und neu öffnen. Hilft das nicht: Node Kasten ↑
Die Claude App reagiert nicht oder schließt sich sofort
Die App hängt und muss einmal sauber beendet werden.
Windows: Task-Manager öffnen (Strg, Umschalt und Esc), Claude beenden, neu starten.Mac: Cmd und Q drücken, dann neu öffnen. Notfalls die App von claude.ai/download einfach drüber installieren, dabei geht nichts verloren.
Der Projektname wird abgelehnt
Großbuchstaben, Leerzeichen, Umlaute oder ß im Namen, oder der Name ist schon vergeben.
Nur Kleinbuchstaben ohne Leerzeichen, keine Umlaute und kein ß (kueche statt küche). Ist der Name vergeben, Zahl anhängen.
Zwei index Dateien oder eine ZIP im Ordner
Der Ordner ist nicht sauber gepackt.
Claude packen lassen, mit dem Satz unter Immer zuerst ↑
Du findest deinen Werkstattordner nicht
Claude weiß, wo er liegt, und kann ihn dir öffnen.
Öffne den Ordner, in dem du gerade arbeitest, in meinem Dateifenster.
Erfolgsmeldung da, aber du findest den Link nicht
Der Link steht klein direkt unter der Meldung.
Direkt unter der Erfolgsmeldung schauen, die Adresse endet auf .pages.dev.
Link geklickt, aber Fehlerseite oder "Nothing is here yet"
Die Adresse braucht nach dem ersten Veröffentlichen ein paar Minuten.
Zwei bis fünf Minuten warten, dann die Seite neu laden. Es ist nichts kaputt.
Wozu dann noch GitHub?

Cloudflare zeigt dein Tool im Netz. GitHub sichert deine Werkstatt dauerhaft, mit Verlauf, wie ein Bankschließfach für deinen Code: Jede Fassung bleibt erhalten, nichts geht je verloren. Fürs Veröffentlichen brauchst du GitHub nicht, fürs sichere Weiterbauen ist es die Kür. Wie das geht, steht auf der GitHub Seite →

Zum Schluss, dein Rettungssatz

Du kommst nicht weiter? Mach einen Screenshot und schick ihn Claude mit diesem Satz:

Ich komme nicht weiter, hier hänge ich, bitte hilf mir Schritt für Schritt.

Und wenn Claude etwas sagt, das du nicht verstehst:

Ich weiß nicht, wovon du sprichst. Zeig mir eine Anleitung Schritt für Schritt.
Alle drei Wege führen zur gleichen Adresse. Der einfachste bleibt: sag es Claude.
← Zurück zur Landkarte