Hostujte svoju Lovable webstránku na vlastnom webhostingu

V tomto návode vám ukážeme, ako exportovať vašu Lovable webstránku a hostovať ju na Polar55.

Na Polar55 môžete používať Node.js, ktorý je potrebný na správne fungovanie vašej Lovable stránky.

Lovable je veľmi jednoduchý nástroj na vytváranie jednoduchých webstránok a za krátky čas si môžete vytvoriť peknú stránku. Bohužiaľ, Lovable je pomerne drahý, takže mnoho používateľov radšej hostuje svoju stránku u iného poskytovateľa namiesto priameho hostovania cez Lovable.

V tomto návode vám preto ukážeme, ako rýchlo exportovať vašu Lovable webstránku a sprevádzkovať ju u nás.

Je dôležité poznamenať, že tento návod funguje iba pre relatívne jednoduché webstránky. Ak máte napríklad backend pripojený k vašej Lovable stránke alebo prevádzkujete e-shop cez Lovable, tento návod nebude fungovať.

Na použitie tohto návodu budete potrebovať:

  • Webstránku vytvorenú pomocou Lovable
  • GitHub účet (zadarmo – vytvorenie trvá len pár minút)
  • Hostingový účet podporujúci Node.js – napríklad na Polar55

Pozrite si tiež toto YouTube video pre kompletný návod v reálnom čase:

Synchronizujte svoju Lovable stránku s GitHubom

Začnite tým, že sa prihlásite do svojho Lovable účtu a otvoríte projekt, ktorý chcete exportovať.

Potom kliknite na malú GitHub ikonu v pravom hornom rohu.


Tu budete potrebovať GitHub účet.

Našťastie vytvorenie GitHub účtu trvá iba približne 2 minúty a je úplne zadarmo.

Vytvorte si GitHub účet a uistite sa, že ste prihlásení.

Keď budete prihlásení v GitHube aj Lovable, Lovable sa automaticky pripojí ku GitHubu a synchronizuje vašu stránku:

Stiahnite si svoju Lovable stránku z GitHubu

Vaša stránka bola teraz synchronizovaná/exportovaná do GitHubu a môžete si ju stiahnuť.

Prejdite na GitHub URL adresu zobrazenú pod „Clone Repository“ a stiahnite si svoju stránku ako ZIP súbor:

 

Nahrajte svoju stránku na vlastný hostingový účet

Teraz máte ZIP súbor obsahujúci vašu Lovable stránku.

Prihláste sa do svojho Polar55 účtu, prejdite do cPanelu a otvorte File Manager.

Sem nahrajte svoj ZIP súbor.

  • Ak má stránka bežať na vašej hlavnej doméne, nahrajte ZIP súbor do public_html
  • Ak má stránka bežať na inej doméne, nahrajte ZIP súbor do priečinka s rovnakým názvom ako doména.

Po nahratí ZIP súboru ho rozbaľte kliknutím pravým tlačidlom myši na súbor a výberom možnosti „unzip“:


Teraz získate priečinok pomenovaný podľa vášho ZIP súboru, napríklad „captivating-captures-main“ (v závislosti od názvu vášho GitHub repozitára)

-> Premenujte priečinok na „source“

Vaša stránka je teraz rozbalená a nachádza sa v priečinku „source“.

Prepojte Lovable s Node.js

Teraz sa vráťte do cPanelu a nájdite Node.js.

Tu musíte vytvoriť novú aplikáciu.

Do poľa „Application root“ zadajte „public_html/source“ – ak má webstránka bežať na inej doméne namiesto hlavnej domény, zadajte „vasadomena.sk/source“

Do poľa „Application URL“ zadajte doménu, na ktorej má webstránka fungovať.

Potom vytvorte aplikáciu.

Aktivujte svoju Lovable webstránku

Ak chcete aktivovať svoju Lovable stránku, otvorte terminál v cPaneli a spustite nasledujúce príkazy:

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

Týmto sa vytvorí vaša Lovable webstránka na hostingovom účte.

Po dokončení procesu bude vo vnútri priečinka /source priečinok s názvom dist, čo znamená, že sa bude nachádzať na adrese /source/dist/

Presuňte súbory z priečinka dist, aby sa vaša webstránka zobrazila

Začnite tým, že znovu otvoríte File Manager.

  • Prejdite do priečinka source a potom do priečinka dist.
  • Vyberte všetky súbory – môžete použiť funkciu „Select all“ vo File Manageri
  • Kliknite pravým tlačidlom myši na súbory a vyberte „move“
  • Zmeňte napríklad public_html/source/dist/ na public_html/ podľa obrázka nižšie

Zmeňte na ->


Teraz kliknite na „Move Files“

A to je všetko! Vaša Lovable webstránka by teraz mala byť viditeľná na vašej doméne hostovanej u vášho poskytovateľa.

Nezabudnite, že musíte aktualizovať nameservery svojej domény tak, aby smerovali na váš hosting namiesto Lovable. Inak sa stránka bude stále zobrazovať cez Lovable.

Teraz môžete pozastaviť alebo úplne zrušiť svoje Lovable predplatné, aby ste platili za hosting iba na jednom mieste.

Ak budete chcieť v budúcnosti vykonať zmeny na svojej webstránke, jednoducho sa znovu prihláste do Lovable a opätovne ho prepojte so svojím GitHub účtom. Takto môžete pokračovať v práci na stránke, znovu ju exportovať a nahrať späť na svoj hostingový účet, keď budete hotoví.

Ako hostovať svoju Lovable webstránku na vlastnom webhostingu