Perchè è nato questo sito?

E perchè questo è legato con lo sviluppo di un sito statico con Hugo?

Da più parti, durante le mie peregrinazioni sul web, avevo sentito parlare di generatori di siti statici per blog e siti. Approfondendo ho scoperto Hugo: un promettente e semplice generatore di siti statici. Nello stesso periodo mi sono appassionato alla riga di comando ed a come svolgere tutta una serie di operazioni di gestione senza utilizzare le utility grafiche (soprattutto nei sistemi Linux e MacOS). Cercavo quindi una scusa per provare Hugo e per approfondire l’uso di strumenti da riga di comando, primo fra tutti Git. E’ la scusa è stata cloudsurfer.it, un dominio che avevo acquistato per un vecchio progetto di e-commerce mai decollato e che è diventato la base sperimentale per questo blog dove raccolgo un po’ di appunti su quello che studio.

Questo è quindi il mio homelab di programmazione web: ogni tanto scrivo articoli, utilizzo Hugo in locale per servire il sito e fare i controlli, quando tutto mi sembra corretto con Git invio al repo privato su Github e Netlify fa il deploy automantico del sito.

Non sono uno scrittore prolifico quindi condivido il processo che ho utilizzo per creare questo sito in modo che questo possa essere sfruttato da creatori di contenuti migliori di me. Questo non è un tutorial: ne puoi trovare tanti on-line e su youtube fatti sicuramente meglio di quello che potrei fare io. Il mio contributo è il flusso operativo che spesso manca nei tutorial.

Hugo: un framwork per costruire siti

Hugo è un framework per costruire siti statici. I siti creati hanno in generale ottime performance dal punto di vista della velocità. I siti generati da Hugo sono statici per il fruitore ma permettono un aggiornamento semplice e continuo da parte dello sviluppatore attraverso pagine .md (markdown) come questa che contiene l’articolo, attraverso file di configurazione .yaml o .toml ed attraverso all’utilizzo ed alla personalizzazione di temi che utilizzano tutto un sistema di shortcodes per la generazione della pagina.

Quindi il sito è veloce come un sito puramente statico ma il programmatore sfrutta Hugo per generarlo invece che programmare direttamente in html, css e javascript.

Ti assicuro che è molto più difficile da spiegare che da fare … il mio consiglio è partire da un progetto semplice, un bel tema preconfezionato e osservare come il framework lavora.

1. Installare Hugo

Il primo passo è installare Hugo per il sistema operativo utilizzato. La procedura è semplice e si riduce al lancio di un comando che varia a seconda del sistema operativo:

MacOS

$ brew install hugo

Windows

$ choco install hugo -confirm

Linux

$ snap install hugo

Consiglio comunque di dare un occhiata alla guida ufficiale di installazione prima di procedere in modo da eseguire la procedura aggiornata: guida installazione Hugo.

2. Crea un nuovo sito Hugo

Con il comando:

$ hugo new site nuovo_sito

Si crea una cartella nuovo_sito con all’interno il nuovo progetto.

3. Aggiungere un tema

Ora che il progetto è creato si deve entrare nella cartella nuovo_sito, inizializzare git ed aggiungere un tema. Ecco ad esempio l’installazione del tema Ananke:

cd nuovo_sito
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Sul sito puoi trovare tanti temi creati per diverse tipologie di siti. In quasi tutti i temi trovi le informazioni per l’installare, una descrizione del tema ed un esempio.

In generale quando installi un tema, all’interno della cartella themes/nome_thema trovi una cartella con il sito esempio. Ciascun tema ha un file di configurazione che contiene una serie di parametri che permettono di configurare il sito.

4. Aggiungi un contenuto

Puoi aggiungere un primo contenuto con:

hugo new posts/my-first-post.md

Il nuovo post comincia con alcune righe come sotto dove sono impostati i parametri di base del post. Puoi prendere spunto per questo dal sito di esempio presente nella cartella themes/nome_thema.

---
title: "My First Post"
date: 2021-05-09T08:47:11+01:00
draft: true
---

5. Lancia il server

Per lanciare il server di Hugo usa il comando:

hugo serve -D

Il -D permette di vedere anche i post in draft. Il sito è servito generlamente su http://localhost:1313/; questo è comunque indicato nell’output del comando sopra.

GIT

A questo punto si può caricare il sito su git creando un repository per il sito. La procedura prevede la creazione su github di un repository, quindi l’aggiunta dei file del progetto a questo repo.

Questo articolo non riguarda l’utilizzo di git quindi questo aspetto lo vedremo in un altro contenuto perchè è uguale per tutti i progetti.

NETLIFY

Per questo progetto ho utilizzato per la prima volta netlify nella sua versione gratuita. Questo servizio ti permette di fare il deploy del sito in modo automatico tutte le volte che il repository viene aggiornato. netlify supporta Hugo come generatore di siti statici e quindi quando si aggiorna il repo è il servizio stesso che lancia tutti i comandi di Hugo per costruire il tuo sito. Netlify in automatico pubblica il sito su nuovo_sito.netlify.com. Ma con qualche semplice impostazione nei record DNS del tuo sito puoi far rispondere il tuo dominio principale nome_sito.it.

Conclusione: flusso di lavoro

In conclusione - una volta creato il sito, configurato GIT, configurato NETLIFY, eseguito il primo deploy del sito e verificato che tutto funzioni correttamente - il flusso di lavoro è il seguente:

  • Entrare nella cartella con il nuovo sito e fare il pull

    git pull

  • Creare un nuovo post

    hugo new posts/my-new-post.md

  • Scrivere il post con l’editor preferito - io utilizzo visual studio code

  • Finito il post fare l’add e poi il push sul repository

    git add .
git push

  • Dopo qualche minuto Netlify aggiornerà il sito con il nuovo post pubblicato

Questo mi permette di gestire il sito da praticamente tutti i dispositivi che utilizzo compreso l’iPad dove utilizzo l’app textastic.