Creare Il Tuo Blog Statico Con Hugo + Cloudflare Pages

Hugo1 è uno strumento per la generazione di siti statici, scritto in Go. È incredibilmente veloce e dispone di ottime primitive di alto livello e flessibili per la gestione dei contenuti utilizzando Markdown e JSON.

Imparerai a creare un nuovo blog Hugo e la distribuirete utilizzando Cloudflare Pages. Utilizzerete la CLI di hugo per creare un nuovo sito Hugo e successivamente Cloudflare per fare il deploy del vostro sito web. Per creare un nuovo blog è necessario avere un account Cloudflare e un account Github.

Come funziona

In questa piccola sezione, proverò a spiegare come funziona il tutto. All’inizio vi sembrerà magico, ma una volta affrontati i fondamentali dell’infrastruttura che organizzeremo sarà molto semplice creare e fare deploy di siti web.

Per chi non conoscesse, Cloudflare è un’azienda americana che si occupa di servizi di gestione DNS e reverse proxy. Nell’ultimo anno ha messo a disposizione un servizio chiamato Cloudflare pages che permette di fare il deploy di siti web.

Fare il deploy vuol dire rilasciare o distribuire un contenuto all’interno di una infrastruttura (in questo caso di Cloudflare Pages). Hugo crea pagine HTML, e fogli di stile CSS dal contenuto che noi scriviamo con Markdown o JSON. Le pagine HTML vengono poi caricate su Cloudflare Pages che provvederà a servire tutte le richieste degli utenti.

Il collegamento tra Hugo (ovvero ciò che scriviamo ad alto livello) e Cloudflare pages è dato da una repository git su cui Cloudflare andrà a leggere per fare il rilascio del sito web (ovvero costruire le pagine del sito web).

Installazione GoHugo

Per prima cosa è necessario installare Hugo. Come per qualsiasi progetto Go-based ci sono due principali opzioni:

Per la prima opzione, è molto semplice: basta scaricare il binario per l’architettura del vostro computer dalla sezione “Releases” del progetto su Github.

Per la seconda opzione, tutto dipende dal sistema operativo che state utilizzando. Ipotizzando un sistema Unix-based, potete utilizzare il packer manager della distribuzione oppure scaricare il binario e installarlo manualmente all’interno della PATH del vostro utente.

Creare un nuovo progetto

Per creare un nuovo progetto non è necessario importare alcun file specifico: Hugo ci dà una mano ad impostare un nuovo progetto “Hugo” da zero. È sufficiente il comando hugo new site il-mio-blog2 per far sì che Hugo crei la struttura di cartelle e file adatta per il vostro blog.

Una volta creata la struttura del nostro progetto, possiamo scegliere il tema Hugo che più ci piace. Il sito web ufficiale themes.gohugo.io dispone di una vasta gamma di temi tra cui possiamo scegliere.

Ipotizziamo in questo caso di aver scelto il tema terminal. Per installarlo è sufficiente aggiungerlo come sotto-modulo Git dentro la cartella il-mio-blog.

git init
git submodule add https://github.com/panr/hugo-theme-terminal.git themes/terminal
git submodule update --init --recursive

Il primo file molto importante da modificare si chiama config.toml e consiste in una serie di parametri che vengono usati da Hugo e il tema per modificare alcune impostazioni (colore di una pagina, tema utilizzato, base url).

Data l’elasticità e le potenzialità di Hugo, ogni tema avrà la propria documentazione che riporterà tutti i modi per configurare in modo specifico il tema scelto. Assicurati di leggerlo prima di fare il deploy!

Di seguito un file di configurazione molto scarno. Per brevità ho omesso il codice interno per la configurazione, disponibile qui.

# (commento) base url è l'indirizzo base del tuo blog. Nel caso di domini ad-hoc (come nicolo.dev), andrà sostituito.
baseurl = "/"
# la lingua del tuo sito
languageCode = "it"
# il nome del tema che utilizziamo
theme = "terminal"
paginate = 5

[params]
  # Questa sezione contiene una serie di variabili ad hoc utilizzate dal tema Terminal.
  # Nome della cartella in cui ci sarà il contenuto principale (per esempio content/posts)
  contentTypeName = "posts"

  # ["orange", "blue", "red", "green", "pink"]
  themeColor = "orange"

  ...

Creare un nuovo post

Create un nuovo post per dare al vostro sito Hugo un contenuto iniziale. Eseguite il comando hugo new nel vostro terminale per generare un nuovo post:

hugo new posts/hello-world.md

All’interno di hello-world.md, aggiungete del contenuto iniziale per creare il vostro post. Rimuovere la riga draft nel frontmatter del post quando si è pronti a pubblicarlo. Qualsiasi post con draft: true impostato sarà saltato dal processo di compilazione di Hugo.

Caricare il sito web su Github

Crea un nuovo repository GitHub visitando repo.new. Dopo aver configurato il repository, eseguire il push dell’applicazione su GitHub eseguendo i seguenti comandi nel terminale:

git remote add origin https://github.com/yourgithubusername/githubrepo
git branch -M main
git push -u origin main

Deploy su Cloudflare

Distribuire il sito su Pages accedendo alla dashboard di Cloudflare > Account Home > Pages e selezionando Crea un progetto. Selezionate il nuovo repository GitHub creato e, nella sezione Set up builds and deployments, fornite le seguenti informazioni:

OpzioneValore
Production branchmain
Build commandhugo
Build directorypublic

Dopo aver completato la configurazione, fare clic sul pulsante Salva e distribuisci. Si dovrebbe vedere Cloudflare Pages che installa hugo e le dipendenze del progetto e costruisce il sito, prima di distribuirlo.

Dopo aver distribuito il vostro sito, riceverete un sottodominio unico per il vostro progetto su *.pages.dev. Ogni volta che si effettua un commit di nuovo codice sul sito Hugo, Cloudflare Pages ricostruisce automaticamente il progetto e lo distribuisce. Avrete anche accesso alle distribuzioni in anteprima sulle nuove richieste di pull, in modo da poter vedere in anteprima l’aspetto delle modifiche al vostro sito prima di distribuirle in produzione.


  1. Hugo è anche il nome del cocktail consumato in Veneto e in Trentino. ↩︎

  2. Potete sostituire il-mio-blog con il nome che più vi aggrada. ↩︎