Come ospitare un sito web statico gratis nel 2026: GitHub Pages, Cloudflare Pages e moduli di contatto

Scegliere la piattaforma giusta per l'hosting di siti web statici può farti risparmiare centinaia di euro all'anno, mantenendo il tuo sito veloce, sicuro e facile da gestire. Nel 2026, le opzioni gratuite si sono notevolmente evolute: piattaforme come GitHub Pages e Cloudflare Pages offrono un'infrastruttura pronta per la produzione a costo zero. Ma c'è una sfida che la maggior parte dei tutorial ignora: come gestire i moduli di contatto su un sito statico quando non esiste un server che li elabori? Questa guida ti accompagna attraverso l'intero processo di configurazione, dalla scelta della piattaforma all'integrazione di un modulo di contatto funzionante, con esempi concreti e i limiti reali da conoscere prima di impegnarti con una piattaforma.

Perché l'hosting statico gratuito merita la tua attenzione

Un sito web statico serve file HTML, CSS e JavaScript pre-compilati direttamente al browser. Non c'è PHP, nessun runtime Node.js e nessuna query al database a ogni caricamento di pagina. Questa semplicità è esattamente il motivo per cui l'hosting di pagine statiche è così affidabile: non c'è nulla che possa crashare, richiedere patch o necessitare di scalabilità.

Per piccole imprese, portfolio, landing page SaaS e siti di documentazione, l'hosting statico soddisfa ogni esigenza:

• Velocità: I file vengono serviti da un nodo CDN edge, spesso in meno di 100ms a livello globale.
• Sicurezza: L'assenza di un runtime lato server riduce drasticamente la superficie di attacco.
• Costo: Sia GitHub Pages che Cloudflare Pages sono gratuiti per progetti pubblici e molti progetti privati.
• Semplicità: Fai il push del codice su un repository e il sito si pubblica automaticamente.

L'unico vero limite riguarda le funzionalità dinamiche. Tutto ciò che richiede logica lato server, come l'autenticazione utente, un carrello e-commerce o l'elaborazione di moduli, ha bisogno di un servizio esterno. Tienilo a mente mentre seguiamo i passaggi di configurazione.

Confronto tra piattaforme: GitHub Pages vs Cloudflare Pages

In sintesi: se il tuo pubblico è globale e vuoi i tempi di caricamento più rapidi possibili, Cloudflare Pages è la scelta vincente. Se il tuo team lavora già su GitHub e vuoi la configurazione più semplice possibile, GitHub Pages è più che adeguato.

Guida passo passo: pubblica su GitHub Pages

Questo esempio presuppone che tu abbia un sito HTML/CSS semplice pronto per la pubblicazione. Se stai usando un generatore di siti statici come Hugo o Jekyll, il processo è praticamente identico.

1. Crea un repository su GitHub. Vai su github.com/new e crea un repository pubblico. Chiamalo tuo-username.github.io se vuoi che sia servito sul dominio root, oppure con qualsiasi altro nome se preferisci un percorso in sottodirectory.
2. Fai il push dei file del sito. Dalla cartella locale del progetto, esegui:
   Copia

   git init
   git remote add origin https://github.com/your-username/your-repo.git
   git add .
   git commit -m "Initial deploy"
   git push -u origin main

3. Attiva GitHub Pages. Nel repository, vai su Impostazioni > Pages. Sotto "Sorgente", seleziona il branch main e la cartella /root (oppure /docs se il tuo output di build va lì). Clicca su Salva.
4. Attendi il deployment. GitHub compilerà e pubblicherà il sito entro 1-3 minuti. L'URL live (ad esempio, https://tuo-username.github.io) apparirà nel pannello delle impostazioni di Pages.
5. Collega un dominio personalizzato (opzionale). Aggiungi un file CNAME nella root del repository contenente il tuo nome di dominio (ad esempio, www.tuosito.com). Poi aggiorna il tuo provider DNS per puntare un record CNAME a tuo-username.github.io. GitHub rilascerà automaticamente un certificato SSL entro pochi minuti.

Guida passo passo: pubblica su Cloudflare Pages

1. Registrati o accedi a Cloudflare. Visita pages.cloudflare.com e collega il tuo account GitHub o GitLab.
2. Crea un nuovo progetto. Clicca su "Crea un progetto", poi su "Connetti a Git". Seleziona il tuo repository dall'elenco.
3. Configura le impostazioni di build. Se il tuo sito è in HTML puro, lascia il comando di build vuoto e imposta la directory di output su / o dove si trova il tuo index.html. Per Hugo, imposta il comando di build su hugo e l'output su public. Per Jekyll, usa jekyll build e l'output su _site.
4. Pubblica il sito. Clicca su "Salva e pubblica". Cloudflare clonerà il tuo repository, eseguirà la build e pubblicherà sulla sua rete edge globale. Il tuo sito riceverà immediatamente un sottodominio *.pages.dev.
5. Aggiungi un dominio personalizzato. Nel pannello del progetto, vai su "Domini personalizzati" e inserisci il tuo dominio. Se il dominio è già gestito da Cloudflare DNS, la configurazione richiede un solo clic. In caso contrario, dovrai aggiungere un record CNAME presso il tuo registrar che punta al tuo indirizzo *.pages.dev.

Ogni successivo git push sul branch principale attiverà un redeploy automatico. Cloudflare crea anche deployment di anteprima per le pull request, utili per verificare le modifiche prima che vadano in produzione.

Aggiungere un modulo di contatto al tuo sito statico

È qui che la maggior parte delle guide si ferma, ed è qui che la maggior parte delle persone si blocca. Un modulo di contatto su un sito web statico non può inviare dati a se stesso - non c'è nessun server in ascolto. Hai tre opzioni concrete:

• Un servizio backend per moduli (consigliato): punti l'attributo action del tuo modulo verso un endpoint di terze parti che riceve l'invio, lo valida e te lo recapita via email.
• Una funzione serverless: scrivi una piccola funzione (Cloudflare Workers, AWS Lambda) che elabora il modulo. Funziona, ma richiede codice e manutenzione continuativa.
• JavaScript fetch(): usi la Fetch API del browser per inviare i dati del modulo a un endpoint backend. Consulta la nostra guida su come inviare dati di un modulo HTML con JavaScript fetch() per i dettagli tecnici.

Il percorso più rapido verso un modulo funzionante è un servizio dedicato. Ecco un esempio concreto con Sendform:

Esempio concreto: un modulo di contatto funzionante in 5 minuti

Supponiamo che tu abbia un sito portfolio pubblicato su GitHub Pages. Vuoi che i visitatori possano inviarti un messaggio e che quei messaggi arrivino direttamente nella tua casella di posta. Ecco il codice HTML completo:

<form action="https://sendform.io/f/YOUR_FORM_ID" method="POST">
  <label for="name">Il tuo nome</label>
  <input type="text" id="name" name="name" required>

  <label for="email">La tua email</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Messaggio</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Invia messaggio</button>
</form>

Questa è l'intera integrazione. Sostituisci YOUR_FORM_ID con l'ID che trovi nella tua dashboard di Sendform, e ogni invio verrà recapitato via email all'indirizzo con cui ti sei registrato. Nessun codice backend, nessun server, nessun costo infrastrutturale mensile. Per pattern UX più avanzati, incluse le pagine di reindirizzamento dopo l'invio e le email di conferma, leggi la nostra guida sulle best practice per i moduli su siti web statici.

Se stai usando un website builder insieme al tuo sito statico, trovi il processo di integrazione descritto in dettaglio nel nostro articolo su come integrare Sendform con il tuo website builder.

Errori comuni da evitare

Dopo aver aiutato migliaia di utenti a configurare l'hosting statico gratuito, questi sono gli errori che causano più frustrazione:

1. Dimenticare la pagina 404

Sia GitHub Pages che Cloudflare Pages mostrano una pagina di errore generica se una route non viene trovata. Crea un file personalizzato 404.html nella directory root. Questo mantiene gli utenti sul tuo sito e protegge l'esperienza del tuo brand.

2. Fare il commit di credenziali in un repository pubblico

Chiavi API, segreti degli endpoint dei moduli e indirizzi email non devono mai finire in un repository GitHub pubblico. Usa le variabili d'ambiente in Cloudflare Pages, oppure fai riferimento a un file di configurazione privato elencato nel .gitignore.

3. Costruire un modulo senza un piano per il backend

Questo è l'errore più comune. Gli sviluppatori creano un bellissimo modulo di contatto, fanno il push su GitHub Pages e scoprono il giorno del lancio che il modulo fallisce silenziosamente. Decidi il tuo backend per i moduli prima di scrivere un singolo tag <input>. Strumenti come Sendform ti permettono di configurare un modulo di contatto che invia direttamente via email senza alcun codice, eliminando completamente il problema del backend.

4. Ignorare i problemi di cache della build

Se il tuo sito non si aggiorna dopo un push, la cache CDN potrebbe stare servendo file obsoleti. Cloudflare Pages svuota automaticamente la cache al momento del deployment. GitHub Pages è più lento nel propagare le modifiche; attendi fino a 10 minuti, oppure aggiungi una query string agli URL degli asset durante i test.

5. Usare percorsi relativi in modo errato

Se il tuo sito su GitHub Pages si trova su username.github.io/project-name/ (una sottodirectory), tutti i percorsi degli asset devono tenere conto di quel prefisso. Un link a /styles.css non funzionerà. Usa percorsi relativi (./styles.css) oppure configura l'impostazione baseURL del tuo generatore di siti statici in modo che corrisponda alla sottodirectory.

6. Trascurare l'automazione del flusso di lavoro dei moduli

Una volta che il tuo modulo raccoglie invii, puoi fare molto di più che ricevere semplici email. Sendform supporta webhook e integrazioni che ti permettono di instradare automaticamente gli invii verso Slack, un CRM o un foglio di calcolo. La nostra guida su come automatizzare i flussi di lavoro dei moduli con webhook e API ti mostra esattamente come configurare tutto questo senza scrivere codice backend.

Conclusione

L'hosting gratuito di siti web statici non è mai stato così potente. GitHub Pages è ideale per i team già integrati nell'ecosistema GitHub, mentre Cloudflare Pages offre prestazioni globali migliori e un piano gratuito più generoso. La vera sfida non è l'hosting in sé - sono le funzionalità dinamiche, in particolare i moduli di contatto, a creare difficoltà. Abbinando una delle due piattaforme a un servizio dedicato per i moduli, ottieni un sito web professionale e completamente funzionale a costo infrastrutturale zero. Inizia con una delle guide alle piattaforme qui sopra, metti online il tuo sito e poi integra il tuo modulo di contatto usando Sendform per gestire gli invii in modo affidabile fin dal primo giorno.

Aggiungi un modulo di contatto al tuo sito statico in pochi minuti

Usa Sendform per raccogliere gli invii dei moduli da qualsiasi sito statico pubblicato su GitHub Pages o Cloudflare Pages. Nessun codice backend, nessuna configurazione del server, nessuna complicazione. Punta semplicemente l'attributo action del tuo modulo verso il tuo endpoint e il gioco è fatto.

Inizia gratis su Sendform.net →

Domande frequenti