Prefazione
Dopo aver creato un sito con strumenti di IA come ChatGPT, Canva, Gemini Canvas, Claude Artifacts o Sider Web Creator, la prossima grande domanda è come gestire l'hosting web su GitHub Pages in modo da poter visitare il sito tramite il proprio dominio. Questa guida ti accompagna passo dopo passo attraverso il percorso, dall'esportazione di un progetto in Sider Web Creator fino ad arrivare a un sito web completo sotto il tuo dominio personale, demistificando al contempo sia l'hosting web che la configurazione di GitHub Pages.
🎯 Cosa Imparerai
Come scaricare e comprendere correttamente i file di progetto generati dall'IA prima di scegliere un flusso di lavoro di web hosting su GitHub Pages.
Istruzioni dettagliate per pubblicare il sito gratuitamente su GitHub Pages.
Come acquistare e associare il tuo dominio personalizzato all'interno delle impostazioni di GitHub Pages e collegarlo ai record DNS consigliati.
Suggerimenti professionali per rendere il sito completamente professionale e affidabile una volta che la configurazione di GitHub Pages è attiva.
La maggior parte delle piattaforme di hosting statico, inclusa GitHub Pages, si aspetta una cartella di build pulita, quindi per prima cosa devi raccogliere i tuoi file.
1.1 Scarica i File del Progetto
Dopo che Web Creator ha terminato di generare il sito, fai clic sul pulsante Download nell'angolo in alto a destra.
Attendi mentre il sistema impacchetta il tuo progetto.
Riceverai un file .zip pronto per il caricamento su GitHub Pages.
Estrai lo zip in qualsiasi punto del tuo computer.
1.2 Comprendi la Struttura dei File (Importante!)
mio-sito-web/
├── dist/ ⭐ Build di produzione per **GitHub Pages**
│ ├── index.html → Pagina iniziale
│ ├── assets/ → Stili e script
│ └── …
├── src/ 📝 Cartella del codice sorgente
├── package.json 📦 Configurazione del progetto
└── …altri file
Promemoria chiave: Solo i contenuti all'interno di dist/ vengono pubblicati su GitHub Pages.
1.3 Test di Anteprima Locale
Entra nella cartella dist/.
Fai doppio clic su index.html.
Il sito si apre nel tuo browser.
Verifica che tutto funzioni prima di eseguire il push su GitHub Pages.
🚀 Passo 2: Scegli una Piattaforma di Pubblicazione
Sebbene GitHub Pages sia l'eroe di questa guida, ecco un rapido confronto:
| |
|---|
🌟 GitHub Pages (focus di questa guida) | Totalmente gratuito • Pubblicazione tramite drag-and-drop o git push • HTTPS gratuito • CDN globale • Domini personalizzati • CI nativa con GitHub Actions |
| Rete edge globale • 100% gratuito • Velocità incredibile |
| Interfaccia utente raffinata • Ricco di funzionalità |
📤 Passo 3: Pubblica su GitHub Pages (Guida Dettagliata)
Anche se GitHub Pages risiede all'interno di una piattaforma per sviluppatori, pensalo come un hosting web ultra-moderno con la comodità di un pulsante.
3.1 Iscriviti e Crea un Repository
Visita github.com ed effettua l'accesso.
Fai clic su + Nuovo repository.
Chiamalo mio-sito-web e scegli Pubblico (o Privato se hai un piano a pagamento; GitHub Pages ora supporta i repository privati).
Lascia Initialize with README deselezionato se prevedi di eseguire il push in seguito.
3.2 Aggiungi i File del Tuo Sito
Metodo A: Caricamento tramite Drag-and-Drop (ideale per i principianti)
Nella scheda Code del repository, fai clic su Add file → Upload files.
Rilascia tutto all'interno di dist/.
Scorri verso il basso e fai clic su Commit changes.
Metodo B: Git CLI (ideale per gli sviluppatori)
# Clona il repository vuoto
git clone https://github.com/<user>/mio-sito-web.git
cd mio-sito-web
# Copia l'output della build
cp -r /percorso/a/dist/* .
# Commit & push
git add .
git commit -m "Deploy iniziale **GitHub Pages**"
git push origin main
Entrambi i percorsi ti lasciano con file statici nella root del repository, perfetti per GitHub Pages.
3.3 Abilita GitHub Pages
Vai su Settings → Pages.
In Source scegli Deploy from a branch → main (/root).
Fai clic su Save. GitHub Pages esegue la build in ~30 secondi e restituisce un URL come https://<user>.github.io/mio-sito-web/.
3.4 Prendi il Tuo URL Predefinito
Visita il link per confermare che tutto si carichi. GitHub Pages serve automaticamente tramite CDN globale.
🌐 Passo 4: Acquista e Associa il Tuo Dominio
4.1 Acquista un Dominio
Registrar suggeriti (tutti funzionano bene con GitHub Pages): Namecheap, GoDaddy, Alibaba Cloud, Tencent Cloud. Scegli un .com breve, se possibile.
4.2 Aggiungi il Dominio in GitHub Pages
Sempre in Settings → Pages, trova Custom domain.
Inserisci miosito.com o www.miosito.com.
Fai clic su Save. GitHub Pages scrive automaticamente un file CNAME.
4.3 Configura i Record DNS
| | |
|---|
| | 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153
|
| | |
Attendi 10 minuti–24 ore per la propagazione. Questi IP sono costanti per GitHub Pages. |
4.4 Applica HTTPS
Dopo che il DNS si è propagato, aggiorna le impostazioni di Pages e attiva Enforce HTTPS. I certificati Let's Encrypt vengono emessi automaticamente.
✨ Passo 5: Rendi il Sito Professionale
5.1 Aggiungi una Favicon Personalizzata
Prepara un'icona di 32×32 px chiamata favicon.ico.
Posizionala nella root del repository.
Esegui commit e push; GitHub Pages la serve istantaneamente.
5.2 Inserisci Meta Informazioni Personalizzate
Modifica index.html nella root del repository:
<meta name="description" content="Your website description on **GitHub Pages**">
<meta name="author" content="Your Name">
5.3 Analytics (opzionale)
Incolla snippet GA / Plausible all'interno di <head>; GitHub Pages rispetta gli header di caching.
🔧 Risoluzione dei Problemi
Pagina bianca? Conferma che index.html sia nella root del repository e che i percorsi degli asset siano relativi.
Il dominio reindirizza a .github.io? Ricontrolla i record A/CNAME e attendi il TTL completo.
Attivazione HTTPS disabilitata? Il DNS non è ancora corretto; verifica con dig.
🎉 Riepilogo
Congratulazioni! Ora hai:
✅ Scaricato con successo il tuo sito web generato dall'IA pronto per l'hosting su GitHub Pages.
✅ Pubblicato gratuitamente su GitHub Pages.
✅ Protetto il tuo dominio personalizzato.
✅ Ottimizzato l'ambiente GitHub Pages per un aspetto completamente professionale.
Il tuo sito ora è:
🌐 Online 24 ore su 24, 7 giorni su 7, alimentato dalla CDN di GitHub Pages.
🏷️ Servito sotto un dominio professionale.
🔒 Protetto dalla crittografia HTTPS.
⚡ Globalmente veloce grazie ai nodi edge di GitHub Pages.
🗝️ Interamente di tua proprietà e controllato da te.
💡 Prossimi Passi
Ottimizzazione SEO: aggiungi parole chiave mirate e meta descrizioni per migliorare il posizionamento nei motori di ricerca per la tua configurazione di GitHub Pages.
Condivisione social: integra pulsanti di condivisione per le principali piattaforme.
Aggiornamenti continui: esegui commit delle modifiche regolarmente; GitHub Pages si ridistribuisce automaticamente.
Backup: abilita la protezione del repository GitHub o esegui il mirroring del repository.
Ora sei un vero proprietario di un sito web: condividi il tuo link di GitHub Pages e mostra la tua creazione al mondo!
