Come vedete il sito è piuttosto scarno nei contenuti ed essenziale nell’aspetto.
I contenuti arriveranno nel tempo, stringati e senza una cadenza precisa per via della mia pigrizia e per il tempo libero che scarseggia.
La scelta dell’aspetto deriva dal fatto che buona parte del mio lavoro consiste nell’eseguire dei comandi su console testuali in ambienti Linux per cui mi è sembrato ovvio dare un aspetto “ASCII” a questo sito. Inoltre adoro i font a spaziatura fissa e i temi scuri.
E’ un sito statico che non richiede nessun database o backend installato sul server web. Pagine HTML con file css, javascript per la responsività e qualche immagine.
Per realizzarlo ho usato il framework hugo, non solo per l’assonanza con il mio nome di battesimo, ma perché mi permette di concentrarmi sui contenuti piuttosto che sulla manutenzione di un sito dinamico come wordpress che per le mie esigenza è inutilmente complesso.
Questo tool è pensato per essere usato da linea di comando e si basa su file di testo in formati standard (html, yaml, toml, md, etc) ben strutturati che permettono di produrre siti statici partendo da template e temi già pronti all’uso. Ci vuole un po’ di tempo per prendeci mano ma alla fine il risultati sono soddisfacenti.
Ecco in soldoni come l’ho fatto e come lo gestico.
Sul laptop principale utilizzo Windows 11 dove ho installato WLS basato su Ubuntu che utilizzo profiquamente per piccoli progetti senza dovermi incasinare con dual boot o server virtuali. Ho deciso quindi di installare hugo nell’abiente WSL tramite il packet manager snap:
$ sudo snap install hugo
Successivamente ho lanciato il comando che ha generato la struttura del sito:
$ hugo new project ugova.si
Ho cercato un tema che mi piacesse (a partire dal nome “risotto”) direttamente sul sito di hugo e l’ho installato:
$ cd ugova.si
$ git submodule add https://github.com/joeroe/risotto.git themes/risotto
Come dicevo tutta la gestione del sito si basa su file di configurazione in formato testo (quello predefinito è in formato toml ma è posdsibile usare yaml o altri). Il file di configurazione principale è hugo.toml dove si definiscono i parametri come il nome del sito, il contenuto dei menu, etc. Ho qundi modificato i parametri di default di questo file prendendo come riferimento il file di esempio del tema risotto e li ho personalizzati.
A questo punto ho creato il primo post (questa pagina):
$ hugo new content content/posts/questo-sito.md
Per i contenuti ho deciso di usare il formato standard markdown ma hugo permette di usarne anche altri (HTML, Emacs Org Mode, AsciiDoc, Pandoc o reStructuredText).
Per l’editing dei contenuti e delle configurazioni utilizzo vidsual studio code che si integra perfettamente con l’ambiente WSL e con git per il versionamento delle modifiche.
Una volta sistemato i parametri e i primi contenuti, si può avere l’antemprima del sito direttamente con hugo che, col seguente comando, andrà a produrre tutte le componenti nella sotto cartella “public” e le renderà disponibile in un mini server web accessibile da qualsiasi brower sull’indirizzo http://127.0.0.1:1313:
$ hugo serve -D
Una caratteristica molto interessante di questo comando è che monitora la le modifiche ai file del sito e quando rileva un cambiamento ricostruisce il sito che si aggiornerà sul browser automaticamente!
A questo punto non resta che pubblicare il sito. Per farlo utilizzo uno script presente nella documentazione di hugo che rigenera il sito e lo pubblica utilizzando il comando rsync:
#!/bin/sh
USER=XXXXXX
HOST=ugova.si
DIR=XXXXXX
hugo build && rsync -avz --delete public/ ${USER}@${HOST}:~/${DIR}
Naturalmente va prima preparata una configurazione sicura di SSH verso il server pubblico.