Nach 15 Minuten läuft deine eigene Website im Browser: kein Entwurf in einem Baukasten, sondern eine echte Datei. Kostenlos, mit Claude Free und GitHub Pages, beides ohne Kreditkarte. Die 15 Minuten sind Stufe 1, die 35 Minuten die ganze Anleitung. Am Ende liegt deine Seite unter einer öffentlichen Adresse, die du per WhatsApp oder LinkedIn weitergibst.
Du schreibst dabei keine Zeile Code. Du beschreibst, wie deine Seite aussehen soll, Claude schreibt die index.html, du speicherst sie und machst einen Doppelklick.
Was das kostet
| Baustein | Preis | Ehrliche Grenze |
|---|---|---|
| Claude Free | 0 USD, keine Kreditkarte | Kontingent, das sich in einem rollierenden Fenster von fünf Stunden zurücksetzt, eine feste Nachrichtenzahl nennt Anthropic nicht |
| GitHub-Konto | 0 USD, keine Kreditkarte | Pages nur für öffentliche Repositories im Free-Plan |
| GitHub Pages | 0 USD | 1 GB Seitengröße (harte Grenze), 100 GB Traffic pro Monat und 10 Builds pro Stunde (beides weiche Grenzen) |
Quellen: claude.com/pricing und die GitHub-Dokumentation zu Pages-Limits, beide abgerufen am 30. August 2026. Für eine einseitige Website sind diese Grenzen weit weg. Relevant ist nur das Claude-Kontingent: ist es erschöpft, wartest du bis zum nächsten Fünf-Stunden-Fenster. Deshalb reichen hier drei präzise Prompts.
Stufe 1: Anfänger, deine Seite läuft nach 15 Minuten
Was du brauchst
- Ein kostenloses Konto auf claude.ai, der Google-Login reicht
- Einen Browser, egal welchen
- Einen Texteditor: Notepad unter Windows, TextEdit auf dem Mac
Mehr nicht. Kein Terminal, keine Installation, kein Baukasten-Abo.
Schritt 1: Der Starter-Prompt
Melde dich bei claude.ai an, starte ein neues Gespräch und sende den Prompt unten. Ersetze vorher die Stellen in eckigen Klammern durch deine eigenen Angaben.
Warum genau diese Vorgaben? Eine Datei ohne externe Abhängigkeiten öffnet sich per Doppelklick und lässt sich später ohne Werkzeuge hochladen. Bindet Claude Schriften oder Bibliotheken von fremden Servern ein, brechen sie genau dann, wenn du die Seite jemandem zeigst.
Schritt 2: Als index.html speichern
Kopiere den kompletten Code aus Claudes Antwort. Er beginnt mit <!DOCTYPE html> und endet mit </html>.
- Windows: Notepad öffnen, einfügen, Datei, Speichern unter, bei “Dateityp” auf “Alle Dateien” umstellen, Dateiname
index.html, Codierung UTF-8. - Mac: TextEdit öffnen, und zwar zuerst im Menü Format auf “In reinen Text umwandeln” klicken. Ohne diesen Schritt speichert TextEdit formatierten Text, und der Browser zeigt dir hinterher deinen HTML-Code statt deiner Website. Dann einfügen und als
index.htmlsichern. Beim Sichern fragt TextEdit nach der Endung, hier “Use .html” wählen, nicht “Use .txt”.
Leg die Datei in einen eigenen Ordner, zum Beispiel meine-website auf dem Schreibtisch.
Schritt 3: Doppelklick
Doppelklick auf index.html. Deine Seite öffnet sich im Browser. Das ist dein erstes Ergebnis, und ab hier ist alles nur noch Verbessern.
Wenn stattdessen ein weißes Fenster erscheint oder du rohen Code siehst, ist fast immer die Datei falsch gespeichert. Der häufigste Fall: die Datei heißt in Wahrheit index.html.txt. In Windows blendest du unter “Ansicht” die Dateinamenerweiterungen ein, auf dem Mac klickst du die Datei im Finder mit rechts an, wählst “Informationen” und korrigierst die Endung unter “Name und Suffix”.
Stufe 2: Fortgeschritten, Inhalt und Gestaltung schärfen
Jetzt kommt der Teil, der aus einer generischen Vorlage deine Seite macht.
Abschnitte einzeln umschreiben lassen
Der Fehler, den fast alle machen: sie lassen Claude bei jeder Kleinigkeit die ganze Datei neu schreiben. Das kostet Kontingent und ändert jedes Mal etwas, das du gar nicht ändern wolltest. Besser: du gibst Claude nur den Abschnitt, um den es geht.
Den zurückgegebenen Block ersetzt du in deiner Datei gegen den alten. Genauso gehst du beim Hero, den Projekten und dem Kontakt vor.
Farben und Schriftgrößen
Für Gestaltungsänderungen reicht ein Satz, weil sie fast immer nur den style-Block betreffen: “Ändere in meiner Datei die Akzentfarbe von Dunkelblau auf ein warmes Terrakotta und mach die Fließtext-Schrift eine Stufe größer. Gib mir nur den style-Block zurück.”
Ein eigenes Foto einbinden
Leg dein Foto in denselben Ordner wie die index.html, benannt ohne Leerzeichen und Umlaute, zum Beispiel portrait.jpg. Dann sagst du Claude: “Bau im Hero-Abschnitt ein rundes Portraitfoto ein, Dateiname portrait.jpg, maximal 180 Pixel breit, mit alt-Text [Portrait von Vorname Nachname]. Gib mir nur den Hero-Abschnitt und die zugehörigen CSS-Regeln zurück.”
Auf dem Handy prüfen
Du brauchst kein Handy dafür. Zieh das Browserfenster so schmal wie ein Telefon. Bleibt alles lesbar und rutscht nichts seitlich aus dem Bild, passt es auch auf dem Handy. Bricht das Layout, beschreib es Claude genau so: “Wenn ich das Fenster auf Handybreite ziehe, laufen die drei Projektkarten seitlich aus dem Bild. Sie sollen untereinander stehen. Gib mir nur die betroffenen CSS-Regeln zurück.”
Die drei Fehler, die dir garantiert begegnen
- Das Bild wird nicht angezeigt. In neun von zehn Fällen stimmt der Dateiname nicht exakt:
Portrait.JPGist nichtportrait.jpg. Groß- und Kleinschreibung zählt, spätestens auf dem Server. - Umlaute erscheinen als Kästchen oder Fragezeichen. Dann fehlt
<meta charset="UTF-8">im head, oder dein Editor hat in einer anderen Codierung gespeichert. - Die Seite sieht aus wie roher Text. Die Datei ist nicht als reiner Text gespeichert, siehe TextEdit oben.
Kontakt ohne Server
Ein Kontaktformular braucht einen Server, der die Nachricht entgegennimmt. Den hast du nicht und brauchst ihn nicht. Ein mailto:-Link öffnet das E-Mail-Programm deiner Besucher mit deiner Adresse im Empfängerfeld: funktioniert überall, kostet nichts.
Stufe 3: Experte, veröffentlichen und den Link schärfen
Eine Datei auf deinem Schreibtisch kannst du niemandem schicken. Jetzt geht sie online, kostenlos, über GitHub Pages.
Konto und Repository anlegen
- Kostenloses Konto auf github.com anlegen.
- Ein neues Repository erstellen. Der Name muss exakt
benutzername.github.iolauten, mit deinem GitHub-Benutzernamen in Kleinbuchstaben. Enthält dein Benutzername Großbuchstaben, schreibst du sie im Repository-Namen klein. - Sichtbarkeit auf Public stellen und den Haken bei “Add a README file” setzen, damit das Repository nicht leer ist. Im Free-Plan funktioniert Pages laut GitHub-Dokumentation nur für öffentliche Repositories. Was öffentlich sichtbar wird, ist der Quelltext deiner Seite, also genau das, was jeder Besucher ohnehin sehen kann.
Dateien hochladen
Im Repository auf “Add file”, dann “Upload files”. Zieh deine index.html und dein Foto in das Fenster und bestätige mit “Commit changes”. Hast du den README-Haken vergessen, ist das Repository leer, und GitHub zeigt statt der Dateiliste einen Einrichtungsbildschirm: dort heißt derselbe Weg “uploading an existing file”. Mehr ist das nicht, du brauchst weder Git noch ein Programm auf deinem Rechner.
Pages aktivieren
Im Repository auf Settings, in der linken Seitenleiste auf Pages. Unter “Build and deployment” bei Source die Option Deploy from a branch wählen, im Zweig-Auswahlfeld deinen Hauptzweig nehmen, den Ordner auf / (root) lassen und auf Save klicken. Je nach Version sitzen die Felder etwas anders, die Bezeichnungen sind dieselben.
Nach wenigen Minuten ist deine Seite unter https://benutzername.github.io/ erreichbar. Der erste Aufruf kommt manchmal als 404 zurück, das legt sich mit dem ersten Build.
Damit der Link ordentlich aussieht
Wenn du die Adresse jetzt in WhatsApp oder LinkedIn einfügst, erscheint dort vermutlich nur die nackte URL. Das liegt daran, dass deiner Seite die Metadaten fehlen, aus denen Messenger und Netzwerke ihre Vorschau bauen.
Das Vorschaubild lädst du per Drag and Drop hoch. Prüfen: schick dir den Link selbst in einem Chat.
Brauchst du ein Impressum?
Hier die ehrliche Antwort, ohne Rechtsberatung: es kommt auf den Zweck an. Eine rein private Seite ohne geschäftliche Absicht wird anders behandelt als eine Seite, mit der du Aufträge suchst, Leistungen anbietest oder dich beruflich bewirbst. Sobald deine Seite auch nur mittelbar geschäftlichen Zwecken dient, gilt in Deutschland eine Anbieterkennzeichnungspflicht, und dazu kommt der Datenschutzhinweis, weil GitHub beim Aufruf deiner Seite technisch Daten verarbeitet.
Dazu kommt eine Grenze des Gastgebers: eine persönliche oder berufliche Profilseite ist unproblematisch, aber GitHub schreibt in denselben Pages-Limits, Pages sei nicht als kostenloser Webhoster für ein Geschäft oder einen Onlineshop gedacht.
Der pragmatische Weg: im Zweifel beides ergänzen. Ein kurzer Abschnitt mit Name, Anschrift und E-Mail plus ein knapper Datenschutzhinweis kosten zehn Minuten. Wenn Geld im Spiel ist, frag jemanden, der das beurteilen darf.
Häufige Fragen
Brauche ich HTML-Kenntnisse?
Nein. Du musst HTML nicht schreiben können, aber es hilft, es grob zu erkennen. Siehst du, dass ein Abschnitt zwischen <section> und </section> steht, kannst du Claude gezielt einzelne Teile geben statt jedes Mal die ganze Datei. Das lernst du beim Machen.
Ist GitHub Pages wirklich kostenlos?
Ja, für öffentliche Repositories im Free-Plan, ohne Kreditkarte. Laut GitHub-Dokumentation darf die veröffentlichte Seite 1 GB nicht überschreiten, das ist eine harte Grenze; 100 GB Traffic pro Monat und 10 Builds pro Stunde nennt GitHub ausdrücklich weiche Grenzen. Für eine persönliche Seite erreichst du davon nichts.
Brauche ich eine eigene Domain?
Nein. benutzername.github.io ist eine vollwertige öffentliche Adresse. Eine eigene Domain wie dein-name.de kannst du später bei jedem Anbieter dazubuchen und auf dieselbe Seite zeigen lassen, das kostet dann eine jährliche Gebühr beim Registrar. Preise nennen wir hier bewusst keine, weil sie sich pro Anbieter und Endung stark unterscheiden.
Wie ändere ich die Seite später?
Dieselbe index.html erneut über “Add file”, “Upload files” hochladen und bestätigen: GitHub ersetzt die alte Version, nach wenigen Minuten ist die neue online. Alternativ klickst du die Datei im Repository an und bearbeitest sie über das Stift-Symbol.
Kann Claude auch mehrere Unterseiten bauen?
Ja. Du sagst: “Bau mir zusätzlich eine Seite projekte.html im gleichen Design wie meine index.html, mit derselben Navigation, und ergänze in beiden Dateien einen Menüpunkt.” Wichtig: nenne das Design ausdrücklich als Vorgabe, sonst erfindet Claude für die zweite Seite ein neues.
Ist der erzeugte Code gut genug?
Für eine einseitige persönliche Website: ja, lesbar und ohne Abhängigkeiten. Für eine Anwendung mit Anmeldung, Datenbank und Zahlungen ist dieser Weg der falsche, dort brauchst du eine echte Entwicklungsumgebung.
Reicht der kostenlose Claude-Plan?
Für diese Anleitung ja. Anthropic nennt keine feste Nachrichtenzahl, sondern ein Kontingent, das sich in einem rollierenden Fenster von fünf Stunden zurücksetzt und von Modell und Länge der Nachrichten abhängt. Ist es erschöpft, wartest du bis zum nächsten Fenster. Genau deshalb arbeitet diese Anleitung mit Abschnitten statt ganzen Dateien.
Dein nächster Schritt
Wichtiger als die Seite selbst ist das Muster dahinter: genau beschreiben, was du willst, eine Änderung nach der anderen, und immer nur den Teil schicken, um den es geht. Das trägt weit über eine index.html hinaus.
Der schnellste Weg, es zu festigen, ist ein zweites Projekt mit demselben Werkzeug:
- Dein erstes Browser-Spiel mit Claude baut dieselbe Fähigkeit an einem Snake-Spiel aus, mit Schwerpunkt auf dem Umgang mit Fehlern.
- Dein erstes lokales Projekt mit Claude Code zeigt dir, wie Claude direkt in deine Dateien schreibt, ohne Kopieren und Einfügen, dafür brauchst du allerdings einen bezahlten Claude-Plan.
Und wenn du wissen willst, wie viel hängengeblieben ist:
Wie gut kennst du den Weg zur eigenen Website?
10 Fragen, vom Starter-Prompt über die typischen Stolperstellen bis zur öffentlichen Adresse. Wer alle schafft, bekommt ein Zertifikat zum Teilen.