Website mit Cloudflare Workers hosten

Diese Anleitung beschreibt, wie du eine einfache statische Website
(HTML, CSS, JavaScript, Bilder usw.) mit Cloudflare Workers Static
Assets veröffentlichst. Du arbeitest lokal auf deinem Windows-PC und
deployest mit Wrangler über die Kommandozeile.

Geeignet für: Portfolio-Websites, Landingpages, Vereinsseiten,
einfache Unternehmenswebsites und andere statische Seiten.

Nicht ausreichend für: klassische PHP-/WordPress-Websites,
Datenbanken oder Anwendungen, die dauerhaft einen eigenen
Serverprozess benötigen. Dafür brauchst du eine passende
Backend-Lösung, zum Beispiel Workers mit zusätzlichem Backend-Service
oder einen anderen Hosting-Anbieter.

Inhaltsverzeichnis

Wie das Hosting funktioniert
Voraussetzungen auf deinem PC
Cloudflare vorbereiten
Projekt lokal erstellen
Website lokal testen
Erstes Deployment
Eigene Domain verbinden
Website aktualisieren und Versionen
zurücksetzen
Umlaute, MIME-Typen und
HTTP-Header
Fehlerbehebung
Sicherheit und gute Praxis
Wichtige Befehle
Offizielle Dokumentation

1. Wie das Hosting funktioniert

Cloudflare Workers kann statische Dateien direkt ausliefern. Deine
HTML-, CSS-, JavaScript- und Bilddateien werden beim Deployment zu
Cloudflare hochgeladen und von dort ausgeliefert.

Der Ablauf:

Du erstellst und bearbeitest die Website auf deinem PC.
Wrangler lädt die Dateien aus deinem lokalen Projektordner zu
Cloudflare hoch.
Cloudflare stellt die Website über eine workers.dev-Adresse
bereit.
Optional verbindest du eine eigene Domain.

Wichtig: Bei dieser Variante läuft kein eigener PC oder Heimserver
dauerhaft. Die Website wird über die Infrastruktur von Cloudflare
ausgeliefert.

2. Voraussetzungen auf deinem PC

2.1 Node.js installieren

Wrangler benötigt Node.js und npm.

Öffne https://nodejs.org.
Lade die aktuelle LTS-Version herunter.
Installiere Node.js mit den Standard-Einstellungen.
Öffne PowerShell oder das Windows-Terminal.

Prüfe die Installation:

node --version
npm --version

Beide Befehle sollten eine Versionsnummer ausgeben. Falls nicht,
schließe das Terminal und öffne es erneut. Prüfe andernfalls, ob Node.js
korrekt installiert und im PATH eingetragen ist.

2.2 Editor installieren

Empfohlen ist Visual Studio Code. Du
kannst aber auch einen anderen Texteditor verwenden.

3. Cloudflare vorbereiten

Öffne https://dash.cloudflare.com.
Melde dich bei deinem Cloudflare-Konto an.
Falls du noch keine Domain hast, kannst du zunächst ohne eigene
Domain deployen. Eine workers.dev-Adresse reicht zum Testen.

Du musst Wrangler nicht manuell mit einem API-Token konfigurieren. Beim
ersten interaktiven Deployment kann Wrangler die Anmeldung über den
Browser durchführen.

4. Projekt lokal erstellen

4.1 Projektordner anlegen

Öffne PowerShell und führe die folgenden Befehle aus. Passe den Pfad an
deinen Windows-Benutzernamen und gewünschten Speicherort an.

mkdir "$HOME\Projekte\meine-website"
cd "$HOME\Projekte\meine-website"
mkdir public

Die Ordnerstruktur soll anschließend so aussehen:

meine-website/
├── public/
│   ├── index.html
│   └── style.css
└── wrangler.jsonc

4.2 HTML-Datei erstellen

Erstelle public/index.html:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Eine kurze Beschreibung deiner Website.">
  <title>Meine Website</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <main>
    <h1>Willkommen auf meiner Website</h1>
    <p>Hier sind Umlaute: ä, ö, ü, Ä, Ö, Ü und ß.</p>
    <p>Und ein typografisches Apostroph: ’</p>
  </main>
</body>
</html>

4.3 CSS-Datei erstellen

Erstelle public/style.css:

* {
  box-sizing: border-box;
}
 
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  line-height: 1.6;
  color: #222;
  background: #fff;
}
 
h1 {
  color: #333;
}

4.4 Wrangler-Konfiguration erstellen

Erstelle im Hauptordner wrangler.jsonc:

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "meine-website",
  "compatibility_date": "2026-11-11",
  "assets": {
    "directory": "./public"
  }
}

Erklärung:

name: Eindeutiger Name deines Workers. Er wird unter anderem für
die workers.dev-Adresse verwendet.
compatibility_date: Legt das Verhalten der Workers-Laufzeit fest.
Verwende für neue Projekte ein aktuelles Datum und aktualisiere es
bewusst, wenn du später Änderungen an der Laufzeit übernehmen
möchtest.
assets.directory: Ordner, dessen Dateien Cloudflare als statische
Website ausliefert.

Die Datei heißt bewusst wrangler.jsonc: Das Format erlaubt Kommentare
und ist damit etwas flexibler als reines JSON.

5. Website lokal testen

Wechsle im Terminal in den Projektordner und starte:

npx wrangler dev

Wrangler startet einen lokalen Entwicklungsserver und zeigt dir eine
lokale URL an, normalerweise eine Adresse auf localhost.

Öffne die angezeigte URL im Browser.
Prüfe, ob die HTML-Seite geladen wird.
Prüfe, ob CSS und Bilder funktionieren.
Beende den Entwicklungsserver mit Ctrl + C.

Wenn Wrangler beim ersten Start noch nicht installiert ist, lädt npx
das benötigte Paket herunter. Für ein dauerhaft gepflegtes Projekt
kannst du Wrangler auch lokal als Entwicklungsabhängigkeit installieren:

npm install --save-dev wrangler

Danach kannst du weiterhin npx wrangler ... verwenden.

6. Erstes Deployment

6.1 Website veröffentlichen

Führe im Hauptordner des Projekts aus:

npx wrangler deploy

Beim ersten Deployment kann Wrangler:

den Browser zur Cloudflare-Anmeldung öffnen,
dich bitten, den Zugriff zu autorisieren,
anschließend den Worker und die statischen Dateien hochladen.

Bestätige die Autorisierung nur, wenn du dich auf der echten
Cloudflare-Seite befindest.

6.2 Website aufrufen

Nach erfolgreichem Deployment zeigt Wrangler eine Adresse ähnlich dieser
an:

https://meine-website.<dein-subdomain>.workers.dev

Öffne diese URL im Browser. Deine Website sollte jetzt öffentlich
erreichbar sein.

Hinweis: Der genaue Hostname hängt von deinem Cloudflare-Konto und
dem Worker-Namen ab.

7. Eigene Domain verbinden

Eine eigene Domain ist optional. Du kannst die Website auch dauerhaft
über workers.dev betreiben.

7.1 Domain zu Cloudflare hinzufügen

Falls deine Domain noch nicht bei Cloudflare verwaltet wird:

Öffne Cloudflare — Websites.
Wähle Add a site beziehungsweise Onboard a domain.
Gib deine Domain ein, zum Beispiel meine-seite.de.
Wähle den gewünschten Tarif. Für viele einfache Websites reicht der
Free-Tarif.
Cloudflare zeigt dir die zugewiesenen Nameserver an.
Melde dich bei deinem Domain-Registrar an, also dort, wo du die
Domain gekauft hast.
Ersetze dort die bisherigen Nameserver durch die von Cloudflare
angegebenen.
Warte, bis Cloudflare die Domain als aktiv anzeigt.

Die Aktivierung kann je nach Registrar und DNS-Propagation
unterschiedlich lange dauern.

Achtung bei bestehenden E-Mail-Adressen: Wenn du die Nameserver
umstellst, muss die DNS-Konfiguration vollständig zu Cloudflare
übernommen werden. Prüfe insbesondere MX-, SPF-, DKIM- und
DMARC-Einträge, wenn du E-Mail-Adressen mit dieser Domain verwendest.
Fehlende Einträge können den E-Mail-Empfang oder -Versand stören.

7.2 Domain mit dem Worker verbinden

Öffne das Cloudflare-Dashboard.
Gehe zu Workers & Pages.
Wähle deinen Worker, zum Beispiel meine-website.
Öffne Settings → Domains & Routes.
Wähle Add → Custom Domain.
Gib die gewünschte Domain ein, zum Beispiel meine-seite.de.
Bestätige die Einrichtung.

Cloudflare richtet bei einer unterstützten Custom-Domain-Konfiguration
die benötigte DNS-Verbindung und das TLS-Zertifikat ein.

7.3 www-Version ebenfalls einrichten

Wenn deine Website sowohl unter meine-seite.de als auch unter
www.meine-seite.de erreichbar sein soll, musst du beide Hostnamen
berücksichtigen.

Füge den zweiten Hostnamen als weitere Custom Domain hinzu, sofern du
beide direkt über denselben Worker ausliefern möchtest. Alternativ
kannst du eine Variante auf die andere weiterleiten. Entscheide dich für
eine bevorzugte Hauptadresse und vermeide zwei unabhängig gepflegte
Versionen derselben Website.

8. Website aktualisieren und Versionen zurücksetzen

8.1 Änderungen veröffentlichen

Der normale Arbeitsablauf:

Dateien in public/ bearbeiten.
Lokal mit npx wrangler dev testen.
Änderungen speichern.
Neu deployen:

npx wrangler deploy

Das neue Deployment wird standardmäßig direkt aktiv.

8.2 Vorherige Version wiederherstellen

Wenn ein Deployment fehlerhaft ist, kannst du auf eine frühere Version
zurückgehen:

npx wrangler rollback

Ohne Versions-ID bietet Wrangler standardmäßig die vorherige Version als
Ziel an beziehungsweise verwendet sie gemäß dem interaktiven Ablauf.

Für eine bestimmte Version:

npx wrangler deployments list
npx wrangler rollback <VERSION_ID>

Alternativ kannst du im Dashboard unter Workers & Pages → Worker →
Deployments eine frühere Version auswählen und zurückrollen.

Wichtig: Ein Rollback erstellt ein neues Deployment mit dem Inhalt
einer älteren Version. Es löscht nicht deine lokalen Dateien und macht
Änderungen an externen Ressourcen oder Datenbanken nicht automatisch
rückgängig.

9. Umlaute, MIME-Typen und HTTP-Header

9.1 Umlaute korrekt darstellen

Damit Zeichen wie ä, ö, ü, ß oder ’ korrekt angezeigt werden:

In HTML muss <meta charset="UTF-8"> im head stehen.
Speichere HTML-, CSS- und JavaScript-Dateien als UTF-8.
Verwende nach Möglichkeit einen Editor, der die Dateikodierung
anzeigt.

Cloudflare/Wrangler erkennt den passenden MIME-Typ normalerweise anhand
der Dateiendung. Für eine normale HTML-Datei ist daher in der Regel
keine zusätzliche Content-Type-Konfiguration nötig.

9.2 Eigene HTTP-Header setzen

Wenn du zusätzliche Header setzen möchtest, verwende bei statischen
Assets eine Datei namens _headers ohne Dateiendung direkt im
Asset-Ordner:

meine-website/
├── public/
│   ├── index.html
│   ├── style.css
│   └── _headers
└── wrangler.jsonc

Beispiel für public/_headers:

/*
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  X-Frame-Options: DENY

Diese Header werden auf passende statische Asset-Antworten angewendet.
Sie sind für eine einfache statische Website meist nicht zwingend
erforderlich, können aber die Sicherheit verbessern.

Nicht verwenden: Ein frei erfundenes headers-Feld in
wrangler.jsonc ist nicht der vorgesehene Weg, um Header für statische
Assets zu konfigurieren. Verwende dafür _headers.

10. Fehlerbehebung

`node` oder `npm` wird nicht erkannt

Prüfe, ob Node.js installiert ist.
Schließe PowerShell und öffne sie erneut.
Prüfe den PATH.
Installiere Node.js bei Bedarf erneut.

Wrangler kann nicht authentifizieren

Prüfe deine Internetverbindung.
Öffne das Browserfenster, das Wrangler startet.
Melde dich im richtigen Cloudflare-Konto an.
Prüfe, ob du die Autorisierung abgeschlossen hast.

`workers.dev`-Adresse funktioniert nicht

Prüfe, ob das Deployment erfolgreich abgeschlossen wurde.
Kontrolliere den Worker-Namen im Dashboard.
Prüfe, ob workers.dev für dein Konto aktiviert ist.
Warte kurz und lade die Seite erneut.

CSS oder Bilder werden nicht geladen

Prüfe, ob die Dateien tatsächlich im Ordner public/ liegen.
Prüfe die Pfade in deinem HTML.
Bei Dateien direkt in public/ ist beispielsweise /style.css ein
passender Pfad.
Achte auf Groß- und Kleinschreibung in Dateinamen und Pfaden.

Eigene Domain ist nicht erreichbar

Prüfe im Cloudflare-Dashboard, ob die Domain aktiv ist.
Kontrolliere, ob der Hostname als Custom Domain beim richtigen
Worker eingetragen ist.
Prüfe die DNS-Einträge und warte auf die DNS-Propagation.
Prüfe, ob ein Registrar noch alte Nameserver verwendet.

PowerShell findet den Projektordner nicht

Prüfe den tatsächlichen Pfad und wechsle mit cd in den Ordner, in dem
wrangler.jsonc liegt. npx wrangler deploy sollte aus dem
Projektordner ausgeführt werden.

11. Sicherheit und gute Praxis

Keine Passwörter, API-Tokens oder privaten Schlüssel in public/
speichern. Alles in diesem Ordner wird als Website-Datei
veröffentlicht.
Lege keine .env-Dateien, Backups oder privaten Dokumente in den
öffentlichen Asset-Ordner.
Nutze Git, um Änderungen nachvollziehbar zu speichern.
Teste Änderungen lokal, bevor du sie veröffentlichst.
Verwende aussagekräftige Dateinamen und eine klare Ordnerstruktur.
Halte Node.js und Wrangler aktuell.
Prüfe bei einer produktiven Website regelmäßig Links, Formulare,
mobile Darstellung und Ladezeiten.
Ein statisches Frontend kann keine geheimen Zugangsdaten sicher
verbergen. Wenn du ein Formular oder Login mit privaten Daten
benötigst, brauchst du ein Backend und eine geeignete Speicherung.

Beispiel für eine erweiterte Projektstruktur

meine-website/
├── public/
│   ├── index.html
│   ├── style.css
│   ├── images/
│   └── _headers
├── wrangler.jsonc
├── package.json
└── .gitignore

Wenn du npm install --save-dev wrangler ausführst, entstehen
package.json und normalerweise package-lock.json. Diese Dateien
gehören in den Projekt-Hauptordner, nicht in public/.

12. Wichtige Befehle

Befehl Bedeutung

node --version Installierte Node.js-Version anzeigen
npm --version Installierte npm-Version anzeigen
npx wrangler --version Wrangler-Version anzeigen
npx wrangler dev Website lokal testen
npx wrangler deploy Website veröffentlichen
npx wrangler deployments list Letzte Deployments anzeigen
npx wrangler rollback Auf eine vorherige Version zurückgehen

13. Offizielle Dokumentation

Fertig: Wenn du die Schritte der Reihe nach ausführst, kannst du
eine einfache statische Website lokal entwickeln, mit Wrangler deployen
und optional über deine eigene Domain erreichbar machen.

Quartz 5

Explorer

cloudflare_website_hosting_guide