Pubblicazione sito su Cloudflare Pages

Posted on May 20, 2025

Introduzione

Dopo aver rimandato l’operazione per un po’, mi sono finalmente messo a fare il deploy del mio sito su Cloudflare Pages. Cloudflare Pages è un servizio di hosting per siti statici (o generati con framework come Hugo, Next.js, React, ecc.) che offre:

  • Deploy automatico collegato a GitHub
  • Certificato SSL gratuito
  • CDN globale con caching ottimizzato
  • Piano gratuito generoso

Ecco un diario di tutti i passaggi che ho seguito.

1. Creare un Account su Cloudflare

Il primo passo è registrarsi su cloudflare.com. Una volta dentro, dalla dashboard si accede alla sezione Pages nel menu laterale.

2. Installare Wrangler

Wrangler è lo strumento da riga di comando ufficiale di Cloudflare. Permette di gestire progetti, fare deploy manuali e interagire con i vari servizi Cloudflare direttamente dal terminale.

sudo npm install -g wrangler

Dopo l’installazione, autenticarsi con il proprio account:

wrangler login

Si aprirà il browser per completare il login. Una volta autorizzato, il token viene salvato localmente e Wrangler è pronto all’uso.

3. Creare un Nuovo Progetto su Cloudflare Pages

Per creare un nuovo progetto Pages da terminale:

wrangler pages project create nome-del-sito

In alternativa, è possibile creare il progetto direttamente dalla dashboard web di Cloudflare, nella sezione Workers & Pages → Create application → Pages.

4. Configurare il Progetto (wrangler.toml)

Il file wrangler.toml nella root del progetto contiene la configurazione del deploy. Ecco un esempio tipico:

name = "nome-del-sito"
pages_build_output_dir = "public"  # cartella generata dal build (es. "dist" per React, "public" per Hugo)

Nota per Hugo: la directory di output di default è public/. Per altri framework controlla la documentazione: React/Vite usa dist/, Next.js usa .next/ o out/ a seconda della configurazione.

Se si usa un framework supportato (React, Next.js, Astro, Hugo, ecc.), Cloudflare Pages è in grado di rilevare automaticamente il build command e la output directory durante la configurazione via dashboard.

5. Collegare il Repository GitHub per il Deploy Automatico

Questo è il passaggio chiave per avere il deploy automatico: ogni push sul repository GitHub farà scattare automaticamente un nuovo deploy su Cloudflare Pages.

Come collegare GitHub dalla dashboard Cloudflare

  1. Vai su Workers & Pages → seleziona il tuo progetto Pages
  2. Clicca su Settings → Builds & Deployments
  3. Nella sezione Branch deployments, clicca su Connect to Git
  4. Scegli GitHub come provider
  5. Autorizza Cloudflare ad accedere al tuo account GitHub (si apre una finestra OAuth)
  6. Seleziona il repository che vuoi collegare
  7. Configura le impostazioni di build:
    • Production branch: main (o master, a seconda del tuo repo)
    • Build command: es. hugo --minify per Hugo, npm run build per React
    • Build output directory: es. public per Hugo, dist per React/Vite
  8. Clicca Save and Deploy

Da questo momento, ogni git push sul branch di produzione avvierà automaticamente un nuovo build e deploy. I branch secondari generano invece delle preview URL separate, utili per testare le modifiche prima di metterle in produzione.

Verifica lo stato del deploy

Dalla dashboard di Cloudflare, nella sezione Deployments, è possibile vedere in tempo reale lo stato di ogni deploy (building, success, failed) e consultare i log in caso di errori.

6. Deploy Manuale (opzionale)

Se non si vuole usare GitHub o si vuole fare un deploy una tantum, è possibile farlo da terminale con Wrangler:

# Prima eseguire il build del sito
hugo --minify  # oppure: npm run build

# Poi pubblicare la cartella di output
wrangler pages deploy public/  # sostituire "public/" con la propria output directory

Nota: il comando wrangler publish è deprecato nelle versioni recenti di Wrangler. Usare wrangler pages deploy al suo posto.

7. SSL: Certificato Automatico

Cloudflare fornisce un certificato SSL/TLS gratuito e automatico per tutti i siti su Pages. Non è necessaria nessuna configurazione aggiuntiva.

Per i siti con dominio personalizzato, dalla dashboard si può scegliere la modalità SSL:

  • Flexible: HTTPS tra utente e Cloudflare, HTTP verso il server di origine
  • Full: HTTPS end-to-end (consigliato)
  • Full (Strict): come Full, ma verifica anche la validità del certificato sull’origine

8. Caching e Ottimizzazione

Cloudflare applica automaticamente il caching per le risorse statiche tramite la sua CDN globale. Per personalizzare il comportamento:

  1. Dalla dashboard, vai su Caching → Configuration
  2. Imposta il Cache Level (Standard è adatto alla maggior parte dei casi)
  3. Per forzare il refresh della cache dopo un deploy, usa Purge Cache

Per siti statici come quelli generati con Hugo, il caching di default di Cloudflare è già ottimale: le risorse vengono servite dall’edge node più vicino all’utente.

9. Monitoraggio

Cloudflare offre strumenti integrati per il monitoraggio:

  • Analytics: traffico, richieste, larghezza di banda, codici di stato HTTP
  • Web Analytics: metriche lato client (Core Web Vitals, tempo di caricamento) — si attiva aggiungendo uno script alla pagina
  • Security: log di richieste bloccate, attacchi DDoS, rate limiting

Conclusioni

Il deploy su Cloudflare Pages è risultato rapido e senza intoppi. I punti di forza principali sono:

  • Integrazione GitHub fluida e affidabile per il deploy automatico
  • SSL gratuito senza configurazione manuale
  • CDN globale che migliora sensibilmente i tempi di caricamento
  • Piano gratuito con limiti molto generosi per siti statici

Per chi usa Hugo o altri generatori di siti statici, Cloudflare Pages è una delle soluzioni più solide e comode disponibili oggi.