---
slug: "website-mit-ki"
title: "Eigene Website mit KI bauen: Von Null zur fertigen Seite"
description: "Schritt-für-Schritt Anleitung zum Aufbau einer professionellen Website mit Claude Code - DSGVO-konform, mehrsprachig, mit Portfolio und Blog"
excerpt: "Wie du in unter einer Stunde eine komplette Website erstellst - ohne eine einzige Zeile Code selbst zu schreiben."
date: "2024-12-13"
category: "KI & Automatisierung"
coverImage: "/images/projects/website-mit-ki/cover.jpg"
client: "Eigenprojekt"
duration: "30 Minuten"
url: ""
repository: ""
documentation: ""
published: true
featured: true
technologies: ["Claude Code", "React", "TypeScript", "Vercel", "GitHub", "Vite"]
tags: ["KI", "Website", "No-Code", "Tutorial", "Claude Code", "Vercel"]
videoUrl: "https://www.tella.tv/video/baue-deine-website-noch-heute-mit-ki-8f7v"
---

<div style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden', marginBottom: '2rem', borderRadius: '12px' }}>
  <iframe
    src="https://www.tella.tv/video/baue-deine-website-noch-heute-mit-ki-8f7v/embed?b=0&title=1&a=1&loop=0&autoPlay=false&t=0&muted=0&wt=0"
    style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: 'none' }}
    allowFullScreen
    loading="lazy"
  />
</div>

<div style={{ margin: "20px 0", padding: "20px", backgroundColor: "#3d3d3d", borderRadius: "8px" }}>
  <p style={{ fontSize: "1.1rem", lineHeight: "1.6" }}>
    Eine professionelle Website ohne Programmierkenntnisse? Mit KI ist das heute möglich. Dieses Tutorial zeigt den kompletten Prozess - von der leeren Projektmappe zur fertigen, gehosteten Website.
  </p>
</div>

<hr style={{ margin: "40px 0", border: "none", height: "1px", backgroundColor: "#ddd" }} />

<h2 style={{ marginBottom: "20px" }}>Was wird gebaut?</h2>
<div style={{ marginBottom: "30px" }}>
  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
    Die fertige Website enthält alle wichtigen Features einer modernen Webpräsenz:
  </p>
  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
    <li>DSGVO-konforme Implementierung mit Cookie-Banner</li>
    <li>Mehrsprachigkeit (Deutsch, Englisch, weitere möglich)</li>
    <li>Über-mich-Seite für persönliche Informationen</li>
    <li>Portfolio-Seite mit interaktiven Projekten</li>
    <li>Blog-Funktionalität für Blogposts</li>
    <li>SEO-Optimierung für bessere Google-Rankings</li>
    <li>Kontaktformular für potenzielle Kunden</li>
    <li>Mobile-optimiertes, responsives Design</li>
  </ul>
</div>

<h2 style={{ marginBottom: "20px" }}>Die Vorteile</h2>
<div style={{ marginBottom: "30px" }}>
  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Bessere Sichtbarkeit</h3>
  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
    Durch SEO-Optimierung erscheint die Website direkt unter den ersten Google-Treffern für relevante Suchbegriffe - etwa bei der Suche nach dem eigenen Namen.
  </p>

  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Minimale Kosten</h3>
  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
    Im Gegensatz zu Baukastensystemen wie Wix, WordPress oder Webflow fallen keine monatlichen Gebühren an. Die einzigen Kosten: Ein KI-Abonnement und optional eine eigene Domain.
  </p>

  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>Volle Kontrolle</h3>
  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
    Das Projekt liegt versioniert auf GitHub und wird über Vercel kostenlos gehostet. Keine Abhängigkeit von Plattformen, die ihre Preise ändern oder Features einschränken können.
  </p>
</div>

<h2 style={{ marginBottom: "20px" }}>Die Werkzeuge</h2>
<div style={{ marginBottom: "30px" }}>
  <table style={{ width: "100%", borderCollapse: "collapse" }}>
    <thead>
      <tr style={{ borderBottom: "2px solid #ddd" }}>
        <th style={{ textAlign: "left", padding: "10px" }}>Tool</th>
        <th style={{ textAlign: "left", padding: "10px" }}>Zweck</th>
        <th style={{ textAlign: "left", padding: "10px" }}>Kosten</th>
      </tr>
    </thead>
    <tbody>
      <tr style={{ borderBottom: "1px solid #ddd" }}>
        <td style={{ padding: "10px" }}><strong>Claude Code</strong></td>
        <td style={{ padding: "10px" }}>KI für die komplette Entwicklung</td>
        <td style={{ padding: "10px" }}>Pro-Plan empfohlen</td>
      </tr>
      <tr style={{ borderBottom: "1px solid #ddd" }}>
        <td style={{ padding: "10px" }}><strong>GitHub</strong></td>
        <td style={{ padding: "10px" }}>Versionierung des Codes</td>
        <td style={{ padding: "10px" }}>Kostenlos</td>
      </tr>
      <tr style={{ borderBottom: "1px solid #ddd" }}>
        <td style={{ padding: "10px" }}><strong>Vercel</strong></td>
        <td style={{ padding: "10px" }}>Hosting und Deployment</td>
        <td style={{ padding: "10px" }}>Kostenlos</td>
      </tr>
      <tr style={{ borderBottom: "1px solid #ddd" }}>
        <td style={{ padding: "10px" }}><strong>Domain</strong></td>
        <td style={{ padding: "10px" }}>Eigene URL</td>
        <td style={{ padding: "10px" }}>Optional (~10-15EUR/Jahr)</td>
      </tr>
    </tbody>
  </table>
</div>

<h2 style={{ marginBottom: "20px" }}>Der Workflow</h2>
<div style={{ marginBottom: "30px" }}>
  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>1. Vorbereitung</h3>
  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
    <li>GitHub-Account erstellen und neue Repository anlegen</li>
    <li>Vercel-Account erstellen für späteres Hosting</li>
    <li>Lokalen Projektordner auf dem Rechner anlegen</li>
    <li>Relevante Dokumente bereitstellen (Lebenslauf, Anschreiben, etc.)</li>
  </ul>

  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>2. Entwicklung mit Claude Code</h3>
  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
    <li>Claude Code öffnen und Projektordner auswählen</li>
    <li>Prompt mit gewünschten Features eingeben</li>
    <li>KI arbeitet autonom durch alle Dateien und erstellt die Website</li>
    <li>Berechtigungen bei Nachfrage erteilen</li>
  </ul>

  <h3 style={{ marginTop: "20px", marginBottom: "15px" }}>3. Deployment</h3>
  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
    <li>Projekt auf GitHub pushen</li>
    <li>In Vercel das GitHub-Repository importieren</li>
    <li>Website wird automatisch gebaut und deployed</li>
    <li>Bei Build-Fehlern: Logs kopieren und Claude zur Fehlerbehebung nutzen</li>
  </ul>
</div>

<h2 style={{ marginBottom: "20px" }}>Design-Inspiration</h2>
<div style={{ marginBottom: "30px" }}>
  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
    Für individuelle Designs gibt es mehrere Ansätze:
  </p>
  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
    <li><strong>Awwwards:</strong> Preisgekrönte Websites als Inspiration</li>
    <li><strong>Envato Elements:</strong> Website-Templates als Designvorlage - Screenshot anfertigen und Claude zeigen</li>
    <li><strong>Individuelle Anpassungen:</strong> Farben, Bilder und Elemente per Chat-Anweisung ändern</li>
  </ul>
</div>

<h2 style={{ marginBottom: "20px" }}>Änderungen vornehmen</h2>
<div style={{ marginBottom: "30px" }}>
  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
    Nach dem initialen Setup können jederzeit Änderungen vorgenommen werden:
  </p>
  <ul style={{ marginLeft: "20px", fontSize: "1rem", lineHeight: "1.6" }}>
    <li>Bilder austauschen durch Anhängen in Claude Code</li>
    <li>Texte und Inhalte per Chat-Anweisung ändern</li>
    <li>Neue Seiten oder Funktionen hinzufügen</li>
    <li>Nach jeder Änderung: Push zu GitHub, automatisches Redeployment auf Vercel</li>
  </ul>
</div>

<h2 style={{ marginBottom: "20px" }}>Fazit</h2>
<div style={{ marginBottom: "30px" }}>
  <p style={{ fontSize: "1rem", lineHeight: "1.6" }}>
    Eine komplette, professionelle Website lässt sich heute in unter einer Stunde aufbauen - ohne eine einzige Zeile Code selbst zu schreiben. Die Kombination aus KI-Entwicklung, kostenlosem Hosting und Versionierung macht diese Lösung nicht nur für Entwickler interessant, sondern für alle, die eine professionelle Webpräsenz benötigen: Selbstständige, Unternehmen oder Projekte.
  </p>
  <p style={{ fontSize: "1rem", lineHeight: "1.6", marginTop: "15px" }}>
    Der Kostenfaktor ist minimal, die Kontrolle maximal - und das Ergebnis kann sich mit jeder professionell entwickelten Website messen.
  </p>
</div>