So hostest Du 2026 kostenlos eine statische Website: GitHub Pages, Cloudflare Pages & Kontaktformulare

Die Wahl der richtigen Plattform für das Hosting statischer Websites kann dir mehrere Hundert Euro im Jahr sparen - und deine Seite dabei schnell, sicher und pflegeleicht halten. In 2026 sind die kostenlosen Angebote deutlich ausgereifter geworden: Plattformen wie GitHub Pages und Cloudflare Pages bieten produktionsreife Infrastruktur zum Nulltarif. Eine Herausforderung lassen die meisten Tutorials aber aus: Wie verarbeitest du Kontaktformulare auf einer statischen Website, wenn kein Server im Hintergrund läuft? Dieser Leitfaden führt dich durch den gesamten Einrichtungsprozess - von der Plattformwahl bis zum funktionierenden Kontaktformular, mit konkreten Beispielen und den echten Einschränkungen, die du kennen solltest, bevor du dich festlegst.

Warum kostenloses Static Hosting sich lohnt

Eine statische Website liefert fertig gebaute HTML-, CSS- und JavaScript-Dateien direkt an den Browser aus. Kein PHP, keine Node.js-Runtime, keine Datenbankabfrage bei jedem Seitenaufruf. Genau diese Schlichtheit macht kostenloses Hosting für statische Seiten so zuverlässig: Es gibt nichts, das abstürzen, gepatcht oder skaliert werden müsste.

Für kleine Unternehmen, Portfolios, SaaS-Landingpages und Dokumentationsseiten erfüllt Static Hosting alle Anforderungen:

• Geschwindigkeit: Dateien werden von einem CDN-Edge-Knoten ausgeliefert, oft in unter 100 ms weltweit.
• Sicherheit: Keine serverseitige Runtime bedeutet eine drastisch kleinere Angriffsfläche.
• Kosten: Sowohl GitHub Pages als auch Cloudflare Pages sind für öffentliche und viele private Projekte kostenlos.
• Einfachheit: Code ins Repository pushen - die Website wird automatisch deployt.

Die einzige echte Einschränkung ist dynamische Funktionalität. Alles, was serverseitige Logik erfordert - etwa Nutzerauthentifizierung, ein Warenkorb oder die Verarbeitung von Formularen - benötigt einen externen Dienst. Das solltest du im Hinterkopf behalten, während wir die Einrichtungsschritte durchgehen.

Plattformvergleich: GitHub Pages vs. Cloudflare Pages

Fazit: Wenn deine Zielgruppe global ist und du maximale Ladegeschwindigkeit willst, ist Cloudflare Pages die bessere Wahl. Wenn dein Team bereits in GitHub arbeitet und du die einfachste Einrichtung bevorzugst, ist GitHub Pages völlig ausreichend.

Schritt für Schritt: Deployment auf GitHub Pages

Dieses Beispiel setzt voraus, dass du eine einfache HTML/CSS-Website bereit zum Veröffentlichen hast. Wenn du einen Static-Site-Generator wie Hugo oder Jekyll verwendest, ist der Ablauf nahezu identisch.

1. GitHub-Repository anlegen. Gehe zu github.com/new und erstelle ein öffentliches Repository. Nenne es dein-username.github.io, wenn es unter der Root-Domain erreichbar sein soll, oder einen beliebigen Namen für einen Unterverzeichnispfad.
2. Website-Dateien pushen. Führe im lokalen Projektordner folgende Befehle aus:
   Kopieren

   git init
   git remote add origin https://github.com/dein-username/dein-repo.git
   git add .
   git commit -m "Initial deploy"
   git push -u origin main

3. GitHub Pages aktivieren. Gehe im Repository zu Einstellungen > Pages. Wähle unter "Quelle" den Branch main und den Ordner /root (oder /docs, wenn dein Build-Output dorthin geht). Klicke auf Speichern.
4. Auf das Deployment warten. GitHub baut und deployt die Seite innerhalb von 1-3 Minuten. Die Live-URL (z. B. https://dein-username.github.io) erscheint im Pages-Einstellungsbereich.
5. Eigene Domain verbinden (optional). Füge eine CNAME-Datei im Root deines Repositories hinzu, die deinen Domainnamen enthält (z. B. www.deineprojektseite.de). Aktualisiere anschließend bei deinem DNS-Anbieter einen CNAME-Eintrag, der auf dein-username.github.io zeigt. GitHub stellt das SSL-Zertifikat automatisch innerhalb weniger Minuten aus.

Schritt für Schritt: Deployment auf Cloudflare Pages

1. Bei Cloudflare registrieren oder einloggen. Besuche pages.cloudflare.com und verbinde dein GitHub- oder GitLab-Konto.
2. Neues Projekt anlegen. Klicke auf "Projekt erstellen" und dann auf "Mit Git verbinden". Wähle dein Repository aus der Liste aus.
3. Build-Einstellungen konfigurieren. Bei einer reinen HTML-Website lässt du den Build-Befehl leer und setzt das Ausgabeverzeichnis auf / oder den Ordner, in dem deine index.html liegt. Für Hugo setzt du den Build-Befehl auf hugo und das Ausgabeverzeichnis auf public. Für Jekyll verwendest du jekyll build und _site als Ausgabeverzeichnis.
4. Deployen. Klicke auf "Speichern und deployen". Cloudflare klont dein Repository, führt den Build aus und veröffentlicht die Seite im globalen Edge-Netzwerk. Deine Website erhält sofort eine *.pages.dev-Subdomain.
5. Eigene Domain hinzufügen. Gehe in deinem Projekt-Dashboard auf "Eigene Domains" und trage deine Domain ein. Wenn deine Domain bereits über Cloudflare DNS verwaltet wird, reicht ein Klick. Andernfalls musst du bei deinem Registrar einen CNAME-Eintrag anlegen, der auf deine *.pages.dev-Adresse zeigt.

Jeder weitere git push auf deinen Hauptbranch löst automatisch ein neues Deployment aus. Cloudflare erstellt außerdem Vorschau-Deployments für Pull Requests - praktisch, um Änderungen zu prüfen, bevor sie live gehen.

Kontaktformular auf der statischen Website einbinden

Hier hören die meisten Anleitungen auf - und hier scheitern die meisten Entwickler. Ein Kontaktformular auf einer statischen Website kann keine Daten an sich selbst senden, weil kein Server lauscht. Es gibt drei realistische Optionen:

• Ein Form-Backend-Dienst (empfohlen): Du richtest das action-Attribut deines Formulars auf einen Drittanbieter-Endpoint aus, der die Einsendung entgegennimmt, validiert und per E-Mail weiterleitet.
• Eine Serverless Function: Du schreibst eine kleine Funktion (Cloudflare Workers, AWS Lambda), die das Formular verarbeitet. Das funktioniert, erfordert aber Code und laufende Wartung.
• JavaScript fetch(): Du nutzt die Fetch API des Browsers, um Formulardaten an einen Backend-Endpoint zu senden. In unserem Artikel über das Senden von HTML-Formulardaten mit JavaScript fetch() findest du alle technischen Details.

Der schnellste Weg zu einem funktionierenden Formular ist ein dedizierter Formulardienst. Hier ist ein konkretes Beispiel mit Sendform:

Konkretes Beispiel: Ein funktionierendes Kontaktformular in 5 Minuten

Angenommen, du hast eine Portfolio-Website auf GitHub Pages deployt. Besucher sollen dir eine Nachricht schicken können, und diese Nachrichten sollen direkt in deinem Posteingang landen. Hier ist das vollständige HTML:

<form action="https://sendform.io/f/YOUR_FORM_ID" method="POST">
  <label for="name">Dein Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Deine E-Mail</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Nachricht</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Nachricht senden</button>
</form>

Das ist die gesamte Integration. Du ersetzt YOUR_FORM_ID durch die ID aus deinem Sendform-Dashboard, und jede Einsendung wird an die bei der Registrierung angegebene E-Mail-Adresse weitergeleitet. Kein Backend-Code, kein Server, keine monatliche Infrastrukturrechnung. Für fortgeschrittene UX-Muster - inklusive Weiterleitungsseiten nach dem Absenden und Bestätigungs-E-Mails - lies unseren Artikel über Best Practices für Formulare auf statischen Websites.

Wenn du neben deiner statischen Website auch einen Website-Builder verwendest, erklären wir den Integrationsprozess ausführlich in unserem Artikel darüber, wie du Sendform in deinen Website-Builder einbindest.

Typische Fehler und wie du sie vermeidest

Nach der Unterstützung tausender Nutzer beim Einrichten von kostenlosem Static-Web-Hosting sind das die Fehler, die am häufigsten für Frust sorgen:

1. Die 404-Seite vergessen

Sowohl GitHub Pages als auch Cloudflare Pages zeigen eine generische Fehlerseite, wenn eine Route nicht gefunden wird. Erstelle eine benutzerdefinierte 404.html-Datei in deinem Root-Verzeichnis. Das hält Nutzer auf deiner Website und schützt dein Markenerlebnis.

2. Geheimnisse in ein öffentliches Repository committen

API-Keys, Formular-Endpoint-Secrets und E-Mail-Adressen haben in einem öffentlichen GitHub-Repository nichts verloren. Verwende Umgebungsvariablen in Cloudflare Pages oder verweise auf eine private Konfigurationsdatei, die in .gitignore eingetragen ist.

3. Ein Formular ohne Backend-Plan bauen

Das ist der häufigste Fehler. Entwickler bauen ein ansprechendes Kontaktformular, pushen es auf GitHub Pages und stellen am Launch-Tag fest, dass das Formular stillschweigend versagt. Entscheide dich für ein Form-Backend, bevor du auch nur ein einziges <input>-Tag schreibst. Tools wie Sendform ermöglichen es dir, ein Kontaktformular einzurichten, das Einsendungen direkt per E-Mail sendet - ohne Code, was das Backend-Problem vollständig beseitigt.

4. Build-Cache-Probleme ignorieren

Wenn deine Website nach einem Push nicht aktualisiert wird, liefert der CDN-Cache möglicherweise veraltete Dateien aus. Cloudflare Pages leert seinen Cache automatisch bei jedem Deployment. GitHub Pages braucht länger, um Änderungen zu propagieren - warte bis zu 10 Minuten, oder hänge beim Testen einen Query-String an deine Asset-URLs an.

5. Relative Pfade falsch verwenden

Wenn deine GitHub-Pages-Website unter username.github.io/projektname/ (einem Unterverzeichnis) erreichbar ist, müssen alle Asset-Pfade dieses Präfix berücksichtigen. Ein Link zu /styles.css wird nicht funktionieren. Verwende relative Pfade (./styles.css) oder konfiguriere die baseURL-Einstellung deines Static-Site-Generators passend zum Unterverzeichnis.

6. Formular-Workflow-Automatisierung überspringen

Sobald dein Formular Einsendungen sammelt, kannst du weit mehr tun, als nur E-Mails zu empfangen. Sendform unterstützt Webhooks und Integrationen, mit denen du Einsendungen automatisch an Slack, ein CRM oder eine Tabellenkalkulation weiterleitest. Unser Leitfaden zur Automatisierung von Formular-Workflows mit Webhooks und APIs zeigt dir genau, wie du das ohne Backend-Code umsetzt.

Fazit

Kostenloses Hosting für statische Websites war noch nie so leistungsfähig wie heute. GitHub Pages eignet sich für Teams, die bereits tief im GitHub-Ökosystem verwurzelt sind, während Cloudflare Pages bessere globale Performance und einen großzügigeren kostenlosen Tarif bietet. Die eigentliche Herausforderung liegt nicht beim Hosting selbst - sondern bei dynamischen Funktionen, insbesondere Kontaktformularen. Wenn du eine der beiden Plattformen mit einem dedizierten Formulardienst kombinierst, bekommst du eine vollständig funktionale, professionelle Website ohne Infrastrukturkosten. Starte mit einer der obigen Plattformanleitungen, bring deine Website online und binde dann dein Kontaktformular über Sendform ein - für zuverlässige Einsendungen von Tag eins an.

Kontaktformular in Minuten zur statischen Website hinzufügen

Nutze Sendform, um Formulareinsendungen von jeder statischen Website zu sammeln, die auf GitHub Pages oder Cloudflare Pages gehostet wird. Kein Backend-Code, kein Server-Setup, kein Aufwand. Richte einfach das action-Attribut deines Formulars auf deinen Endpoint aus - fertig.

Jetzt kostenlos starten auf Sendform.net →

Häufig gestellte Fragen