Hosta din Lovable-webbplats på ditt eget webbhotell

I den här guiden visar vi hur du kan exportera din Lovable-webbplats och hosta den hos Polar55.

Hos Polar55 kan du köra Node.js, vilket krävs för att din Lovable-webbplats ska fungera korrekt.

Lovable är ett mycket enkelt verktyg för att bygga enkla webbplatser, och du kan snabbt skapa en snygg webbplats på kort tid. Tyvärr är Lovable ganska dyrt, så många användare föredrar att hosta sin webbplats hos en annan leverantör istället för direkt via Lovable.

I den här guiden visar vi därför hur du snabbt kan exportera din Lovable-webbplats och få den att fungera hos oss.

Det är viktigt att notera att den här guiden endast fungerar för relativt enkla webbplatser. Om du till exempel har en backend kopplad till din Lovable-webbplats eller driver en webbutik via Lovable, kommer den här guiden inte att fungera.

För att följa den här guiden behöver du:

  • En webbplats byggd med Lovable
  • Ett GitHub-konto (gratis – kan skapas på bara några minuter)
  • Ett hostingkonto som stöder Node.js – till exempel hos Polar55

Kolla in denna YouTube-video för en komplett genomgång i realtid:

Synkronisera din Lovable-webbplats med GitHub

Börja med att logga in på ditt Lovable-konto och öppna projektet som du vill exportera.

Klicka sedan på den lilla GitHub-ikonen uppe i högra hörnet.


Här behöver du ett GitHub-konto.

Som tur är tar det bara cirka 2 minuter att skapa ett GitHub-konto och det är helt gratis.

Skapa ett GitHub-konto och se till att du är inloggad.

När du är inloggad på både GitHub och Lovable kommer Lovable automatiskt att ansluta till GitHub och synkronisera din webbplats:

Ladda ner din Lovable-webbplats från GitHub

Din webbplats har nu synkroniserats/exporterats till GitHub och du kan nu ladda ner den.

Gå till GitHub-URL:en som visas under “Clone Repository” och ladda ner din webbplats som en ZIP-fil:

 

Ladda upp din webbplats till ditt eget hostingkonto

Du har nu en ZIP-fil som innehåller din Lovable-webbplats.

Logga in på ditt Polar55-konto, gå till cPanel och öppna File Manager.

Ladda upp din ZIP-fil här.

  • Om webbplatsen ska köras på din huvuddomän laddar du upp ZIP-filen till public_html
  • Om webbplatsen ska köras på en annan domän laddar du upp ZIP-filen till mappen med samma namn som domänen.

När ZIP-filen har laddats upp packar du upp den genom att högerklicka på filen och välja “unzip”:


Du kommer nu att få en mapp som är döpt efter din ZIP-fil, till exempel “captivating-captures-main” (beroende på namnet på ditt GitHub-repository)

-> Byt namn på mappen till “source”

Din webbplats är nu uppackad och finns i mappen “source”.

Anslut Lovable till Node.js

Gå nu tillbaka till cPanel och hitta Node.js.

Här behöver du skapa en ny applikation.

Under “Application root” skriver du “public_html/source” – om webbplatsen ska köras på en annan domän istället för din huvuddomän skriver du “dindomän.se/source”

Under “Application URL” anger du den domän där webbplatsen ska köras.

Skapa sedan applikationen.

Aktivera din Lovable-webbplats

För att aktivera din Lovable-webbplats öppnar du terminalen i cPanel och kör följande kommandon:

node -v
pwd
npm install --include=dev
./node_modules/.bin/vite build

Detta kommer att bygga din Lovable-webbplats på ditt hostingkonto.

När processen är klar kommer det att finnas en mapp i /source som heter dist, vilket betyder att den kommer att ligga på /source/dist/

Flytta filerna från dist-mappen så att din webbplats blir synlig

Börja med att öppna File Manager igen.

  • Gå in i source-mappen och sedan in i dist-mappen.
  • Markera alla filer – du kan använda funktionen “Select all” i File Manager
  • Högerklicka på filerna och välj “move”
  • Ändra till exempel public_html/source/dist/ till public_html/ enligt exemplet nedan

Ändra till ->


Klicka nu på “Move Files”

Och det var allt! Din Lovable-webbplats bör nu vara synlig på din domän hos din hostingleverantör.

Kom ihåg att du måste uppdatera namnservrarna för din domän så att de pekar på din hostingleverantör istället för Lovable. Annars kommer webbplatsen fortfarande att visas via Lovable.

Du kan nu pausa eller helt avsluta ditt Lovable-abonnemang så att du bara betalar för hosting på ett ställe.

Om du vill göra ändringar på din webbplats i framtiden kan du helt enkelt logga in på Lovable igen och återansluta det till ditt GitHub-konto. På så sätt kan du fortsätta arbeta på webbplatsen, exportera den igen och ladda upp den tillbaka till ditt eget hostingkonto när du är klar.

Så här hostar du din Lovable-webbplats på ditt eget webbhotellkonto