Sito Astro tramite Claude Code: dalla cartella alla pubblicazione

Anche chi non ha mai scritto una riga di codice può creare un sito con Astro tramite Claude Code. Ho smesso da tempo di scrivere codice a mano: faccio tutto con le parole tramite l’IA, e creare un sito con Astro funziona allo stesso modo: spieghi cosa ti serve e Claude scrive il codice per te.

Di solito il problema non è la creazione in sé, ma il fatto che il percorso sia diviso in pezzi. Un articolo spiega l’installazione, un altro parla dei comandi, un terzo della pubblicazione, e il percorso completo non si ricompone mai nella tua testa. Qui ti accompagno da una cartella vuota a un sito accessibile su internet tramite un link: cosa installare, quale comando usare per avviare un progetto, come creare pagine tramite Claude Code e come pubblicare il risultato gratis. Mi baso sulla documentazione ufficiale di Astro.

Informazioni su come lavorare con il servizio — nella documentazione di Ailoot.

Cosa serve prima di iniziare?#

Astro non ti chiede di scaricare nulla in anticipo: verrà scaricato dal comando del passaggio successivo. Ti serve però l’ambiente in cui eseguire tutto. Astro descrive così i requisiti per iniziare: servono tre cose:

Vediamo cosa significa ciascuna di queste cose nella pratica:

1. Node.js — un programma senza il quale non funzionano né Astro né la maggior parte degli strumenti di vibe-coding. Scaricalo da nodejs.org e installalo come una normale applicazione. Il numero di versione indicato nella documentazione cambia nel tempo, quindi prima di iniziare visita la pagina di installazione di Astro e controlla i requisiti. Ti serve una versione con numero pari (22, 24); è meglio evitare quelle dispari (23, 25).
2. VS Code — un editor gratuito di Microsoft. Apri qui la cartella del progetto e puoi usare anche Claude Code: sarà lui a scrivere il codice.
3. Terminale — una finestra in cui inserire i comandi. Non devi installarlo separatamente: si apre dal menu di VS Code e tutti i comandi qui sotto si inseriscono lì.

Se hai già installato Claude Code e creato qualcosa, hai già tutto questo e puoi saltare il passaggio. Altrimenti, trovi una guida separata su come installare Claude Code.

Come creare un progetto Astro con un solo comando?#

È qui che inizia il progetto vero e proprio, e basta un solo comando. Apri il terminale e inserisci:

npm create astro@latest

Si avvierà la procedura guidata di installazione. Ecco cosa dice la documentazione:

La procedura guidata ti guiderà nei passaggi e ti farà alcune domande: come chiamare la cartella del progetto, quale modello usare come punto di partenza e se installare subito le dipendenze. Puoi scegliere le opzioni predefinite per ogni domanda: per il tuo primo sito andrà bene un modello vuoto o minimale. Se hai risposto “no” alla domanda sull’installazione delle dipendenze, potrai aggiungerle manualmente più tardi eseguendo il comando npm install all’interno della cartella del progetto.

Al termine, la procedura ti confermerà che il progetto è stato creato e ti suggerirà il passaggio successivo: entrare nella cartella del progetto:

cd your-project-name

Ecco tutto ciò che serve per creare il progetto. Al suo interno c’è già un’impalcatura funzionante del sito: diversi file e cartelle usati per creare la pagina. Non dovrai modificarli a mano, ma è utile sapere cosa si trova dove. Per Astro, una sola cartella è obbligatoria:

In altre parole, src/pages è la cartella che contiene le pagine del sito: la home page, “chi siamo” e i contatti. Nelle vicinanze si trovano di solito src/components (elementi riutilizzabili come intestazioni e pulsanti), src/layouts (la struttura condivisa delle pagine) e la cartella public per immagini e file. Non devi memorizzare la struttura: tieni solo a mente che le pagine si trovano in src/pages e indicaglielo quando chiedi a Claude: “aggiungi una pagina dei contatti”.

Come creare il sito vero e proprio tramite Claude Code?#

L’impalcatura è pronta; ora si costruisce il sito a partire da essa, e Claude Code si occupa del lavoro. Apri la cartella del progetto in VS Code, avvia Claude Code e descrivi a parole cosa ti serve. Modifica da solo i file in src/pages e nelle cartelle vicine: tu gli assegni le attività e controlli il risultato.

Per esperienza, è meglio procedere a piccoli passi. Una richiesta enorme come “creami il sito di un’azienda” finisce per produrre un pasticcio difficile da sistemare. Quindi suddividila in attività brevi e chiare e assegnagliene una alla volta:

1. “Crea una home page: un titolo grande, un paio di frasi su quello che faccio e un pulsante che rimanda alla pagina dei contatti.”
2. “Aggiungi una pagina dei servizi con un elenco di tre sezioni.”
3. “Aggiungi una pagina dei contatti con un numero di telefono e un link a Telegram.”
4. “Cambia lo stile: uno sfondo chiaro e un carattere grande e leggibile.”

Controlla ogni passaggio prima di continuare: così è più facile accorgersi se qualcosa non va e tornare indietro. Il motivo per cui le attività piccole sono più affidabili e il modo per mantenere l’IA sulla strada giusta rientrano nel context engineering: più l’attività e la struttura del progetto sono chiare, più il risultato è prevedibile.

Astro offre una struttura pratica per l’IA: il contenuto delle pagine è separato dallo stile e le pagine seguono regole condivise. Con questa struttura, Claude si confonde meno spesso ed è meno probabile che rompa qualcosa nelle vicinanze quando modifica un elemento. Se Claude smette all’improvviso di vedere i tuoi file o risponde senza attinenza, consulta la guida su perché Claude Code non riesce a vedere i file del progetto.

Come vedere un’anteprima del sito prima di pubblicarlo?#

Prima di mostrare il sito al mondo, lo visualizzi sul tuo computer. Per questo Astro dispone di un server di sviluppo, che mostra il sito in tempo reale direttamente sul tuo computer. Avvialo con un comando nel terminale, all’interno della cartella del progetto:

npm run dev

Astro avvierà un’anteprima locale e stamperà l’indirizzo nel terminale. Per impostazione predefinita, è localhost:4321. Copia l’indirizzo, aprilo nel browser e vedrai il tuo sito. Per ora puoi aprirlo solo tu: nessuno dall’esterno può accedervi; è una bozza.

La comodità è che l’anteprima è in tempo reale: Claude modifica un file e la pagina nel browser si aggiorna da sola, senza bisogno di ricaricarla manualmente. È rapido: chiedi a Claude, controlli nel browser, fai una correzione e guardi di nuovo. È in questa fase che perfezioni il sito. Quando il risultato ti soddisfa, pubblicalo online.

Come pubblicare gratis un sito Astro online?#

Devi mettere il sito finito da qualche parte, così che altre persone possano aprirlo tramite un link. Il modo gratuito più semplice passa da GitHub: prima carichi il codice del progetto in un repository, poi colleghi un servizio di hosting che crea e pubblica il sito. Ecco i passaggi:

1. Crea un repository su GitHub. Un repository è uno spazio online in cui archiviare il codice del progetto. Claude Code può aiutarti con istruzioni in linguaggio naturale: chiedigli di “caricare il progetto in un nuovo repository GitHub” e ti suggerirà dei comandi. Se non hai mai usato GitHub, tieni a portata di mano le istruzioni per registrarti e accedere.
2. Collega l’hosting. Vai su uno dei servizi (Netlify, Vercel), accedi tramite il tuo account GitHub e scegli il repository. La documentazione di Astro descrive così questo metodo: il servizio di hosting controlla il repository, crea il sito e lo pubblica.
3. Controlla le impostazioni di build. Di solito il servizio di hosting riconosce Astro e compila automaticamente i campi necessari. Se ti chiede di inserirli manualmente, nella documentazione il comando di build è astro build (oppure npm run build) e il sito finito viene collocato nella cartella dist.
4. Fai clic su “Pubblica”. Il servizio creerà il sito e ti darà un link come site-name.netlify.app. Chiunque potrà aprire il sito a quell’indirizzo.

Ecco la formulazione esatta della documentazione sul collegamento di un repository a un servizio di hosting:

Da quel momento, la pubblicazione diventa automatica: invii una nuova modifica al repository e il sito viene ricreato e aggiornato da solo, senza dover fare altro.

C’è anche una seconda opzione gratuita: GitHub Pages, che pubblica il sito direttamente dal repository usando gli strumenti di GitHub. Astro offre un modello ufficiale per questo:

Con questa opzione, il sito si apre a un indirizzo come your-name.github.io/repository-name, a cui puoi collegare in seguito il tuo dominio. Anche in questo caso puoi configurare tutto tramite Claude Code: descrivi l’attività a parole e lui prepara il file necessario.

Quanto costa creare un sito Astro?#

Ora parliamo di soldi. Astro è uno strumento gratuito e open source, senza costi a parte. Anche i servizi di hosting di base offrono opzioni gratuite: GitHub Pages e i piani iniziali di Netlify e Vercel, di solito sufficienti per un sito Astro leggero (i piani gratuiti hanno limiti di traffico, ma in genere bastano per un sito vetrina aziendale o una landing page leggeri).

In pratica, potresti pagare due cose, ma non necessariamente. La prima è lo strumento di IA che usi per creare il sito. La seconda è un dominio personalizzato al posto di un indirizzo come name.netlify.app: è facoltativo e costa poco all’anno. Puoi completare il percorso “crea un sito e pubblicalo online” pagando solo Claude.

Cos’altro chiedono sulle pagine Astro e Claude Code?#

Scopri Ailoot.