Baue deine Website
mit Claude.
Eine professionelle Website mit KI bauen – ohne selbst Entwickler zu sein.
Du bist hier richtig,
wenn du auch schon mal dachtest …
- „Ich will nicht tagelang in Website-Baukästen hängen."
- „Ich habe keine Lust mehr, horrende Gebühren für Funnel-Builder & Co. auszugeben."
- „Ich weiß nicht, wie ich Design, Texte, Formulare, Tracking, SEO und Veröffentlichung zusammenbekomme."
- „Ich würde meine Website gerne selbst verwalten – aber dabei nichts falsch machen."
- „Wenn ich etwas ändern will, soll das schnell gehen. Ohne Freelancer."
Heute lernst du …
- Wie du mit KI schnell deine Wunsch-Website online bringst – neu oder als Nachbau deiner bestehenden Seite.
- Welche Tools du wirklich brauchst, um deine Website zu erstellen und zu veröffentlichen.
- Wie du deine neue Seite kostenlos online stellst.
- Wie du deine selbst gebaute Website absicherst.
- Was es rechtlich zu beachten gilt (keine Rechtsberatung).
- Wie du auf alle zukünftigen Fragen selbst eine Antwort findest.
KI hat das Spiel verändert.
Du brauchst keinen Webdesigner, keine Agentur, keinen teuren Page-Builder – und auch nicht das nervige Rumgeklicke in irgendwelchen Baukästen.
Was du brauchst: eine Idee, ein bisschen Zeit – und die Bereitschaft, der KI Fragen zu stellen.
Drei Phasen. Mehr nicht.
Klarheit über dein Business, deine Ziele und den Look, den du willst.
Mit Claude die Vorlage in deine Website verwandeln – Design, Texte, Formulare.
Lokal prüfen, kostenlos hosten, online gehen.
Was läuft hier eigentlich technisch?
Du musst das nicht verstehen, um deine Seite zu bauen – Claude kümmert sich. Aber wenn du neugierig bist: hier sind die vier Werkzeuge, mit denen wir heute arbeiten, und warum ich sie gewählt habe.
Astro ist das Werkzeug, das aus deinen Inhalten fertige HTML-Seiten macht – also genau die Sprache, die jeder Browser am liebsten direkt versteht.
Weil HTML-Seiten blitzschnell laden und Google sofort versteht, worum es geht – das ist gut für SEO. Außerdem schickt Astro JavaScript nur dort mit, wo's wirklich gebraucht wird (z. B. beim Cookie-Banner). Der Rest bleibt leicht und schnell.
Eine Sammlung fertiger Design-Bausteine. Statt für jede Stelle eigene Styles zu schreiben, baust du deine Seite aus kleinen Lego-Steinchen zusammen – „großer Abstand", „dicke Schrift", „abgerundete Ecke".
Weil Claude damit unfassbar gut umgehen kann. Du sagst „mach das ein bisschen größer und dunkler" – Claude weiß sofort, was zu tun ist. Und der Code bleibt übersichtlich, weil keine wuchernden Style-Dateien entstehen.
React wird immer dann genutzt, wenn ein Teil der Seite „lebendig" sein muss – z. B. ein Formular, das beim Klick reagiert, oder ein Video-Player, der mit-scrollt.
Weil Astro damit super zusammenspielt und React der bekannteste Standard ist. Heißt: Wenn du später mal jemanden brauchst, der was anpasst, findet sich schnell jemand, der sich auskennt.
Dein Hosting – also der Ort, an dem deine fertige Website wirklich „lebt", damit die Welt sie unter deiner Adresse aufrufen kann.
Weil's kostenlos ist, weltweit super schnell ausliefert (egal ob jemand aus Berlin oder Tokyo deine Seite öffnet) und automatisch ein SSL-Zertifikat (das Schloss-Symbol oben in der Adressleiste) dazugibt.
Und was ist Wrangler?
Wrangler ist das kleine Hilfsprogramm von Cloudflare, mit dem Claude deine fertige Seite hochlädt. Du musst es nicht selbst bedienen – Claude weiß, was zu tun ist. Es taucht eigentlich nur kurz auf, wenn deine Seite live geht.
Und der Rest (Sitemap, Fonts, Tracking)?
Im Hintergrund laufen noch ein paar kleine Helfer: eine automatisch generierte Sitemap (damit Google deine Seiten findet), Google-Fonts für die Schriften und – falls du Tracking nutzen willst – eine kleine serverlose Funktion bei Cloudflare, die Daten DSGVO-konform an Anbieter wie Meta weiterleiten kann. Das alles ist optional und Claude richtet dir das ein, wenn du es brauchst.
Wie ist die Seite für SEO und KI-Agenten optimiert – und wie passe ich das an?
Die Vorlage liefert fertiges HTML (statt einer „leeren Hülle", die erst von JavaScript befüllt wird) – das ist die Pole-Position für klassische Suchmaschinen und KI-Crawler wie ChatGPT-Browser, Perplexity oder Claude-Web. Sie alle können deine Inhalte sofort und vollständig lesen.
Was schon eingebaut ist:
- Sitemap automatisch generiert – bei jedem Bau entsteht eine
sitemap.xml, die Google sagt: „Hier sind alle meine Seiten." Musst du nicht pflegen. - Saubere Meta-Tags pro Seite – Titel, Beschreibung und Vorschaubild (Open Graph) sind pro Seite einstellbar. Das ist das, was Google in den Suchergebnissen anzeigt und was beim Teilen auf LinkedIn/WhatsApp als Karte erscheint.
- Semantische Struktur – ein H1 pro Seite, dann H2, H3 in sauberer Hierarchie. Genau so, wie Suchmaschinen und KI-Crawler Inhalte am liebsten lesen.
- Agent-ready Meta-Felder – spezielle Tags, die KI-Crawlern signalisieren: „Hier sind meine wichtigsten Infos, mein Angebot, meine Position." Damit du in KI-Antworten auftauchst, nicht nur in Google.
- Alt-Texte für Bilder – Claude setzt sie automatisch, damit Bildersuche und Screenreader deine Inhalte erfassen.
- Geschwindigkeit – Astro + Cloudflare liefert blitzschnell aus. Ladegeschwindigkeit ist selbst ein SEO-Faktor.
Und wie passt du das an? Du machst nicht viel manuell – du fragst Claude:
„Bitte prüf meine Seite auf SEO und stell sicher, dass auch KI-Agenten meine Inhalte gut erfassen können. Schau dir an: Meta-Beschreibungen, Open-Graph-Bilder, strukturierte Daten (Schema.org), Sitemap, robots.txt, Bilder-Alt-Texte. Ergänze, wo etwas fehlt – und erklär mir verständlich, was du gemacht hast und was ich noch nachschärfen sollte."
Das reicht für 90 % aller Fälle. Den Rest macht ohnehin guter Content.
Aber: Was, wenn ich eine andere Idee habe? (WordPress, Webflow, Framer …)
Vielleicht hast du schon mal von WordPress, Webflow, Framer oder einem anderen Tool gehört und denkst, das passt besser für dein Projekt. Frag einfach Claude:
„Wäre [dein Wunsch-Tool] für mein Projekt vielleicht besser geeignet als Astro + Cloudflare? Bitte gib mir eine ehrliche Einschätzung mit Vor- und Nachteilen – und beziehe das auf mein konkretes Vorhaben."
Du kriegst eine ehrliche Antwort mit Vor- und Nachteilen. Es gibt immer mehrere Wege zum Ziel.
Vorbereiten – erst Klarheit, dann Code.
Bevor du Claude irgendetwas bauen lässt, brauchst du zwei Dinge: die richtigen Werkzeuge und ein klares Bild davon, was du eigentlich willst.
Was du brauchst – und was du nicht brauchst.
- Claude – Claude Code oder claude.ai
- Diese Vorlage – bekommst du heute
- Cloudflare-Konto – kostenlos, für später
- Eigene Domain – z. B. All-Inkl, IONOS
- Formular-Anbieter – z. B. Tally (kostenlos)
- Webdesigner
- Agentur
- Page-Builder
- Git, Branches, Versionen
Verschaff dir Klarheit – bevor Claude loslegt.
- Wer bist du? Name, was du machst.
- Für wen ist die Seite? Deine Zielgruppe.
- Was ist dein Ziel? Anfrage, Newsletter, Erstgespräch …
- Was bietest du an? Und für wen lohnt es sich?
- Welche Tonalität? Ruhig, direkt, warm, modern …
- Welche Seiten? Start, Angebot, Danke …
- Was ist der wichtigste Klick? Dein Haupt-CTA.
- Was inspiriert dich? Beispielseiten.
„Hier ist mein Website-Briefing. Lies es bitte einmal in Ruhe durch und sag mir in deinen eigenen Worten, was du verstanden hast: Mein Ziel, meine Zielgruppe, mein Angebot, die Tonalität und welche Seiten ich brauche. Wenn etwas unklar ist oder dir was fehlt, frag mich. Noch nichts ändern – erst will ich sicher sein, dass wir auf einer Wellenlänge sind."
Dein Design festlegen – drei Wege.
Gib Claude den Link. Die KI schaut sich Farben, Typografie und Layout an – und leitet daraus dein eigenes Design ab.
Sammle Screenshots von Seiten, die dir gefallen. Wirf sie Claude in den Chat. Stilrichtung wird übernommen – nicht 1:1 kopiert.
Kein Briefing – Claude entscheidet. Oder: vorab ein Mock-up mit ChatGPT (Image-Gen) generieren und das als Referenz geben.
Inspiration für ganze Seiten
Die besten Website-Designs der Welt, ausgezeichnet von einer Design-Jury. Perfekt, um Layout, Wirkung und Animationen für deine Seite im Großen zu sehen.
Farb-Themes ausprobieren
Visueller Editor für Color-Themes. Klick dich durch fertige Paletten, finde deine Farbwelt – und gib Claude einfach den Link oder die Werte für dein global.css.
Inspiration für Komponenten
Tausende Hero-Sections, Footer, Karten, Buttons & Hintergründe von der Community. Such dir was raus, gib Claude den Link – „Bau mir was in dieser Richtung."
Auch sehenswert für ganze Seiten: Land-book · Godly · One Page Love
Bauen – aus der Vorlage wird deine Seite.
Jetzt führst du Claude Schritt für Schritt durch dein Projekt. Eine Sache nach der anderen – und Claude folgt.
Arbeite linear.
Ein Prompt nach dem anderen. Keine Verzweigungen. Keine Versionen.
- Du brauchst kein Git, keine Branches, kein „Versionen-Wirrwarr".
- Schritt für Schritt vorgehen – Claude folgt dir.
- Läuft etwas schief: einfach sagen, was du wolltest. Claude rollt zurück.
Zwei kleine Einstellungen, die alles einfacher machen.
Wähle den richtigen Modus
Unten im Eingabe-Feld kannst du zwischen Modi wechseln:
- Plan-Modus – ideal für den allerersten Start. Claude denkt erst, bevor es loslegt.
- Berechtigungen umgehen – für den Arbeitsmodus. Du wirst nur einmal gefragt, ob du Claude vertraust. Danach läuft alles flüssig durch.
Wähle das richtige Modell
Auch unten im Eingabe-Feld:
- Opus – das smarteste Modell. Für Planung, größere Architektur-Entscheidungen, erste Erstellung.
- Sonnet – schneller, günstiger. Für kleine Edits, Textänderungen, Routine-Anpassungen.
Spart Tokens – und damit dein wöchentliches Nutzungs-Budget.
Erst verstehen. Dann ändern.
Lass Claude die Vorlage zuerst lesen, bevor irgendetwas verändert wird. So bekommst du eine Übersicht – und Claude eine Karte.
„Bitte analysiere dieses Projekt zuerst, ohne etwas zu ändern. Erklär mir dann in einfachen Worten – so als wäre ich ein Siebtklässler – wie du mich dabei unterstützen kannst, meine Traumwebseite in meinen Farben, mit meiner Schriftart und meinem Wunschlayout online zu bringen. Und ganz kurz: Wie ist der Ordner aufgebaut, wo liegen die Seiten, was sind Komponenten, und wo würde ich Farben, Schriften und Layout zentral ändern – falls ich das doch mal selbst anfassen will (was wahrscheinlich eh nie vorkommt, weil ich ja dich habe)."
Ein Ort regelt alles: global.css
Das ist der wichtigste Hebel beim Bauen. Alle Design-Entscheidungen – Farben, Schriften, Buttons, Karten – kommen aus dieser einen Datei. Eine Änderung wirkt überall.
- Jede Seite einzeln stylen
- Farben überall „nochmal kurz" anpassen
- Komponenten kopieren statt wiederverwenden
- Erst
global.cssändern - Farben, Schriften, Buttons, Karten – zentral
- Komponenten wiederverwenden
Was du Claude unbedingt mitgibst.
Aus eigenen Stolperfallen destilliert – die wichtigsten Regeln, die du in der Datei CLAUDE.md deines Projekts hinterlegst. Claude liest sie automatisch:
global.css arbeiten – nie auf einzelnen Seiten verbasteln.
­ oder <wbr> setzen.
Was ist eine CLAUDE.md?
Eine ganz normale Textdatei im Hauptordner deines Projekts. Claude Code liest sie bei jedem Start automatisch ein – wie eine Bedienungsanleitung. Dort stehen alle Regeln, die für dein Projekt gelten sollen. In der Vorlage, die du heute bekommst, ist sie schon vorausgefüllt.
Punktgenau ändern, ohne dass die KI was anderes mitanfasst.
Claude Code hat eine integrierte Live-Vorschau und ein Werkzeug, mit dem du exakt das Element auswählst, das geändert werden soll. Damit beantwortest du auch die häufige Sorge: „Was, wenn die KI etwas anderes mitverändert?" – sie kann's nicht, weil sie genau weiß, was du meinst.
</>-Symbol): klick rein, wähle ein Element auf der Seite – und Claude ändert genau das, nichts anderes.
Workflow
- Element-Selector aktivieren (
</>-Symbol unten links) - In der Vorschau das Element anklicken
- Im Eingabe-Feld dazu schreiben, was geändert werden soll
Auch praktisch: Stift-Tool
Mit dem Stift kannst du in der Vorschau direkt etwas einkreisen, zum Chat hinzufügen und dann beschreiben, was geändert werden soll. Ideal, wenn das Element schwer einzeln zu erwischen ist.
Veröffentlichen – deine Seite geht live.
Erst lokal anschauen, dann kostenlos hosten. Die KI führt dich durch jeden technischen Schritt – auch wenn du DNS, Build oder Deploy noch nie gehört hast.
Erst lokal prüfen.
Bevor irgendetwas online geht – schau dir die Seite auf deinem eigenen Rechner an. Claude startet den lokalen Server und öffnet Chrome für dich.
„Mach mir die Seite jetzt bitte lokal sichtbar und öffne sie in Chrome, damit ich sie mir auf meinem Rechner anschauen kann – noch sieht sie ja sonst niemand."
Wenn du Claude Code nutzt, geht das sogar noch eleganter: Du lässt dir die Seite direkt im Claude-Code-Fenster anzeigen – ohne Chrome zu öffnen. Praktisch, weil du auf eine Stelle klicken und Claude direkt sagen kannst „hier stört mich das".
„Bitte öffne meine Seite in der Live-Vorschau hier in Claude Code – ich will sie direkt nebenbei sehen können, während wir weiterarbeiten."
Brauchst du eine eigene Domain?
Kurze Antwort: nicht zwingend. Cloudflare gibt dir eine kostenlose Adresse wie deine-seite.pages.dev. Wenn du eine eigene Domain willst, führt Claude dich durch.
Erstmal ohne Domain.
Cloudflare liefert dir .pages.dev kostenlos mit. Perfekt zum Starten – kannst du jederzeit später umstellen.
Mit eigener Domain.
Du hast (oder kaufst) eine Domain bei einem Anbieter wie All-Inkl oder IONOS – und verknüpfst sie mit Cloudflare. Drei Klicks, ein paar Einträge. Claude erklärt dir jeden.
Was ist überhaupt ein DNS-Eintrag?
DNS ist wie das Telefonbuch des Internets. Du sagst: „Wenn jemand deine-seite.de aufruft, schick ihn zu Cloudflare." Diesen Eintrag machst du beim Anbieter, bei dem du die Domain gekauft hast. Wo genau und wie genau? Frag einfach Claude. Antwort kommt in Sekunden – verständlich, Schritt für Schritt.
Ich habe noch keine Domain – was empfehlt Claude?
Wenn du fragst, bekommst du in der Regel zwei bis drei valide Optionen genannt (z. B. All-Inkl, IONOS, Strato). Du kannst dann nachhaken: „Welche würdest du für mich empfehlen – und warum?" – und auf Basis dieser Antwort entscheiden.
Cloudflare mit Claude verbinden – der versteckte Klick.
Damit Claude für dich bei Cloudflare deployen darf, brauchst du einmal einen API-Token. Den legst du in Cloudflare an (Claude führt dich durch den Cloudflare-Klickpfad) und hinterlegst ihn sicher in Claude Code. Der Knopf dafür ist gut versteckt:
Schritt für Schritt
- In Cloudflare: Manage Account → API Tokens → Create Token (Claude erklärt dir Schritt für Schritt, welche Rechte der Token braucht).
- Den langen Token in die Zwischenablage kopieren.
- In Claude Code: neuer Chat → unten links „Lokal" klicken → Zahnrad-Symbol.
- Token mit eindeutigem Namen hinterlegen (z. B.
CLOUDFLARE_API_TOKEN). - Fertig. Claude kann ab jetzt deinen Cloudflare-Account verwalten.
Pro-Tipp: Claude den Token komplett selbst anlegen lassen
In Claude Code unter Einstellungen → Allgemein kannst du Browser-Aktionen und Computer-Nutzung erlauben. Dann kann Claude sich selbst bei Cloudflare einloggen, den Token erstellen und hinterlegen. Bequemer, dauert aber etwas länger und verbraucht mehr Tokens. Für Erstanwender oft der goldene Weg, weil null Klick-Verwirrung.
Live gehen.
Wenn alles in der lokalen Vorschau passt – ein einziger Prompt, und Cloudflare nimmt's online.
„Sieht alles gut aus. Bitte bau die fertige Version der Seite und lade sie zu Cloudflare hoch, damit sie online erreichbar ist. Falls noch was zu klären ist – Domain, Projektname, Zugangsdaten – sag mir Bescheid, bevor du loslegst."
Warum erst lokal bauen – warum nicht direkt Cloudflare bauen lassen?
Du siehst Fehler, bevor irgendwer sie zu Gesicht bekommt. Außerdem hat Cloudflare ein Build-Kontingent – wer lokal baut und nur das Ergebnis hochlädt, spart sich das. Diese Regel steht auch in der CLAUDE.md – Claude wird sich daran halten, ohne dass du sie jedes Mal wiederholen musst.
Deine Seite ist live – und du hast keinen Cent für Hosting bezahlt.
Damit dich auch jemand findet.
Eine professionelle Seite ist erst die halbe Miete. Wenn niemand sie findet, war's umsonst. Das Gute: Auch hier macht Claude den Großteil der Arbeit – du musst eigentlich nur fragen.
Zwei Dinge solltest du nach dem Launch einrichten:
- Klassisches SEO – damit Google & Co. dich finden und in den Suchergebnissen anzeigen.
- KI-Agenten-Optimierung – damit du auch in ChatGPT-Antworten, Perplexity, Claude-Web auftauchst. Das ist die nächste Welle – und sie hat schon angefangen.
Beides erledigst du mit einem einzigen Prompt. Claude führt dich dann Schritt für Schritt durch alles, was du klicken musst – inklusive der Anmeldung bei der Google Search Console (klingt technisch, ist's aber nicht: Claude hält dir die Hand).
„Ich möchte, dass meine Seite gut von Google, anderen Suchmaschinen UND KI-Agenten (ChatGPT, Perplexity, Claude) gefunden werden kann. Bitte führe mich Schritt für Schritt durch alles, was ich dafür einrichten muss – inklusive: robots.txt, Sitemap, strukturierte Daten (Schema.org), Meta-Tags, und Anmeldung bei der Google Search Console. Wo ich selbst etwas klicken muss (z. B. einen Account anlegen oder eine Domain bestätigen), führ mich einzeln durch und erklär mir verständlich, was jeder Schritt bewirkt."
Check, wie KI-fit deine Seite ist.
Es gibt ein kostenloses Tool, das prüft, wie gut KI-Agenten und KI-Crawler deine Seite verstehen können: isitagentready.com. Du gibst deine URL ein und bekommst einen Score plus konkrete Verbesserungsvorschläge.
Mein eigener Ausgangspunkt – vor der Optimierung mit Claude Code:
Mit dem Prompt von oben bringst du auch diese Werte deutlich nach oben. Die Frage, was du wo einbauen musst (robots.txt für KI-Bots erlauben, JSON-LD-Daten, MCP-Discovery-Endpoint, …), übernimmt Claude für dich. Du brauchst keinen Plan davon, was die Begriffe einzeln bedeuten.
Warum sollte ich das überhaupt machen?
Immer mehr Menschen googeln nicht mehr klassisch, sondern fragen direkt KI-Modelle: „Welche Coaches für X kannst du mir empfehlen?" Wenn deine Seite dort nicht referenziert wird, existiert du in dieser neuen Welt nicht.
Klassisches Google-SEO bleibt wichtig – aber KI-Sichtbarkeit ist die nächste SEO. Wer jetzt vorsorgt, sitzt in zwei Jahren am längeren Hebel.
Wo erlaube oder verbiete ich KI-Bots ganz konkret?
Im Cloudflare-Dashboard gibt's einen eigenen Bereich AI Crawl Control. Da siehst du genau, welche KI-Bots wie oft auf deiner Seite waren (z. B. „OpenAI 15× gecrawlt", „Anthropic 13×") – und kannst sie pro Anbieter erlauben oder blockieren.
Mein Ansatz: alle erlauben. Ich will, dass meine Inhalte in ChatGPT, Claude und Perplexity auftauchen, wenn jemand nach meinem Thema fragt. Wenn du das anders willst (z. B. Inhalte vor Training schützen), kannst du gezielt blockieren.
Mach deine Seite sicher – technisch und rechtlich.
Zwei Dinge, an die du gleich nach dem Launch denken solltest. Beide kannst du mit Claude in wenigen Minuten erledigen – und sie machen einen riesigen Unterschied.
Lass Claude einen Sicherheits-Check machen.
Wenn deine Seite steht, lohnt sich ein gründliches Audit. Claude schaut sich die Seite an, prüft die genutzten Programme auf bekannte Sicherheitslücken (und aktualisiert sie bei Bedarf), checkt die wichtigen Schutzmechanismen und sagt dir genau, wo du noch nachschärfen solltest.
Eigene Erfahrung: Bei meiner Seite wurde nach so einem Audit das Bauplan-Tool Astro auf eine sichere Version aktualisiert, mehrere Schutz-Header nachgezogen und eine offene Stelle abgesichert, die mir vorher gar nicht aufgefallen wäre. In zehn Minuten erledigt.
„Bitte mach jetzt ein gründliches Sicherheits-Audit meiner Seite.
Erst die Pakete: Welche Versionen von Astro, Tailwind und allen anderen Bausteinen nutze ich? Recherchier nach, ob es dort bekannte Sicherheitslücken oder Exploits gibt – und aktualisiere alles auf eine sichere Version, falls nötig.
Dann die Seite selbst: Sind irgendwo geheime Schlüssel oder Passwörter im Code? Sind die wichtigen Schutz-Header gesetzt (HTTPS, Schutz vor Klick-Tricks, Cross-Site-Angriffen, usw.)? Würden meine Formulare typische Angriffe abwehren? Was an meiner Architektur könnte ein bekannter Angriffsvektor sein – auch wenn er erst neulich entdeckt wurde?
Erklär mir am Ende verständlich, was du gefunden hast, was du gefixt hast – und wo ich aus deiner Sicht noch dranbleiben sollte. Wenn du dir bei einem Punkt unsicher bist, lieber einmal zu viel nachfragen als einmal zu wenig."
Was prüft Claude bei so einem Audit typischerweise?
Veraltete Pakete mit bekannten Lücken (z. B. via npm audit), versehentlich im Code gelandete API-Schlüssel, fehlende Sicherheits-Header (Content-Security-Policy, HSTS, X-Frame-Options), unsichere Formular-Verarbeitung, offene Endpoints, Cookie-Einstellungen, und – wenn du mit Cloudflare hostest – ob deine Pages-Funktionen sauber abgesichert sind. Claude schlägt für jeden Punkt eine konkrete Lösung vor.
Wie oft sollte ich das wiederholen?
Direkt nach dem Launch einmal vollständig – und danach grob alle zwei bis drei Monate, weil ständig neue Sicherheitslücken bekannt werden. Du kannst Claude auch fragen: „Was hat sich seit meinem letzten Audit an neuen Risiken ergeben?" – dann fokussiert es sich auf das Neue, nicht auf das, was schon geprüft wurde.
Achtung: nach dem Audit alles einmal durchtesten
Aus eigener Erfahrung: Claude wird beim Audit auch strikte Sicherheits-Header setzen. Bei mir konnten danach plötzlich eingebettete Drittanbieter-Videos nicht mehr abgespielt werden – aufgefallen ist mir das erst, als mir ein Newsletter-Leser geschrieben hat.
Deshalb: nach jedem Audit einmal alle Funktionen durchklicken – Videos, Formulare, externe Einbettungen. Wenn was nicht mehr läuft, sag's Claude: „Nach dem Audit funktioniert X nicht mehr – bitte finde den Mittelweg zwischen Sicherheit und Funktion."
Das Rechtliche – schon vorbereitet.
Das wird oft unterschätzt – kann aber teuer werden. Was du heute bekommst und worauf du achten musst:
Cookie-Banner – schon eingebaut.
In der Vorlage steckt ein vollständiger Cookie-Banner, den ich nach bestem Wissen und Gewissen gebaut habe. Er orientiert sich an den marktführenden Lösungen: Scripte werden erst nach Einwilligung geladen, der Banner ist fest in die Seite integriert, Einstellungen lassen sich jederzeit über den Footer neu öffnen.
Du kannst ihn 1:1 übernehmen – oder mit Claude weiter anpassen.
Wichtig: keine Rechtsberatung.
So sorgfältig der Banner gebaut ist – die Rechtslage kann sich ändern, und jeder Fall ist anders. Frag Claude, ob für deinen konkreten Einsatzzweck noch etwas ergänzt werden sollte. Wenn du ganz auf Nummer sicher gehen willst: anwaltlicher Rat ist und bleibt der Goldstandard.
Wie ist der Cookie-Banner technisch aufgebaut?
Es ist im Grunde eine kleine eingebaute App: ein Banner mit Kategorien (notwendig, Statistik, Marketing, externe Inhalte), Speicherung der Entscheidung im Browser über localStorage, Ablaufzeitraum für die Einwilligung, programmatisches Nachladen aller eingewilligten Scripte. Wenn du fragst, erklärt Claude dir die Logik im Detail.
Was muss in Impressum und Datenschutzerklärung?
In der Vorlage sind Platzhalter. Frag Claude: „Bitte schau dir an, welche Tools ich tatsächlich eingebaut habe, und schreib mir Datenschutzerklärung und Impressum entsprechend neu – mit klar markierten Platzhaltern für die rechtlich sensiblen Stellen." Vor Veröffentlichung idealerweise nochmal anwaltlich prüfen lassen.
Wie du auf alle zukünftigen Fragen selbst eine Antwort findest.
Das ist die eigentliche Superkraft, die du aus diesem Workshop mitnimmst: Du kannst jede technische Frage selbst beantworten – indem du die KI fragst.
Ich wollte meine Seite kostenlos hosten – hatte aber keine Ahnung wo.
Ich habe Claude einfach gefragt: „Wo kann ich eine Website kostenlos und zuverlässig hosten?"
Antwort: Cloudflare Pages, Vercel, Netlify – und ein paar weitere.
Nächste Frage: „Welche davon würdest du mir empfehlen – und warum?"
Antwort: Cloudflare (für meine Use-Case-Beschreibung). Entscheidung getroffen. Zeit von Frage bis Entscheidung: drei Minuten.
„Was sind meine Optionen für X?" – du bekommst eine Liste, statt nur eine Antwort.
„Was würdest du mir empfehlen – und warum?" Das macht aus einer Liste eine Entscheidung.
„Ich weiß nicht, was DNS ist. Bitte erklär's mir." Die KI hat unendlich Geduld – nutze sie.
Deine Workshop-Ressourcen.
Die Website-Vorlage
Komplettes Astro-Projekt zum Entpacken. Enthält Cookie-Banner, vorbereitete Komponenten und die CLAUDE.md mit allen Regeln.
Diese Seite
Bleibt online. Lesen, scrollen, jederzeit als Spickzettel nutzen. Den Link kannst du teilen.
Aufzeichnung & Prompt-Sammlung
Du bekommst die Aufzeichnung des Workshops plus eine destillierte Prompt-Sammlung aus dem Transkript – wenige Tage nach dem Live-Termin.
Fragen aus dem Vorfeld – beantwortet.
Aus meiner Community sind im Vorfeld ein paar richtig gute Fragen eingegangen. Damit ihr nicht warten müsst – hier die Antworten zum Mitnehmen:
Tech-Stack im Workshop: Astro + Tailwind + React + Cloudflare Pages. Im „Unter der Haube"-Block weiter oben habe ich erklärt, was jedes Tool macht.
Zur node.js-Frage – kurze, klare Antwort:
Du brauchst node.js auf deinem Rechner installiert, damit Claude die Seite überhaupt bauen kann. Das ist quasi der Motor, der den Astro-Bauplan ausführt. Aber die fertige Seite läuft am Ende nicht auf node.js – Astro produziert fertiges HTML, CSS und ein bisschen JavaScript. Cloudflare liefert die Dateien einfach aus, ohne dafür einen node-Server zu brauchen. Heißt: blitzschnell, kostenlos, kaum Angriffsfläche.
Tiefer rein: Was ist node.js wirklich – und warum das auch für SEO ein Riesenvorteil ist
JavaScript ist eine Sprache, die normalerweise nur im Browser läuft (z. B. damit dein Cookie-Banner aufpoppen kann). Node.js ist der Trick, dieselbe Sprache auch auf deinem Rechner laufen zu lassen – stell's dir vor wie eine zusätzliche Küche neben dem Esszimmer.
Astro selbst ist ein Programm in JavaScript. Damit es überhaupt arbeiten kann, braucht es diese Küche (= node.js) – aber nur auf deinem Rechner, beim Bauen. Astro kocht einmal alles fertig und packt es in die „Theke".
Cloudflare ist diese Theke. Dort liegen nur fertige HTML-Dateien rum, die ausgeliefert werden. Kein node.js am Server, kein „frisch kochen pro Besucher". Heißt: blitzschnell, kostenlos, fast keine Angriffsfläche.
Und genau das ist Gold für SEO:
- Google kann inzwischen zwar auch JavaScript-Seiten verarbeiten, macht das aber in zwei Schritten und teilweise unzuverlässig. Bei fertigem HTML liest Google deine Inhalte sofort und vollständig.
- Andere Crawler (Bing, DuckDuckGo, KI-Scraper, Social-Media-Linkvorschauen) führen oft gar kein JavaScript aus. Bei einer JS-only-Seite sehen die fast nichts. Bei deiner Astro-Seite sehen sie alles.
- Link-Vorschauen auf WhatsApp, LinkedIn & Co. ziehen ihre Bilder und Texte aus dem fertigen HTML. Statische HTML-Seiten = saubere Vorschau, jedes Mal.
- Geschwindigkeit ist selbst ein SEO-Faktor – Astro-Seiten sind blitzschnell, weil im Browser kein riesiges JavaScript-Paket erst geparst werden muss.
Faustregel: Statisches HTML = jeder Crawler liebt dich. JavaScript-only-Seite = du kämpfst.
Ja, klar – am Ende ist das ja normaler Code in normalen Dateien. Du kannst sie jederzeit selbst im Editor öffnen und ändern. In der Praxis lässt du aber meistens Claude machen, weil's einfach schneller geht: „Mach den Button etwas größer und blau" – fertig.
Zur Sorge mit dem ungefragten Ändern an anderer Stelle – die ist berechtigt, aber lösbar mit ein paar Routinen:
- CLAUDE.md – darin stehen die Spielregeln für dein Projekt. Claude liest sie automatisch.
- Plan vor Code – bei größeren Aktionen Claude vorher den Plan schildern lassen. Du sagst „Go" oder „nein, anders". Erst dann legt Claude los.
- Linear arbeiten – ein Prompt nach dem anderen, nicht fünf Sachen parallel. Dann behältst du immer die Übersicht.
- Notfall-Knopf – „Mach das rückgängig" funktioniert fast immer. Claude rollt zurück.
Im Vergleich zu klassischen Buildern hast du dadurch mehr Kontrolle, nicht weniger – du musst sie nur einmal lernen.
Ja – wenn du dich an das hältst, was wir heute gezeigt haben. Der Cookie-Banner sperrt nicht-essenzielle Skripte bis zur Einwilligung, Datenschutzerklärung und Impressum sind als Platzhalter vorbereitet, geheime Schlüssel landen nicht im Code, und das Sicherheits-Audit deckt grobe Schwachstellen auf.
Aber: DSGVO-Konformität hängt davon ab, was du tatsächlich einbaust. Sobald du Tools wie Meta Pixel, Google Analytics, YouTube-Videos, externe Schriften oder Formulardienste hinzunimmst, kommen zusätzliche Pflichten dazu – andere Cookie-Kategorien, ergänzte Datenschutztexte, manchmal sogar Auftragsverarbeitungsverträge.
Mein Tipp: Wann immer du was Neues einbaust, frag Claude:
„Ich habe gerade [Tool/Skript/Dienst] in meine Seite eingebaut. Bitte prüf, ob meine Datenschutzerklärung, mein Impressum und mein Cookie-Banner noch passen – oder ob ich etwas ergänzen muss, damit ich DSGVO-konform bleibe."
Und wie immer: keine Rechtsberatung. Wenn du auf Nummer sicher gehen willst, lass die finalen Texte einmal anwaltlich prüfen.
Dazu haben wir oben die ganze Sektion „Sicherheit & Recht" – kurz noch mal das Wichtigste:
- In der Vorlage steckt ein fertig gebauter Cookie-Banner, der sich an den marktführenden Lösungen orientiert.
- Skripte für Statistik, Marketing und externe Inhalte werden erst nach Einwilligung geladen – nicht vorher.
- Die Einstellungen kann der Besucher jederzeit wieder über den Footer öffnen und ändern.
- Cookie-Kategorien (notwendig, Statistik, Marketing, extern) lassen sich an dein Setup anpassen – einfach Claude sagen, welche Tools du nutzt.
Du kannst ihn 1:1 übernehmen – oder mit Claude weiter feinjustieren, je nachdem, welche Dienste du am Ende wirklich einsetzt.
Bau deine Seite.
Heute noch.
Du hast alles, was du brauchst. Wenn Fragen auftauchen – und sie werden auftauchen – frag die KI.
Wenn du nicht weiterkommst: Q&A im Anschluss. Wenn du Begleitung willst: lass uns reden.