Το Claude σου φτιάχνει ένα ωραίο site σε χρόνο μηδέν. Το δύσκολο κομμάτι έρχεται μετά, όταν θέλεις να το βγάλεις σε πραγματικό domain, χωρίς να ανεβάζεις αρχεία με το χέρι κάθε φορά που κάνεις μια αλλαγή.
Αν δουλεύεις από Mac, η ροή είναι πιο καθαρή απ’ όσο νομίζεις, αρκεί να στήσεις σωστά το local setup, το GitHub, το hosting και, αν χρειάζεσαι φόρμες, μια δωρεάν βάση δεδομένων. Εκεί είναι όλο το ζουμί.
Τι να έχεις έτοιμο πριν πατήσεις το πρώτο prompt
Πριν μπεις στο Claude, θέλεις να έχεις έτοιμα τα βασικά. Αν λείπει έστω ένα κομμάτι, μετά θα χάνεις χρόνο σε μικρά errors που δεν έχουν σχέση με το site σου.
Τα εργαλεία που χρειάζεσαι είναι αυτά:
- Claude Desktop ή Claude Code
- Node.js, για να τρέχει σωστά το JavaScript locally
- Git και Homebrew, αν είσαι σε Mac
- GitHub account, για τα repository σου
- Hostinger account, για το live deployment
- Supabase account, αν θες φόρμες και αποθήκευση δεδομένων
Αν είσαι σε Windows, η λογική είναι ίδια, αλλά τα βήματα αλλάζουν λίγο. Εδώ μένουμε στο Mac, γιατί το flow είναι πιο απλό και σου γλιτώνει μπρος πίσω.
Αν θες να δεις πώς δένει ένα project με σωστό περιβάλλον φιλοξενίας, κράτα ως σημείο αναφοράς τις υπηρεσίες φιλοξενίας ιστοσελίδων. Αν το hosting δεν μιλάει σωστά με το project σου, μετά θα κυνηγάς προβλήματα που δεν έπρεπε να υπάρχουν εξαρχής.
Στήσε το project σωστά στο Claude
Ζήτα πρώτα το prompt, όχι τον κώδικα
Το πιο έξυπνο βήμα εδώ είναι να μη ζητήσεις κατευθείαν το τελικό site. Ζητάς πρώτα από το Claude να σου γράψει ένα καθαρό prompt για το Claude Code.
Στο παράδειγμα του βίντεο, το brief είναι για ένα real estate website με Next.js, premium αισθητική, μπλε, καφέ και λευκό, και elegant γραμματοσειρές. Δεν είναι τυχαίο που μπαίνει το Next.js από την αρχή. Σου κρατάει το project καθαρό, οργανωμένο και πιο γρήγορο.
Το design μπορεί να αλλάξει αργότερα. Η σωστή βάση, όμως, σου γλιτώνει τα μισά προβλήματα.
Όσο πιο καθαρά του μιλάς, τόσο πιο καθαρό θα σου βγάλει το αποτέλεσμα. Αν το κάνεις γενικά και αόριστα, θα πάρεις και εσύ ένα γενικά και αόριστα αποτέλεσμα.
Άνοιξε τον σωστό φάκελο και δώσε δικαιώματα
Μετά φτιάχνεις έναν φάκελο στην επιφάνεια εργασίας και εκεί βάζεις το project σου. Αν έχεις ήδη κάτι έτοιμο, απλώς το ανοίγεις από εκεί. Αν όχι, δημιουργείς νέο φάκελο και δουλεύεις μόνο μέσα σε αυτόν.
Όταν ανοίξεις το Claude Code, διαλέγεις το project folder σου και του δίνεις το prompt. Εκεί θα σου ζητήσει trust workspace ή accept edits. Το κάνεις, γιατί αλλιώς θα σκαλώσει στην πρώτη σοβαρή αλλαγή.
Αν δεις ότι το Claude σου προτείνει αλλαγές, μην αγχωθείς. Αυτό είναι το φυσιολογικό flow. Αρκεί να έχεις τον σωστό φάκελο και να ξέρεις πού γράφεται τι.
Δούλεψε με το preview ανοιχτό
Το preview tab είναι το σημείο που σου δείχνει το site όσο ακόμα το χτίζεις. Αυτό είναι μεγάλο κέρδος, γιατί δεν δουλεύεις στα τυφλά.
Μπορείς να βλέπεις το αποτέλεσμα, να το μεγεθύνεις, να το μικραίνεις και να συνεχίζεις να δίνεις prompts χωρίς να φεύγεις από το project. Έτσι καταλαβαίνεις γρήγορα αν κάτι βγαίνει σωστά ή αν θέλει διόρθωση.
Πώς το περνάς από τον Mac στο GitHub
Κάνε login από το Terminal
Εδώ μπαίνει το Terminal. Στο Mac κάνεις gh login, διαλέγεις github.com, μετά https και τέλος login with a web browser.
Το GitHub account είναι απαραίτητο. Είναι δωρεάν και λειτουργεί σαν το σημείο όπου μένουν τα αρχεία του project σου, ώστε μετά το hosting να μπορεί να τα τραβήξει σωστά.
Αν δεν έχεις ξανακάνει αυτή τη διαδικασία, θα σου δώσει ένα link και έναν κωδικό. Τον περνάς στον browser, επιβεβαιώνεις τη συσκευή σου και τελειώνεις. Μετά το Claude ξέρει πού θα στέλνει το project.
Στείλε το σωστό repository και branch
Εδώ θέλει λίγη προσοχή. Φτιάχνεις το repository που θες ή χρησιμοποιείς ένα υπάρχον και σιγουρεύεσαι ότι το project ανεβαίνει εκεί που πρέπει. Μην το αφήσεις να πάει σε λάθος repo ή λάθος branch, γιατί μετά θα μπερδεύεσαι χωρίς λόγο.
Στο βίντεο φαίνεται και το main branch σαν σταθερό σημείο αναφοράς. Αυτό είναι βολικό, γιατί κρατάς το deployment σε ένα καθαρό μονοπάτι και δεν ψάχνεσαι σε side branches που δεν χρειάζεσαι.
Γιατί αυτό σου κρατάει το project καθαρό
Μόλις το project ζει στο GitHub, κάθε αλλαγή περνάει από εκεί. Δεν κάνεις upload αρχεία με το χέρι κάθε φορά.
Αυτό είναι το σωστό flow για AI websites. Φτιάχνεις, κάνεις αλλαγή, κάνεις push, και μετά το hosting παίρνει το τελευταίο commit. Τόσο απλά.
Ανέβασέ το σε live domain με Hostinger
Το Hostinger μπαίνει εδώ επειδή έχει Node.js app installer και συνεργάζεται σωστά με GitHub. Αν το project σου είναι Next.js, αυτό το setup το καταλαβαίνει πολύ καλύτερα από ένα απλό file upload.
Αν θέλεις να δεις και μια δεύτερη προσέγγιση για το ίδιο μοτίβο, το δεύτερο setup Next.js σε Hostinger δείχνει το flow από άλλη οπτική. Και αν μπεις ποτέ σε shared hosting και δεις ότι κάτι δεν σηκώνεται όπως πρέπει, το θέμα στο Stack Overflow για Next.js στο Hostinger δείχνει γιατί το σωστό environment παίζει τόσο μεγάλο ρόλο.
Διάλεξε πλάνο, domain και repository
Στο checkout του Hostinger διαλέγεις πλάνο, διάρκεια, domain και, αν χρειάζεται, περνάς και τον κωδικό έκπτωσης που δείχνει το βίντεο. Το βασικό όμως δεν είναι το sales κομμάτι. Το βασικό είναι να συνδέσεις σωστά το GitHub με το deployment.
Εκεί επιλέγεις το repository σου και το framework preset εμφανίζεται ως Next.js. Αυτό είναι και το σημείο που καταλαβαίνεις γιατί από την αρχή σε έσπρωχνε προς το Next.js.
Αν το project σου δεν ήταν φτιαγμένο σωστά εξαρχής, εδώ θα άρχιζαν οι τριβές.
Κάνε deploy και άσε το GitHub να μιλάει με το hosting
Μόλις πατήσεις deploy, το site ανεβαίνει στο live domain και μπορείς να το δεις από το dashboard. Από εκεί και πέρα, κάθε αλλαγή που περνάς στο GitHub μπορεί να εμφανιστεί αυτόματα στο live site.
Το καλό είναι ότι δεν στέλνεις ξανά αρχεία με το χέρι. Το καλύτερο είναι ότι μπορείς να έχεις CDN, να καθαρίσεις cache και να στήσεις και business email αν το χρειάζεσαι. Όλα αυτά είναι bonus, αλλά βοηθούν πολύ όταν το site σου αρχίζει να δουλεύει σοβαρά.
Αν το domain δεν δείξει αμέσως το νέο site, μην πανικοβληθείς. Η διάδοση του domain θέλει λίγο χρόνο.
Πρόσθεσε δωρεάν βάση δεδομένων με Supabase
Φτιάξε το project και σύνδεσε το Claude
Αν το site σου έχει φόρμα επικοινωνίας, τα δεδομένα κάπου πρέπει να πηγαίνουν. Εκεί μπαίνει το Supabase.
Φτιάχνεις free account, ανοίγεις νέο project, του δίνεις όνομα, βάζεις password και περιμένεις να γίνει healthy. Μετά πας στο Claude Desktop, ανοίγεις settings, πηγαίνεις στα connectors και βάζεις το Supabase σαν connector.
Η λογική είναι απλή. Θες το Claude να μιλάει με τη βάση σου χωρίς να τα κάνεις όλα χειροκίνητα.
Πέρασε libraries και environment variables
Στο επόμενο βήμα εγκαθιστάς τον MCP connector, δίνεις authorization και περνάς τα libraries που χρειάζεται το Next.js project. Αν το project θέλει συγκεκριμένα packages, τα βάζεις εκεί, όχι πρόχειρα στο code.
Το ίδιο ισχύει και για τα environment variables. Τα βάζεις στο .env, όχι μέσα σε τυχαία σημεία του project. Έτσι κρατάς τη ρύθμιση καθαρή και δεν εκθέτεις τίποτα που δεν πρέπει.
Αν θέλεις μόνο φόρμες και leads, δεν χρειάζεσαι login. Αφήνεις την πρόσβαση ανοιχτή για να γράφονται οι υποβολές κανονικά.
Τσέκαρε τα leads στον πίνακα
Στο Supabase table editor θα δεις τον πίνακα leads. Εκεί θα γράφονται το όνομα, το email, το τηλέφωνο και το μήνυμα, όταν κάποιος στείλει τη φόρμα.
Το σωστό τεστ είναι απλό. Στέλνεις μια δοκιμαστική φόρμα από το live site και μετά κοιτάς αν εμφανίστηκε σωστά στη βάση. Αν εμφανίστηκε, είσαι σε καλό δρόμο. Αν όχι, κάτι δεν έχει δεθεί σωστά ανάμεσα στο project, το hosting και τη βάση.
Τι κάνεις όταν αλλάζει κάτι αργότερα
Στείλε τις αλλαγές από Claude στο GitHub
Η μεγάλη δύναμη αυτού του setup είναι οι αλλαγές. Αλλάζεις ένα heading, πειράζεις ένα section, διορθώνεις ένα κείμενο, και μετά λες στο Claude να στείλει το update στο GitHub.
Από εκεί το Hostinger τραβάει το νέο commit και το site σου ανανεώνεται. Δεν ξαναχτίζεις όλο το project από την αρχή. Δεν ξανασυμπιέζεις αρχεία. Δεν ξανακάνεις manual upload.
Αυτό είναι που κάνει όλη τη ροή να φαίνεται πιο “ζωντανή” και πιο πρακτική.
Αν βγει error, πήγαινε κατευθείαν στο log
Αν κάτι σπάσει, μην το μαντέψεις. Άνοιξε τα deployments, βρες το error και διάβασέ το όπως είναι. Μετά δώσε το μήνυμα πίσω στο Claude και ζήτα του να το διορθώσει.
Μια γρήγορη σειρά είναι αυτή:
- Άνοιξε τα deployments στο Hostinger
- Βρες το αποτυχημένο build
- Πάρε το μήνυμα λάθους όπως είναι
- Κάνε paste το error στο Claude και ζήτα διόρθωση
Το σημαντικό εδώ είναι να μη χαθείς σε τυφλές δοκιμές. Αν το deployment γράψει failure, το log είναι η απάντηση. Και αν έχεις μπερδευτεί με το environment, το GitHub ή το branch, το μήνυμα λάθους συνήθως σου δείχνει ακριβώς πού έγινε η ζημιά.
Μην το δεις σαν ένα script, δες το σαν υποδομή
Αυτό που μένει στο τέλος δεν είναι απλώς ένα site που ανέβηκε. Είναι ένα project που πρέπει να διαβάζεται σωστά και από μηχανές και από ανθρώπους.
Αν το βλέπεις σαν layer υποδομής και όχι σαν ένα script, κερδίζεις σε καθαρότητα, σε συντήρηση και σε μελλοντική επέκταση.
Αν το site σου θα βγει και σε search ή σε AI surfaces, τότε βάλε από νωρίς τα σωστά θεμέλια. Καθαρά URLs, ένα H1 ανά σελίδα, schema στα templates και internal links που οδηγούν κάπου πραγματικά. Μην τα βάζεις σκόρπια και μετά ψάχνεις ποιο plugin ή ποιο theme σου χάλασε τη λογική.
Το schema δεν είναι κόλπο. Είναι ο τρόπος να εξηγήσεις με καθαρό τρόπο τι σημαίνει το περιεχόμενό σου. Και όταν το κάνεις σωστά από την αρχή, το project σου μένει πιο καθαρό και πιο έτοιμο για ό,τι έρχεται μετά.
Συχνές ερωτήσεις
Χρειάζεσαι οπωσδήποτε Mac;
Όχι, αλλά αυτός ο οδηγός είναι φτιαγμένος για Mac users, γιατί εκεί η ροή με Node.js, Git και Claude Code είναι πιο απλή. Σε Windows η λογική είναι ίδια, όμως τα βήματα αλλάζουν λίγο.
Γιατί να χρησιμοποιήσεις Next.js;
Το Next.js κρατάει το project πιο καθαρό και πιο γρήγορο. Δεν το βάζεις επειδή ακούγεται ωραίο, το βάζεις επειδή βοηθάει στη δομή, στο deployment και στη μελλοντική συντήρηση.
Τι κάνει το GitHub σε όλη αυτή τη διαδικασία;
Το GitHub είναι το σημείο όπου μένει το project σου σαν repository. Από εκεί το hosting τραβάει τις αλλαγές, άρα δεν ανεβάζεις αρχεία με το χέρι κάθε φορά που πειράζεις κάτι.
Γιατί μπαίνει το Hostinger και όχι απλό file upload;
Επειδή το Hostinger με Node.js app installer μπορεί να διαβάσει και να τρέξει σωστά ένα Next.js project. Αν πας σε απλό upload χωρίς το σωστό περιβάλλον, θα μπλέξεις χωρίς λόγο.
Χρειάζεσαι Supabase σε κάθε site;
Όχι. Το χρειάζεσαι όταν θέλεις να αποθηκεύεις δεδομένα, όπως φόρμες επικοινωνίας, leads ή άλλα στοιχεία χρηστών. Αν το site είναι απλώς ενημερωτικό, μπορεί να μη σου χρειάζεται καθόλου.
Τι κάνεις αν το site δεν εμφανίζεται αμέσως;
Πρώτα περιμένεις λίγο, γιατί το domain μπορεί να χρειάζεται χρόνο για propagation. Μετά κοιτάς τα deployments, δες αν το build είναι ενεργό και τσέκαρε αν το τελευταίο commit πέρασε σωστά από το GitHub.
Τι κρατάς από όλη τη διαδικασία
Το workflow είναι πιο απλό απ’ όσο φαίνεται, όταν το σπάσεις σε καθαρά κομμάτια. Φτιάχνεις το site στο Claude, το δένεις με GitHub, το βγάζεις live στο Hostinger και, αν χρειάζεσαι δεδομένα, το συνδέεις με Supabase.
Το κλειδί είναι να μη βλέπεις το project σαν ένα ωραίο demo. Αν το στήσεις σαν υποδομή, μετά σου μένει καθαρό, γρήγορο και πολύ πιο εύκολο να το μεγαλώσεις.
Και αυτό είναι το σημείο που μετράει περισσότερο, όχι το πώς φαίνεται μόνο στην οθόνη σου, αλλά το πώς στέκεται όταν το βάλεις να δουλέψει κανονικά.
