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 statici può farti risparmiare centinaia di euro all'anno, mantenendo il tuo sito veloce, sicuro e facile da gestire. Le opzioni gratuite si sono evolute enormemente: 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 passo dopo passo, dalla scelta della piattaforma alla configurazione di un modulo di contatto funzionante, con esempi concreti e i limiti reali da conoscere prima di decidere.

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. Proprio questa semplicità rende l'hosting statico gratuito così affidabile: non c'è nulla che possa crashare, richiedere patch o necessitare di scaling.

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

• 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 distribuisce automaticamente.

Il vero limite è la funzionalità dinamica. Tutto ciò che richiede logica lato server - come l'autenticazione degli utenti, un carrello acquisti o l'elaborazione di moduli - necessita 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 sufficiente.

Guida passo dopo passo: deploy 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 GitHub. Vai su github.com/new e crea un repository pubblico. Chiamalo your-username.github.io se vuoi che sia servito al dominio radice, oppure con qualsiasi altro nome se preferisci un percorso in sottodirectory.
2. Fai il push dei file del sito. Dalla cartella locale del tuo progetto, esegui:

   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. Abilita 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 eseguirà la build e il deploy entro 1-3 minuti. Vedrai comparire l'URL live (ad esempio https://your-username.github.io) nel pannello delle impostazioni di Pages.
5. Collega un dominio personalizzato (opzionale). Aggiungi un file CNAME nella radice del tuo repository contenente il nome del dominio (ad esempio www.yoursite.com). Poi aggiorna il tuo provider DNS per puntare un record CNAME a your-username.github.io. GitHub provvederà automaticamente al certificato SSL entro pochi minuti.

Guida passo dopo passo: deploy su Cloudflare Pages

1. Registrati o accedi a Cloudflare. Vai su 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 semplice, lascia vuoto il comando di build 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. Avvia il deploy. Clicca su "Salva e distribuisci". 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. Nella dashboard 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 punti al tuo indirizzo *.pages.dev.

Ogni successivo git push sul branch principale avvia 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 la maggior parte delle guide si ferma, e qui la maggior parte delle persone si blocca. Un modulo di contatto su un sito 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 manda via email.
• Una funzione serverless: scrivi una piccola funzione (Cloudflare Workers, AWS Lambda) che elabora il modulo. Funziona, ma richiede codice e manutenzione continua.
• 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 form 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

Prima di aggiungere qualsiasi codice al tuo sito, devi creare un account Sendform e configurare un endpoint per il modulo. Il processo richiede circa due minuti:

1. Registrati su Sendform.net. Crea un account gratuito - nessuna carta di credito richiesta. Dopo la registrazione avrai subito un progetto predefinito pronto all'uso.
2. Crea un modulo. Nella tua dashboard, clicca su "Nuovo modulo". Assegnagli un nome, seleziona un progetto e inserisci l'indirizzo email dove vuoi ricevere gli invii. Sendform verificherà questo indirizzo prima di attivare l'endpoint.
3. Copia l'URL del tuo endpoint. Una volta creato il modulo, vedrai un URL endpoint univoco nel formato https://sendform.net/!your-form-id. Copialo - è quello che incollerai nel tuo HTML.

Con il tuo endpoint a portata di mano, aggiungi il seguente HTML al tuo sito statico:

<form action="https://sendform.net/!your-form-id" method="POST">
  <label for="name">Your Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Your Email</label>
  <input type="email" id="email" name="email" required>

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

  <button type="submit">Send Message</button>
</form>

Sostituisci your-form-id con l'ID mostrato nella tua dashboard Sendform. Ogni invio verrà recapitato via email all'indirizzo che hai confermato durante la configurazione. Nessun codice backend, nessun server, nessuna spesa mensile per l'infrastruttura. 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 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 un percorso non viene trovato. Crea un file 404.html personalizzato nella tua directory radice. Questo mantiene gli utenti sul tuo sito e protegge la loro esperienza.

2. Fare il commit di segreti in un repository pubblico

Chiavi API, segreti di endpoint per moduli e indirizzi email non dovrebbero mai trovarsi 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 all'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 a propagare le modifiche; attendi fino a 10 minuti, oppure aggiungi una query string agli URL dei tuoi asset durante i test.

5. Usare percorsi relativi in modo errato

Se il tuo sito 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 per i moduli

Una volta che il tuo modulo raccoglie gli 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 configurarlo senza scrivere codice backend.

Conclusioni

L'hosting gratuito di siti 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 funzionante a costo zero di infrastruttura. Inizia con una delle guide alle piattaforme qui sopra, metti il tuo sito online, e poi configura il 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 ospitato su GitHub Pages o Cloudflare Pages. Nessun codice backend, nessuna configurazione server, nessuna complicazione. Punta semplicemente l'attributo action del tuo modulo al tuo endpoint e il gioco è fatto.

Inizia gratis su Sendform.net →

Domande frequenti