Statische Website in 4 Stunden mit AI programmieren - Eine Anleitung

Du willst eine eigene Website erstellen mit KI? Schnell, individuell und ohne teuren Entwickler? In dieser Anleitung zeige ich dir, wie ich eine statische Website programmiert habe. Von der ersten Zeile Code bis zum fertigen Launch in unter 4 Stunden.

Das Website Ergebnis vorweg

Diese statische Website hier habe ich in 4 Stunden mit KI programmiert. Von null auf fertig und live. In diesem Artikel zeige ich dir Schritt für Schritt, wie du das auch kannst.

Meine Ziele dabei waren:

• SEO: Optimiert und indexierbar von Google
• Performance: 100/100 in Google PageSpeed Insights, null Ladezeiten
• Persönlich: Sie soll zu mir und meiner Marke passen
• Einfacher Tech-Stack: Keine komplizierte Infrastruktur

Und das Wichtigste: Schnelle Entwicklung in unter 4 Stunden bis zum Launch.

Du brauchst dafür kein Entwickler zu sein, aber etwas technisches Gespür hilft. Wenn du weißt, was ein Ordner ist und keine Angst vor dem Terminal hast, bist du hier richtig.

Wichtig: Ich habe selbst einen technischen Hintergrund und bin Entwickler. Daher fällt mir das Arbeiten im Terminal vielleicht etwas leichter. Aber man gewöhnt sich schnell an die textbasierten Eingaben.

Warum statisch + KI der Cheat Code ist

Die meisten Websites laufen mit einem CMS wie WordPress oder Drupal. Da liegen Texte und Inhalte in einer Datenbank, und die Website wird bei jedem Aufruf zusammengebaut. Das funktioniert, aber es ist langsam, komplex und vor allem kommt die KI schlecht an die Inhalte ran.

Die Alternative für KI Entwicklung

Alles liegt als Dateien in einem Ordner. Texte als Textdateien, Bilder als Bilddateien, Code als Codedateien. Und genau das ist der Cheat Code: Eine KI kann Dateien direkt lesen und schreiben. Sie braucht keine Datenbank, kein Admin-Panel, keine API. Du sagst ihr “erstelle mir eine neue Seite” und sie legt einfach eine neue Datei an. Fertig.

Statische Website mit Astro

Ich habe mich für Astro entschieden, weil: alles ist direkt in einem Ordner, es ist JavaScript-basiert (das kann KI mit Abstand am besten), und man kann es statisch einmal bauen und auf den Server ziehen. Selbst jeder primitivste Webserver kann statisches HTML ausliefern.

Ende der Website Builder?

Klassische Web Baukästen empfehle ich weiterhin Kunden, die es günstig und schnell ohne technische Expertise wollen. Aber wer heute eine Website entwickeln will mit KI, kann sich mittlerweile auch sehr einfach statische Websites viel individueller erzeugen, wenn man nur etwas technisches Gespür mitbringt. Ohne sich Abhängigkeiten von einem kostenpflichtigen Anbieter reinzuholen.

Schritt-für-Schritt Anleitung von KI Programmierung

Noch nicht konkret genug? Hier ist wie ich es gemacht habe:

1. Tools installieren (~10 Min)

Du brauchst zwei Dinge auf deinem Rechner:

NPM - ein Paketmanager, mit dem du Software-Pakete installieren kannst. Kommt mit Node.js.

Ein KI-Tool, das direkt auf deinen Dateien und Ordnern arbeiten kann. Wichtig: Das sind keine Browser-Chatbots wie ChatGPT oder Claude im Browser. Diese Tools werden lokal auf deinem Rechner installiert und können dadurch deine Projektdateien direkt lesen, bearbeiten und neue Dateien anlegen. Such dir eins aus:

Tool	Beschreibung	Link
Claude Code	Terminal-basiert, mein Favorit. Bisher hat nichts Claude Code geschlagen.	claude.ai/product/claude-code
Claude Desktop	Grafische Oberfläche, auch sehr gut, aber im Code-Modus bei mir noch instabil.	claude.ai/download
Cursor	Code-Editor mit eingebauter KI	cursor.com
Antigravity	Von Google/Gemini	antigravity.dev
Codex	Von OpenAI/ChatGPT	openai.com/codex

Keine Sorge: Du musst immer noch freigeben, welche Ordner die KI anschauen darf. Führe sie also nur in deinem Code-Ordner aus (siehe Folgeschritte).

2. Astro-Projekt aufsetzen (~15 Min)

In einem neuen Ordner erstellst du nun die Codebasis für deine Website. Astro bietet bereits von Haus aus einen Command, der alles für dich übernimmt:

npm create astro@latest

Wenn du gefragt wirst, wähle das leere Standard-Template oder Blog-Starterkit. Das erstellt dir diese Ordnerstruktur:

meine-website/
├── public/             # Statische Dateien (Bilder, Favicon)
├── src/
│   ├── components/     # Wiederverwendbare Bausteine
│   ├── layouts/        # Seitenlayouts
│   ├── pages/          # Jede Datei = eine Unterseite
│   └── styles/         # CSS Dateien
├── astro.config.mjs    # Astro Konfiguration
└── package.json

Gehe im Terminal in den Ordner und starte den Server:

cd meine-website
npm run dev

Wenn du nun die localhost-Domain öffnest, siehst du erstmal eine leere Seite mit Dummy-Inhalten.

3. Design & Inhalte mit KI erstellen (~2 Std)

Jetzt kommt der spannende Teil. Bei größeren Website-Entwicklungen in der Agentur machen wir vorher noch ein vollständiges pixelgenaues Figma-Screen-Design, erstellen eine genaue Sitemap mit allen Unterseiten, ein SEO- und Keyword-Konzept und Architekturüberlegungen zur Erweiterbarkeit.

Bei größeren Projekten erstellen wir vorher pixelgenaue Screen-Designs in Figma.

Aber hier ist das Overkill. Wir wollen eine einfache statische Seite, die gut aussieht. Das kann KI komplett selber schon ziemlich gut, besser und individueller als die meisten Baukästen. Wir müssen auch keine Design-Awards gewinnen und keine hohen Compliance- und CI-Richtlinien erfüllen. Wenn doch, ist das vielleicht der falsche Guide.

Beispiel-Prompt für den Start:

Ich möchte eine Website mit folgenden 4 Unterseiten: Start, Über uns, Mitmachen und Kontakt. Diese sollen im Header verlinkt werden. Im Footer bitte noch Datenschutz und Impressum ergänzen. Zum Design: Ich möchte gerne ein schickes Design mit hellem Hintergrund und Blau sowie vielen Bildern. Ich bin ein Sportverein aus Hamburg mit Fokus auf… Berücksichtige mobile Responsivität und SEO-Grundlagen.

Dann lässt du die KI mal ein bisschen ackern. Ab jetzt kannst du Feintuning machen, z.B.:

• “Der Hero ist mir zu überwältigend und sollte etwas übersichtlicher gestaltet sein.”
• “Die Farbe bitte weniger seriös und sportlicher gestalten.”
• “Die Texte zu Über mich sind noch zu unpersönlich. Folgendes bitte beachten: Wir wurden in X gegründet, wir sind besonders fokussiert auf Leute, die Anfänger bis Fortgeschritten sind, es geht mehr um den Spaß und Teamgeist usw.”

Wichtig: Nicht zu viel auf einmal machen lassen - Schritt für Schritt optimieren.

Das Ergebnis nach dem ersten Prompt:

Nach einer Iteration mit Feintuning:

Und nach einer weiteren Runde mit anderer Farbgebung:

Und das waren nur drei Prompts. Wenn man genauer weiß, was man will, und mehr Versuche investiert, wird das Ergebnis noch deutlich besser.

4. Blog mit Markdown einrichten (~30 Min)

Warum ist das jetzt eigentlich so cool, dass wir alles in Dateien ohne Datenbank haben? Weil wir der KI jetzt ganz einfach sagen können: “Erstelle mir eine weitere Landingpage zu X mit folgenden Infos.” Und zack, ist das fertig.

Du willst noch einen Schritt weiter gehen? Dann empfehle ich dir einen Blog mit Markdown.

Markdown ist kurzgefasst eine einfache Textformatierung, viel besser lesbar und bearbeitbar als HTML. Astro ist darin richtig stark: Alle Blogartikel werden als Markdown-Dateien gespeichert, du kannst sie selber ohne Codekenntnisse bearbeiten, und beim Bauen wird alles automatisch zu HTML-Seiten.

KI-Prompt fürs Blog-Setup:

Ich brauche einen Blog, der automatisch meine Blog-Markdown-Files in /content/blog ausliest. Erstelle mir eine Overview-Seite sowie dynamische Blog-Detailseiten.

Nun liegen deine Blog-Files alle hier als Markdown-Dateien und werden beim Bauen (Schritt 5) automatisch zu HTML-Seiten:

src/
├── content/
│   └── blog/
│       ├── mein-erster-artikel.md
│       ├── zweiter-artikel.md
│       └── ...
└── pages/
    └── blog/
        ├── index.astro        # Blog-Übersicht
        └── [slug].astro       # Dynamische Detailseite

So sieht das aus:

Wie erstelle ich Content? Genau so wie diesen Artikel hier: Ich schreibe stichpunktartig mit angefangenen Sätzen und vorgegebener Struktur eine Markdown-Datei. Dann sage ich der KI:

1. Mach Empfehlungen zur Verbesserung der Struktur. Ergänze fehlende Punkte.
2. Dann formuliere meinen Text als ausführlichen Blogartikel aus. Nutze Aufzählungen, Bilder, Tabellen und Co. wo möglich zur Verbesserung der Lesbarkeit.

5. Website online stellen (~15 Min)

Am allereinfachsten baust du die gesamten Files so:

npx astro build

Und ziehst dir nur noch die Files alle manuell auf einen beliebigen 5-Euro-Webserver per FTP.

Wichtig: Jedes Mal wenn du lokal Änderungen machst, musst du neu bauen und neu hochladen.

Fazit

Was haben wir erreicht?

• Eine individuelle, schnelle Website - kein Baukasten-Einheitsbrei
• SEO-optimiert und mit 100/100 PageSpeed Score
• Einen Blog, den du ohne Codekenntnisse pflegen kannst
• Alles in unter 4 Stunden

Das Ergebnis ist diese Website - klick dich durch! Ich bin natürlich kein Sportverein ;)

Meine persönliche Empfehlung: Auch wenn die grafischen Tools wie Cursor oder Claude Desktop einsteigerfreundlicher wirken: Ich rate zum Terminal-Tool (Claude Code). Es ist schneller, stabiler und gibt dir mehr Kontrolle. Nach ein paar Minuten Eingewöhnung fühlt es sich ganz natürlich an, und die Ergebnisse sind deutlich besser.

Für größere Projekte - mit professionellem Design, SEO-Konzept und individueller Entwicklung - schau bei meiner Agentur vorbei.