Migrate from Vite to Next.js 15 with SSR
- Replace Vite + React Router with Next.js 15 App Router - Implement i18n with next-intl (URL-based: /de, /en, /sr) - Add SSR/SSG for all pages (48 static pages generated) - Setup Supabase SSR client for auth - Migrate all pages: Home, About, Portfolio, Blog, Contact, Login, Dashboard, Imprint, Privacy, Terms - Add Docker support with standalone output - Replace i18next with next-intl JSON translations - Use next/image for optimized images Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.5
@@ -0,0 +1,168 @@
|
||||
---
|
||||
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>
|
||||
Reference in New Issue
Block a user