In dieser Anleitung zeigen wir dir, wie du deine Lovable-Website exportierst und bei Polar55 hostest.
Bei Polar55 kannst du Node.js verwenden, was notwendig ist, damit deine Lovable-Website korrekt funktioniert.
Lovable ist ein sehr einfaches Tool zum Erstellen einfacher Websites, und du kannst in kurzer Zeit schnell eine schöne Website erstellen. Leider ist Lovable ziemlich teuer, weshalb viele Nutzer ihre Website lieber bei einem anderen Anbieter hosten, anstatt direkt über Lovable.
In dieser Anleitung zeigen wir dir deshalb, wie du deine Lovable-Website schnell exportierst und bei uns zum Laufen bringst.
Wichtig zu beachten ist, dass diese Anleitung nur für relativ einfache Websites funktioniert. Wenn du beispielsweise ein Backend mit deiner Lovable-Website verbunden hast oder einen Online-Shop über Lovable betreibst, funktioniert diese Anleitung nicht.
Um dieser Anleitung zu folgen, benötigst du:
- Eine mit Lovable erstellte Website
- Ein GitHub-Konto (kostenlos – in wenigen Minuten erstellt)
- Einen Hosting-Account mit Node.js-Unterstützung – zum Beispiel bei Polar55
Schauen Sie sich auch dieses YouTube-Video für eine vollständige Echtzeit-Anleitung an:
Synchronisiere deine Lovable-Website mit GitHub
Melde dich zunächst bei deinem Lovable-Konto an und öffne das Projekt, das du exportieren möchtest.
Klicke anschließend auf das kleine GitHub-Symbol oben rechts.
Hierfür benötigst du ein GitHub-Konto.
Glücklicherweise dauert die Erstellung eines GitHub-Kontos nur etwa 2 Minuten und ist völlig kostenlos.
Erstelle ein GitHub-Konto und stelle sicher, dass du eingeloggt bist.
Sobald du sowohl bei GitHub als auch bei Lovable eingeloggt bist, verbindet sich Lovable automatisch mit GitHub und synchronisiert deine Website:
Lade deine Lovable-Website von GitHub herunter
Deine Website wurde nun mit GitHub synchronisiert/exportiert und du kannst sie jetzt herunterladen.
Gehe zur GitHub-URL, die unter “Clone Repository” angezeigt wird, und lade deine Website als ZIP-Datei herunter:
Lade deine Website auf deinen eigenen Hosting-Account hoch
Du hast jetzt eine ZIP-Datei mit deiner Lovable-Website.
Melde dich bei deinem Polar55-Konto an, gehe zu cPanel und öffne den File Manager.
Lade hier deine ZIP-Datei hoch.
- Wenn die Website auf deiner Hauptdomain laufen soll, lade die ZIP-Datei in public_html hoch
- Wenn die Website auf einer anderen Domain laufen soll, lade die ZIP-Datei in den Ordner mit dem gleichen Namen wie die Domain hoch.
Sobald die ZIP-Datei hochgeladen wurde, entpacke sie, indem du mit der rechten Maustaste auf die Datei klickst und “unzip” auswählst:
Du erhältst nun einen Ordner mit dem Namen deiner ZIP-Datei, zum Beispiel “captivating-captures-main” (abhängig vom Namen deines GitHub-Repositories)
-> Benenne den Ordner in “source” um
Deine Website ist jetzt entpackt und befindet sich im Ordner “source”.
Verbinde Lovable mit Node.js
Gehe nun zurück zu cPanel und suche nach Node.js.
Hier musst du eine neue Anwendung erstellen.
Gib unter “Application root” folgendes ein: “public_html/source” – wenn die Website auf einer anderen Domain statt auf deiner Hauptdomain laufen soll, gib “ihredomain.at/source” ein
Unter “Application URL” gibst du die Domain an, auf der die Website laufen soll.
Erstelle anschließend die Anwendung.
Aktiviere deine Lovable-Website
Um deine Lovable-Website zu aktivieren, öffne das Terminal in cPanel und führe die folgenden Befehle aus:
node -v pwd npm install --include=dev ./node_modules/.bin/vite build
Dadurch wird deine Lovable-Website auf deinem Hosting-Account erstellt.
Sobald der Vorgang abgeschlossen ist, befindet sich im Ordner /source ein Ordner namens dist, also unter /source/dist/
Verschiebe die Dateien aus dem dist-Ordner, damit deine Website sichtbar wird
Öffne zunächst erneut den File Manager.
- Gehe in den source-Ordner und anschließend in den dist-Ordner.
- Markiere alle Dateien – du kannst dafür die Funktion “Select all” im File Manager verwenden
- Klicke mit der rechten Maustaste auf deine Dateien und wähle “move”
- Ändere zum Beispiel public_html/source/dist/ in public_html/, wie unten gezeigt
Ändere zu ->
Klicke jetzt auf “Move Files”
Und das war’s! Deine Lovable-Website sollte jetzt auf deiner Domain sichtbar sein, die bei deinem Hosting-Anbieter gehostet wird.
Denke daran, dass du die Nameserver deiner Domain aktualisieren musst, damit sie auf deinen Hosting-Anbieter statt auf Lovable zeigen. Andernfalls wird die Website weiterhin über Lovable angezeigt.
Du kannst jetzt dein Lovable-Abonnement pausieren oder vollständig kündigen, sodass du nur noch an einem Ort für Hosting bezahlst.
Wenn du in Zukunft Änderungen an deiner Website vornehmen möchtest, kannst du dich einfach wieder bei Lovable anmelden und die Verbindung zu deinem GitHub-Konto erneut herstellen. Dadurch kannst du weiter an der Website arbeiten, sie erneut exportieren und wieder auf deinen eigenen Hosting-Account hochladen, sobald du fertig bist.