Σε αυτόν τον οδηγό θα σας δείξουμε πώς να εξάγετε την ιστοσελίδα σας από το Lovable και να τη φιλοξενήσετε στην Polar55.
Στην Polar55 μπορείτε να χρησιμοποιήσετε Node.js, το οποίο είναι απαραίτητο για να λειτουργεί σωστά η ιστοσελίδα σας από το Lovable.
Το Lovable είναι ένα πολύ εύκολο εργαλείο για τη δημιουργία απλών ιστοσελίδων και μπορείτε γρήγορα να δημιουργήσετε μια όμορφη ιστοσελίδα σε σύντομο χρονικό διάστημα. Δυστυχώς, το Lovable είναι αρκετά ακριβό, γι’ αυτό πολλοί χρήστες προτιμούν να φιλοξενούν την ιστοσελίδα τους σε άλλον πάροχο αντί απευθείας μέσω του Lovable.
Σε αυτόν τον οδηγό θα σας δείξουμε λοιπόν πώς να εξάγετε γρήγορα την ιστοσελίδα σας από το Lovable και να τη θέσετε σε λειτουργία μαζί μας.
Είναι σημαντικό να σημειωθεί ότι αυτός ο οδηγός λειτουργεί μόνο για σχετικά απλές ιστοσελίδες. Για παράδειγμα, αν έχετε backend συνδεδεμένο με την ιστοσελίδα σας στο Lovable ή διαχειρίζεστε ηλεκτρονικό κατάστημα μέσω Lovable, αυτός ο οδηγός δεν θα λειτουργήσει.
Για να ακολουθήσετε αυτόν τον οδηγό θα χρειαστείτε:
- Μια ιστοσελίδα δημιουργημένη με το Lovable
- Έναν λογαριασμό GitHub (δωρεάν – δημιουργείται μέσα σε λίγα λεπτά)
- Έναν λογαριασμό hosting που υποστηρίζει Node.js – για παράδειγμα στην Polar55
Δείτε επίσης αυτό το βίντεο στο YouTube για μια πλήρη παρουσίαση σε πραγματικό χρόνο:
Συγχρονίστε την ιστοσελίδα σας στο Lovable με το GitHub
Ξεκινήστε συνδεόμενοι στον λογαριασμό σας στο Lovable και ανοίγοντας το project που θέλετε να εξάγετε.
Στη συνέχεια κάντε κλικ στο μικρό εικονίδιο GitHub επάνω δεξιά.
Εδώ θα χρειαστείτε έναν λογαριασμό GitHub.
Ευτυχώς, η δημιουργία λογαριασμού GitHub διαρκεί μόνο περίπου 2 λεπτά και είναι εντελώς δωρεάν.
Δημιουργήστε έναν λογαριασμό GitHub και βεβαιωθείτε ότι είστε συνδεδεμένοι.
Μόλις συνδεθείτε τόσο στο GitHub όσο και στο Lovable, το Lovable θα συνδεθεί αυτόματα με το GitHub και θα συγχρονίσει την ιστοσελίδα σας:
Κατεβάστε την ιστοσελίδα σας από το Lovable μέσω GitHub
Η ιστοσελίδα σας έχει πλέον συγχρονιστεί/εξαχθεί στο GitHub και μπορείτε τώρα να την κατεβάσετε.
Μεταβείτε στο GitHub URL που εμφανίζεται κάτω από το “Clone Repository” και κατεβάστε την ιστοσελίδα σας ως αρχείο ZIP:
Ανεβάστε την ιστοσελίδα σας στον δικό σας λογαριασμό hosting
Τώρα έχετε ένα αρχείο ZIP που περιέχει την ιστοσελίδα σας από το Lovable.
Συνδεθείτε στον λογαριασμό σας στην Polar55, μεταβείτε στο cPanel και ανοίξτε το File Manager.
Ανεβάστε εδώ το αρχείο ZIP σας.
- Αν η ιστοσελίδα πρέπει να λειτουργεί στο κύριο domain σας, ανεβάστε το ZIP αρχείο στο public_html
- Αν η ιστοσελίδα πρέπει να λειτουργεί σε άλλο domain, ανεβάστε το ZIP αρχείο στον φάκελο με το ίδιο όνομα όπως το domain.
Μόλις το ZIP αρχείο ανέβει, αποσυμπιέστε το κάνοντας δεξί κλικ στο αρχείο και επιλέγοντας “unzip”:
Τώρα θα εμφανιστεί ένας φάκελος με το όνομα του ZIP αρχείου σας, για παράδειγμα “captivating-captures-main” (ανάλογα με το όνομα του GitHub repository σας)
-> Μετονομάστε τον φάκελο σε “source”
Η ιστοσελίδα σας έχει πλέον αποσυμπιεστεί και βρίσκεται μέσα στον φάκελο “source”.
Συνδέστε το Lovable με το Node.js
Τώρα επιστρέψτε στο cPanel και βρείτε το Node.js.
Εδώ πρέπει να δημιουργήσετε μια νέα εφαρμογή.
Στο “Application root” εισάγετε “public_html/source” – αν η ιστοσελίδα πρέπει να λειτουργεί σε άλλο domain αντί για το κύριο domain σας, εισάγετε “τοdomainσας.gr/source”
Στο “Application URL” ορίστε το domain στο οποίο θα λειτουργεί η ιστοσελίδα.
Στη συνέχεια δημιουργήστε την εφαρμογή.
Ενεργοποιήστε την ιστοσελίδα σας στο Lovable
Για να ενεργοποιήσετε την ιστοσελίδα σας στο Lovable, ανοίξτε το terminal στο cPanel και εκτελέστε τις ακόλουθες εντολές:
node -v pwd npm install --include=dev ./node_modules/.bin/vite build
Αυτό θα δημιουργήσει την ιστοσελίδα σας από το Lovable στον λογαριασμό hosting σας.
Μόλις ολοκληρωθεί η διαδικασία, θα υπάρχει ένας φάκελος μέσα στο /source με όνομα dist, δηλαδή θα βρίσκεται στο /source/dist/
Μετακινήστε τα αρχεία από τον φάκελο dist ώστε να εμφανιστεί η ιστοσελίδα σας
Ξεκινήστε ανοίγοντας ξανά το File Manager.
- Μεταβείτε στον φάκελο source και έπειτα στον φάκελο dist.
- Επιλέξτε όλα τα αρχεία – μπορείτε να χρησιμοποιήσετε τη λειτουργία “Select all” στο File Manager
- Κάντε δεξί κλικ στα αρχεία σας και επιλέξτε “move”
- Αλλάξτε για παράδειγμα το public_html/source/dist/ σε public_html/ όπως φαίνεται παρακάτω
Αλλάξτε σε ->
Τώρα κάντε κλικ στο “Move Files”
Και αυτό ήταν! Η ιστοσελίδα σας από το Lovable θα πρέπει τώρα να είναι ορατή στο domain σας που φιλοξενείται από τον πάροχό σας.
Θυμηθείτε ότι πρέπει να ενημερώσετε τους nameservers του domain σας ώστε να δείχνουν στον πάροχο hosting σας αντί στο Lovable. Διαφορετικά, η ιστοσελίδα θα συνεχίσει να εμφανίζεται μέσω του Lovable.
Τώρα μπορείτε να παγώσετε ή να ακυρώσετε πλήρως τη συνδρομή σας στο Lovable ώστε να πληρώνετε hosting μόνο σε ένα μέρος.
Αν θέλετε να κάνετε αλλαγές στην ιστοσελίδα σας στο μέλλον, μπορείτε απλώς να συνδεθείτε ξανά στο Lovable και να το επανασυνδέσετε με τον GitHub λογαριασμό σας. Έτσι μπορείτε να συνεχίσετε να εργάζεστε στην ιστοσελίδα, να την εξάγετε ξανά και να την ανεβάσετε πίσω στον δικό σας hosting λογαριασμό όταν ολοκληρώσετε.