Tutorials

How To Host Your LOVABLE Website on Hostinger! 🚀

Melden

Hier ist dein ultimatives Tutorial, um deine mit Lovable erstellte Website auf Hostinger zu veröffentlichen. Wir nutzen den modernen VibeCoding-Workflow, bei dem Schnelligkeit und Intuition im Vordergrund stehen.

Der ultimative Guide für VibeCoder: Von der Vision zum Live-Link

Du hast deine App oder Website mit Lovable per Chat-Befehl erstellt („VibeCoding“) und sie sieht fantastisch aus. Jetzt ist es an der Zeit, sie der Welt auf deinem eigenen Hosting-Paket von Hostinger zu zeigen.

Schritt 1: Das Projekt in Lovable vorbereiten

Bevor wir zu Hostinger umziehen, müssen wir den Code aus der Lovable-Cloud „greifbar“ machen.

  1. GitHub Connection: Klicke in deinem Lovable-Projekt oben rechts auf den Button "Share" oder direkt auf das GitHub-Icon.
  2. Repository erstellen: Verbinde dein Projekt mit einem GitHub-Repository. Lovable wird den Code automatisch dorthin pushen.
  3. Build prüfen: Lovable-Projekte basieren meistens auf Vite und React. Das bedeutet, wir brauchen später die statischen Dateien aus dem dist-Ordner.

Schritt 2: Hostinger vorbereiten (hPanel)

  1. Logge dich in dein Hostinger hPanel ein.
  2. Gehe zu Websites -> Website erstellen oder übertragen.
  3. Wähle „Leere Website erstellen“ und wähle deinen Domainnamen aus.
  4. Stelle sicher, dass dein Hosting-Plan (z. B. Premium Shared Hosting) aktiv ist.

Schritt 3: Deployment-Strategie (Wähle deinen Weg)

Es gibt zwei Wege, deine Lovable-Site zu Hostinger zu bringen.

Methode A: Der manuelle Weg (Schnell für Anfänger)

  1. Gehe in Lovable/GitHub und lade dein Projekt als ZIP-Datei herunter.
  2. Öffne deinen Terminal und tippe npm install und danach npm run build.
  3. Es entsteht ein Ordner namens dist.
  4. Gehe im Hostinger hPanel zum Dateimanager.
  5. Lade den Inhalt des dist-Ordners direkt in das Verzeichnis public_html hoch.

Methode B: Der VibeCoding-Pro-Weg (GitHub Integration)

Dies ist der beste Weg, wenn du deine Seite später mit Lovable weiter updaten willst:

  1. Gehe im Hostinger hPanel auf Erweitert -> Git.
  2. Gib die Repository-URL deines Lovable-Projekts ein (z.B. https://github.com/deinname/dein-projekt.git).
  3. Wähle den Branch (meist main).
  4. Klicke auf Erstellen.
  5. Wichtig: Da Lovable-Apps kompiliert werden müssen, musst du entweder eine GitHub Action nutzen, die den Build in einen deploy-Branch schiebt, oder du nutzt das manuelle Hochladen des dist-Ordners (siehe Methode A).

Schritt 4: Die SPA-Konfiguration (WICHTIG!)

Da Lovable-Websites oft Single Page Applications (SPA) sind, funktionieren Unterseiten (wie /about) nach dem ersten Refresh oft nicht mehr (404 Fehler). So fixst du das auf Hostinger:

  1. Öffne den Dateimanager in Hostinger.
  2. Erstelle im Ordner public_html eine neue Datei namens .htaccess.
  3. Füge diesen Code ein:
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
  1. Speichern. Jetzt weiß Hostinger, dass alle Anfragen an die index.html geleitet werden sollen, damit React das Routing übernimmt.

Schritt 5: SSL und Checkup

  1. Aktiviere das kostenlose SSL-Zertifikat im Hostinger Dashboard, damit deine Seite über https erreichbar ist.
  2. Prüfe die Website im Browser.
  3. Vibe-Check: Funktioniert alles? Animationen flüssig? Mobile Ansicht korrekt?

Fazit: LovableToHostinger

VibeCoding bedeutet, dass wir uns nicht mit komplizierter Server-Konfiguration aufhalten wollen. Durch die Kombination von Lovable (für das Design/Coding) und Hostinger (für stabiles Hosting) hast du einen Workflow, der professionell und blitzschnell ist.

Pro-Tipp: Wenn du Änderungen in Lovable machst, pushe sie einfach zu GitHub, ziehe den neuen Build auf deinem lokalen Rechner und lade den neuen dist-Inhalt bei Hostinger hoch. Fertig!

Happy VibeCoding! 🎨💻

0