Hostaa Lovable-verkkosivustosi omalla webhotellillasi

Tässä oppaassa näytämme, kuinka voit viedä Lovable-verkkosivustosi ja hostata sen Polar55:llä.

Polar55:llä voit käyttää Node.js:ää, jota tarvitaan, jotta Lovable-verkkosivustosi toimii oikein.

Lovable on erittäin helppokäyttöinen työkalu yksinkertaisten verkkosivustojen rakentamiseen, ja voit luoda nopeasti näyttävän verkkosivuston lyhyessä ajassa. Valitettavasti Lovable on melko kallis, minkä vuoksi monet käyttäjät haluavat hostata sivustonsa toisen palveluntarjoajan kautta sen sijaan, että käyttäisivät suoraan Lovablea.

Tässä oppaassa näytämme siis, kuinka voit nopeasti viedä Lovable-verkkosivustosi ja saada sen toimimaan אצלנו.

On tärkeää huomata, että tämä opas toimii vain suhteellisen yksinkertaisille verkkosivustoille. Jos sinulla on esimerkiksi backend yhdistettynä Lovable-verkkosivustoosi tai pyörität verkkokauppaa Lovablen kautta, tämä opas ei toimi.

Tämän oppaan seuraamiseen tarvitset:

  • Lovablella rakennetun verkkosivuston
  • GitHub-tilin (ilmainen – voidaan luoda muutamassa minuutissa)
  • Hosting-tilin, joka tukee Node.js:ää – esimerkiksi Polar55:llä

Katso myös tämä YouTube-video saadaksesi täydellisen reaaliaikaisen esittelyn:

Synkronoi Lovable-verkkosivustosi GitHubiin

Aloita kirjautumalla Lovable-tilillesi ja avaamalla projekti, jonka haluat viedä.

Napsauta sitten oikeassa yläkulmassa olevaa pientä GitHub-kuvaketta.


Tässä vaiheessa tarvitset GitHub-tilin.

Onneksi GitHub-tilin luominen vie vain noin 2 minuuttia ja on täysin ilmaista.

Luo GitHub-tili ja varmista, että olet kirjautunut sisään.

Kun olet kirjautunut sekä GitHubiin että Lovableen, Lovable yhdistyy automaattisesti GitHubiin ja synkronoi verkkosivustosi:

Lataa Lovable-verkkosivustosi GitHubista

Verkkosivustosi on nyt synkronoitu/viety GitHubiin ja voit nyt ladata sen.

Siirry GitHub-URL-osoitteeseen, joka näkyy kohdassa ”Clone Repository”, ja lataa verkkosivustosi ZIP-tiedostona:

 

Lataa verkkosivustosi omalle hosting-tilillesi

Sinulla on nyt ZIP-tiedosto, joka sisältää Lovable-verkkosivustosi.

Kirjaudu Polar55-tilillesi, siirry cPaneliin ja avaa File Manager.

Lataa ZIP-tiedostosi tänne.

  • Jos verkkosivuston tulee toimia päädomainillasi, lataa ZIP-tiedosto public_html-kansioon
  • Jos verkkosivuston tulee toimia toisella domainilla, lataa ZIP-tiedosto kansioon, jolla on sama nimi kuin domainilla.

Kun ZIP-tiedosto on ladattu, pura se napsauttamalla hiiren oikealla painikkeella tiedostoa ja valitsemalla ”unzip”:


Saat nyt kansion, jonka nimi on sama kuin ZIP-tiedostosi, esimerkiksi ”captivating-captures-main” (riippuen GitHub-repositoriosi nimestä)

-> Nimeä kansio uudelleen nimelle ”source”

Verkkosivustosi on nyt purettu ja sijaitsee ”source”-kansiossa.

Yhdistä Lovable Node.js:ään

Palaa nyt takaisin cPaneliin ja etsi Node.js.

Täällä sinun tulee luoda uusi sovellus.

Kirjoita kohtaan ”Application root” seuraava: ”public_html/source” – jos verkkosivuston tulee toimia toisella domainilla päädomainisi sijaan, kirjoita ”verkkotunnuksesi.fi/source”

Kirjoita kohtaan ”Application URL” domain, jolla verkkosivuston tulee toimia.

Luo tämän jälkeen sovellus.

Aktivoi Lovable-verkkosivustosi

Aktivoidaksesi Lovable-verkkosivustosi avaa terminaali cPanelissa ja suorita seuraavat komennot:

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

Tämä rakentaa Lovable-verkkosivustosi hosting-tililläsi.

Kun prosessi on valmis, /source-kansion sisälle ilmestyy kansio nimeltä dist, eli se sijaitsee osoitteessa /source/dist/

Siirrä tiedostot dist-kansiosta, jotta verkkosivustosi tulee näkyviin

Aloita avaamalla File Manager uudelleen.

  • Siirry source-kansioon ja sitten dist-kansioon.
  • Valitse kaikki tiedostot – voit käyttää ”Select all” -toimintoa File Managerissa
  • Napsauta tiedostoja hiiren oikealla painikkeella ja valitse ”move”
  • Muuta esimerkiksi public_html/source/dist/ muotoon public_html/ kuten alla näkyy

Muuta muotoon ->


Napsauta nyt ”Move Files”

Ja siinä kaikki! Lovable-verkkosivustosi pitäisi nyt näkyä domainillasi hosting-palveluntarjoajasi kautta.

Muista, että sinun täytyy päivittää domainisi nimipalvelimet osoittamaan hosting-palveluntarjoajaasi Lovablen sijaan. Muuten verkkosivusto näkyy edelleen Lovablen kautta.

Voit nyt keskeyttää tai peruuttaa Lovable-tilauksesi kokonaan, jotta maksat hostingista vain yhdessä paikassa.

Jos haluat tehdä muutoksia verkkosivustoosi tulevaisuudessa, voit yksinkertaisesti kirjautua takaisin Lovableen ja yhdistää sen uudelleen GitHub-tiliisi. Näin voit jatkaa verkkosivuston työstämistä, viedä sen uudelleen ja ladata sen takaisin omalle hosting-tilillesi, kun olet valmis.

Kuinka hostata Lovable-verkkosivustosi omalla webhotellillasi