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

Die richtige Plattform für das Hosting statischer Websites zu wählen kann dir mehrere Hundert Euro im Jahr sparen - und deine Seite bleibt dabei schnell, sicher und pflegeleicht. Die kostenlosen Angebote sind mittlerweile deutlich ausgereifter geworden: Plattformen wie GitHub Pages und Cloudflare Pages bieten produktionsreife Infrastruktur zum Nulltarif. Doch es gibt eine Herausforderung, die die meisten Tutorials übergehen: 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 wichtigsten Einschränkungen, die du kennen solltest, bevor du dich festlegst.

Warum kostenloses Static Hosting sich lohnt

Eine statische Website liefert vorab gerenderte HTML-, CSS- und JavaScript-Dateien direkt an den Browser aus. Kein PHP, keine Node.js-Laufzeitumgebung, keine Datenbankabfrage bei jedem Seitenaufruf. Genau diese Einfachheit macht kostenloses Hosting statischer 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 Laufzeitumgebung bedeutet eine drastisch kleinere Angriffsfläche.
• Kosten: Sowohl GitHub Pages als auch Cloudflare Pages sind kostenlos für öffentliche und viele private Projekte.
• Einfachheit: Code ins Repository pushen, und die Seite wird automatisch deployed.

Die einzige echte Einschränkung ist dynamische Funktionalität. Alles, was serverseitige Logik erfordert - etwa Nutzerauthentifizierung, ein Warenkorb oder die Formularverarbeitung - benötigt einen externen Dienst. Behalte das im Hinterkopf, während wir die Einrichtungsschritte durchgehen.

Plattformvergleich: GitHub Pages vs. Cloudflare Pages

Fazit: Wenn deine Zielgruppe global ist und du die schnellstmöglichen Ladezeiten willst, ist Cloudflare Pages die bessere Wahl. Wenn dein Team bereits in GitHub zuhause ist und du die einfachste Einrichtung bevorzugst, ist GitHub Pages absolut ausreichend.

Schritt für Schritt: Deployment auf GitHub Pages

Dieses Beispiel geht davon aus, dass du eine einfache HTML/CSS-Seite bereit zum Veröffentlichen hast. Wenn du einen Static-Site-Generator wie Hugo oder Jekyll verwendest, ist der Prozess nahezu identisch.

1. GitHub-Repository erstellen. Gehe zu github.com/new und erstelle ein öffentliches Repository. Benenne es your-username.github.io, wenn es unter der Root-Domain erreichbar sein soll, oder wähle einen beliebigen Namen für einen Unterverzeichnispfad.
2. Website-Dateien pushen. Führe aus deinem lokalen Projektordner heraus folgenden Befehl aus:

   git init
   git remote add origin https://github.com/your-username/your-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, falls dein Build-Output dort liegt). Klicke auf Speichern.
4. Deployment abwarten. GitHub baut und deployed die Seite innerhalb von 1-3 Minuten. Die Live-URL (z. B. https://your-username.github.io) erscheint dann 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.yoursite.com). Aktualisiere anschließend bei deinem DNS-Anbieter einen CNAME-Eintrag, der auf your-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 deinen GitHub- oder GitLab-Account.
2. Neues Projekt erstellen. 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-Seite lasse den Build-Befehl leer und setze das Ausgabeverzeichnis auf / oder den Ordner, in dem deine index.html liegt. Für Hugo setze den Build-Befehl auf hugo und das Ausgabeverzeichnis auf public. Für Jekyll verwende jekyll build und das Ausgabeverzeichnis _site.
4. Deployment starten. Klicke auf "Speichern und deployen". Cloudflare klont dein Repository, führt den Build aus und veröffentlicht die Seite im globalen Edge-Netzwerk. Deine Seite erhält sofort eine *.pages.dev-Subdomain.
5. Eigene Domain hinzufügen. Gehe in deinem Projekt-Dashboard zu "Eigene Domains" und trage deine Domain ein. Wenn deine Domain bereits über Cloudflare DNS verwaltet wird, ist die Einrichtung mit einem Klick erledigt. Andernfalls musst du bei deinem Registrar einen CNAME-Eintrag anlegen, der auf deine *.pages.dev-Adresse zeigt.

Jeder weitere git push in deinen Hauptbranch löst ein automatisches Redeployment aus. Cloudflare erstellt außerdem Vorschau-Deployments für Pull Requests, was praktisch ist, um Änderungen vor der Veröffentlichung zu prüfen.

Kontaktformular zur statischen Website hinzufügen

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 übermitteln, denn es läuft kein Server im Hintergrund. Es gibt drei realistische Optionen:

• Ein Form-Backend-Dienst (empfohlen): Du verweist das action-Attribut deines Formulars auf einen Drittanbieter-Endpoint, der die Einsendung empfängt, validiert und per E-Mail an dich 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 verwendest die Fetch API des Browsers, um Formulardaten an einen Backend-Endpoint zu senden. Technische Details dazu findest du in unserem Leitfaden zu HTML-Formulardaten mit JavaScript fetch() senden.

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

Bevor du Code zu deiner Seite hinzufügst, musst du ein Sendform-Konto einrichten und einen Formular-Endpoint erstellen. Der Vorgang dauert etwa zwei Minuten:

1. Bei Sendform.net registrieren. Erstelle ein kostenloses Konto - keine Kreditkarte erforderlich. Nach der Registrierung steht dir sofort ein Standardprojekt zur Verfügung.
2. Formular anlegen. Klicke in deinem Dashboard auf "Neues Formular". Vergib einen Namen, wähle ein Projekt und trage die E-Mail-Adresse ein, an die du Einsendungen erhalten möchtest. Sendform verifiziert diese Adresse, bevor der Endpoint aktiviert wird.
3. Endpoint-URL kopieren. Nach dem Erstellen des Formulars siehst du eine eindeutige Endpoint-URL im Format https://sendform.net/!your-form-id. Kopiere sie - diese trägst du in dein HTML ein.

Mit deiner Endpoint-URL fügst du folgenden HTML-Code zu deiner statischen Website hinzu:

<form action="https://sendform.net/!your-form-id" method="POST">
  <label for="name">Your Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Your Email</label>
  <input type="email" id="email" name="email" required>

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

  <button type="submit">Send Message</button>
</form>

Ersetze your-form-id durch die ID aus deinem Sendform-Dashboard. Jede Einsendung wird dann an die E-Mail-Adresse weitergeleitet, die du bei der Einrichtung bestätigt hast. Kein Backend-Code, kein Server, keine monatlichen Infrastrukturkosten. Für fortgeschrittenere UX-Muster - darunter Weiterleitungsseiten nach dem Absenden und Bestätigungs-E-Mails - lies unseren Leitfaden zu Best Practices für Formulare auf statischen Websites.

Wenn du neben deiner statischen Website auch einen Website-Builder einsetzt, erklären wir den Integrationsprozess ausführlich in unserem Artikel dazu, wie du Sendform mit deinem Website-Builder integrierst.

Häufige Fehler und wie du sie vermeidest

Nach der Unterstützung tausender Nutzer beim Einrichten von kostenlosem Static-Website-Hosting zeigen sich immer wieder dieselben Fehler, die am meisten Frust verursachen:

1. Die 404-Seite vergessen

Sowohl GitHub Pages als auch Cloudflare Pages zeigen eine generische Fehlerseite, wenn eine Route nicht gefunden wird. Erstelle eine eigene 404.html-Datei in deinem Root-Verzeichnis. Das hält Besucher auf deiner Seite und schützt deren Nutzererlebnis.

2. Geheimnisse in ein öffentliches Repository committen

API-Keys, Formular-Endpoint-Secrets und E-Mail-Adressen haben in einem öffentlichen GitHub-Repository nichts zu suchen. 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 zu GitHub Pages und stellen am Launch-Tag fest, dass das Formular still und leise fehlschlägt. 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 jeglichen Code, und eliminieren damit das Backend-Problem vollständig.

4. Build-Cache-Probleme ignorieren

Wenn sich deine Seite nach einem Push nicht aktualisiert, könnte der CDN-Cache noch veraltete Dateien ausliefern. Cloudflare Pages leert seinen Cache automatisch bei jedem Deployment. GitHub Pages propagiert Änderungen langsamer; 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-Seite unter username.github.io/project-name/ (einem Unterverzeichnis) liegt, 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 entsprechend dem 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 weiterleiten kannst. 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 fest 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 im Hosting selbst - sondern in den dynamischen Funktionen, allen voran Kontaktformulare, an denen viele scheitern. Wenn du eine der beiden Plattformen mit einem dedizierten Formulardienst kombinierst, erhältst du eine vollständig funktionale, professionelle Website ohne Infrastrukturkosten. Starte mit einer der Plattformanleitungen oben, bringe deine Seite online, und binde anschließend dein Kontaktformular mit Sendform ein - für zuverlässige Formulareinsendungen vom ersten Tag an.

Kontaktformular zur statischen Website in Minuten hinzufügen

Nutze Sendform, um Formulareinsendungen von jeder statischen Website zu empfangen - egal ob auf GitHub Pages oder Cloudflare Pages gehostet. Kein Backend-Code, keine Servereinrichtung, kein Aufwand. Trage einfach deinen Endpoint in das action-Attribut deines Formulars ein - fertig.

Kostenlos starten auf Sendform.net →

Häufig gestellte Fragen