Moderne Website in 5 Minuten erstellen und deployen

Inhaltsverzeichnis

• Schritt 1: Die Idee (Lovable)
• Schritt 2: Der Export (GitHub)
• Schritt 3: Das Deployment (lowcloud + Hetzner)

In diesem Tutorial lernst du Schritt für Schritt, wie du mit Lovable einfach eine Website erstellst und sie kostengünstig auf deutschen Servern mit lowcloud deployst. Am Ende hast du deine eigene Website mit einer Live-URL und automatischem SSL.

Früher war es kompliziert, eine eigene Website zu erstellen. Du brauchtest einen Designer, einen Entwickler, einen Server-Admin und ein umständliches CMS. Heute gibt es einen neuen, eleganten Ansatz, der das Beste aus allen Welten kombiniert: KI-gestützte Generierung, vollständige Code-Kontrolle und automatisiertes Deployment auf hochperformanter Infrastruktur.

Voraussetzungen: Was du brauchst

Keine Sorge, die Liste ist kurz und du hast wahrscheinlich schon das Meiste:

• Lovable: Ein KI-Builder, der deine Ideen in Code übersetzt.
• GitHub: Deine "Single Source of Truth", die deinen Code besitzt.
• lowcloud: Eine Cloud-Deployment-Plattform, die Git-Repositories mit Cloud-Servern verbindet und Deployments automatisiert.
• Hetzner: Ein deutscher Cloud-Hosting-Provider, der leistungsstarke und kostengünstige Server-Infrastruktur bietet. Wenn du ein Konto über unseren Link erstellst, erhältst du 20 € Startguthaben Hetzner

Von KI-Design zum Live-Server in 10 Minuten

Der Prozess ist in drei logische Phasen unterteilt, die nahtlos zusammenarbeiten: Erstellen (mit Lovable), Exportieren (zu Git) und Deployen (mit lowcloud). Diese Trennung macht Sinn, weil jede Phase ihre Stärken hat: Lovable für schnelle Ideenumsetzung, Git für vollständige Code-Kontrolle und lowcloud für automatisiertes, souveränes Hosting. So kombinierst du die Geschwindigkeit von KI-Tools mit der Freiheit von Open Source und Kontrolle über deine Infrastruktur.

Schritt 1: Die Idee (Lovable)

Mit Lovable kannst du deine Website-Idee schnell in Code verwandeln. Wie Lovable funktioniert, ist einfach: Du öffnest die Plattform und gibst entweder eine Beschreibung deiner Idee oder eine URL in das Chat-Eingabefeld ein. Lovable verarbeitet deine Eingabe und erstellt automatisch den entsprechenden Code. Du musst keine Programmiersprache beherrschen oder komplexe Einstellungen vornehmen, die KI übernimmt die technische Umsetzung für dich. Nach der Erstellung siehst du das Ergebnis direkt in deinem Browser und kannst bei Bedarf Anpassungen per Chat vornehmen.

Es gibt zwei Wege, eine Website zu erstellen:

1. Eine Idee generieren: Du beschreibst deine Website-Idee in natürlicher Sprache. Lovable kann dabei helfen, verschiedene Projekttypen zu erstellen: Landing Pages, SaaS-Anwendungen, Dashboards, E-Commerce-Seiten oder interaktive Web-Apps. Du kannst Design-Stil, Farben, Layout, Funktionalität und sogar spezifische Features beschreiben. Die KI generiert daraus ein komplettes, funktionales Projekt mit sauberem Code.

Beispiel-Prompt:

Erstelle eine moderne Landing Page für eine SaaS-App, die E-Mail-Marketing automatisiert.
Das Design sollte dunkel mit blauen Akzentfarben sein. Die Seite soll folgende Bereiche haben:
- Hero-Bereich mit Headline und CTA-Button
- Features-Bereich mit 3 Hauptfeatures
- Preis-Tabelle mit 3 Plänen
- Kundenstimmen
- Footer mit Links und Newsletter-Anmeldung
- Die Seite sollte responsiv sein und moderne Animationen verwenden.

2. Bestehendes kopieren: Du kannst eine URL einer Website eingeben, deren Design dir gefällt. Lovable analysiert die Seite, extrahiert Design und Struktur und erstellt daraus eine saubere Codebasis. Das ist besonders nützlich, wenn du ein spezifisches Design als Inspiration hast oder eine bestehende Seite als Ausgangspunkt nutzen möchtest. Du bekommst keinen kopierten Code, sondern eine saubere, moderne Implementierung mit denselben visuellen Elementen.

Beispiel-Prompt:

Kopiere das Design von dieser URL:
https://example.com/landing-page

Ich möchte:
- Das Hero-Design übernehmen
- Die Farbpalette beibehalten
- Die Navigation anpassen

Das Ergebnis ist kein "Website-Builder", in dem du gefangen bist. Das Ergebnis ist dein eigener Quellcode.

Dieses Beispiel zeigt eine kopierte Apple-Seite. Kleine Fehler können per Prompt korrigiert werden, aber das Gesamtergebnis ist bereits beeindruckend. Die Live-Vorschau zeigt die generierte Seite im Lovable-Editor. Links siehst du KI-Vorschläge für weitere Verbesserungen; rechts die Seitenvorschau. So kannst du iterativ am Projekt arbeiten und es Schritt für Schritt verfeinern.

Schritt 2: Der Export (GitHub)

Das ist der entscheidende Schritt. Sobald du mit deinem Design in Lovable zufrieden bist, exportierst du das Projekt. Der Export-Prozess ist einfach. Du verbindest dein GitHub-Konto mit Lovable und wählst aus, in welches Repository der Code gepusht werden soll.

Im ersten Schritt öffnest du den GitHub-Dialog und klickst auf "Connect GitHub", um dein Konto zu verbinden.

Im zweiten Schritt wählst du deine GitHub-Organisation und verbindest das Projekt. Lovable synchronisiert dann automatisch den Code in beide Richtungen.

Lovable erstellt automatisch eine saubere Projektstruktur mit allen notwendigen Dateien. Lovable "pusht" den gesamten Code direkt in ein Git-Repository deiner Wahl. Der Code ist als komplettes, funktionales Projekt strukturiert mit Build-Konfiguration und allen Quelldateien. Du kannst das Repository sofort klonen, lokal weiterentwickeln oder direkt deployen.

Ab diesem Moment gehört der Code zu 100% dir. Er ist nicht mehr in der Lovable-Plattform gefangen. Es ist jetzt ein Standard Next.js- oder React-Projekt, das jeder Entwickler versteht und weiterbearbeiten kann. Du hast volle Kontrolle: Du kannst den Code modifizieren, erweitern, in andere Tools importieren oder mit deinem Team teilen. Kein Vendor Lock-in, keine Einschränkungen.

Schritt 3: Das Deployment (lowcloud + Hetzner)

Jetzt, wo dein Code auf GitHub ist, soll er live gehen. Hier kommt lowcloud ins Spiel.

lowcloud ist eine Cloud-Deployment-Plattform, die speziell für Hosting-Provider wie Hetzner optimiert ist. Die Plattform verbindet dein Git-Repository mit Cloud-Servern und automatisiert den gesamten Deployment-Prozess. Du musst keine Server manuell konfigurieren oder CI/CD-Pipelines selbst einrichten, lowcloud übernimmt das alles für dich. Die Plattform erkennt automatisch dein Framework (z.B. Next.js, React oder andere), baut die Anwendung und deployt sie auf einem Server bei Hetzner. Zusätzlich kümmert sich lowcloud um SSL-Zertifikate, Domain-Management und automatische Updates.

Der Prozess ist einfach:

1. Git verbinden: Du verknüpfst dein GitHub-Konto und wählst das Repository aus, das von Lovable exportiert wurde.
2. Hetzner verbinden: Du verknüpfst dein Hetzner-Konto mit lowcloud. lowcloud erstellt und verwaltet dann in deinem Namen Server (VMs).
3. Deployen: lowcloud deployt direkt in dein Hetzner-Konto

lowcloud führt dich durch einen kurzen, strukturierten Prozess. Im ersten Schritt wählst du das Repository, also das GitHub-Repository, das von Lovable exportiert wurde. Im zweiten Schritt konfigurierst du die Build-Konfiguration. lowcloud erkennt automatisch dein Framework und schlägt die passenden Build-Einstellungen vor. Im dritten Schritt wählst du die Infrastruktur. Hier wählst du Hetzner Cloud und den Server-Standort, zum Beispiel Falkenstein in Deutschland. Im vierten Schritt stellst du die Verbindung her. Hier wird die Verbindung zwischen lowcloud und Hetzner über einen API-Token hergestellt. Im letzten Schritt siehst du nochmal eine Zusammenfassung aller Konfigurationen. Mit einem Klick auf "Complete Setup" startet das Deployment. Von jetzt an ist deine Website direkt unter einer Live-URL deployed. Du kannst natürlich auch anschließend deine eigene Domain mit lowcloud verknüpfen.

Fazit

In nur wenigen Minuten hast du eine vollständig funktionale Website erstellt, die von der Idee bis zum Live-Gang gegangen ist.

Mit Lovable erstellst du in Minuten, was sonst Tage oder Wochen dauert, während die KI die technische Umsetzung übernimmt. Durch den Export zu Git gehört der gesamte Code zu 100% dir und du hast jederzeit vollen Zugriff, kannst ihn modifizieren, erweitern oder mit deinem Team teilen, ohne Einschränkungen oder Vendor Lock-in. Deine Website läuft auf deutschen Servern bei Hetzner, ist DSGVO-konform und unterliegt europäischen Datenschutzbestimmungen. Keine Datenübertragung in Drittländer, keine rechtlichen Risiken, keine Abhängigkeiten von US-Hyperscalern. Jeder Git-Push wird automatisch mit einem Klick deployed, sodass du dich nie wieder um manuelle Server-Updates oder Deployment-Prozesse kümmern musst. Mit Hetzner hast du außerdem transparente Preise und volle Kontrolle über deine Serverkosten, ohne versteckte Gebühren oder Überraschungsrechnungen.

Das ist der "rote Faden" für moderne, effiziente Webentwicklung!