Installare e utilizzare Hugo su Ubuntu con snap

Vorrei raccontarti di come ho realizzato il mio sito con questo fantastico framework: Hugo, ma anche delle piccole (dis)avventure che mi hanno accompagnato.

Ho deciso di farne una sorta di rubrica, di tanto in tanto scriverò qui sul blog cosa ho integrato al suo interno, come l’ho fatto e cercherò anche di linkare risorse utili dal quale ho attinto informazioni.

Brevissima introduzione

Ma cos’è questo Hugo? Hugo è un framework per creare siti web, un generatore di pagine statiche HTML.

Mi spiego meglio. Grazie ad Hugo, pur non avendo troppe conoscenze, in poche ore puoi costruire un sito web abbastanza completo.

I passi da seguire per iniziare sono essenzialmente 4:

• installare Hugo
• scegliere uno dei template dal loro repository
• scrivere solo i contenuti (pagine o articoli se vuoi creare un blog) con sintassi markdown (se vuoi conoscere tutti i tag della sintassi markdown qui puoi trovare maggiori dettagli)
• lanciare il comando di compilazione

Fatto questo Hugo genererà delle pagine HTML che devi caricare, tramite FTP ad esempio, sul tuo servizio di hosting. Non hai bisogno di un servizio di database perchè tutti i contenuti saranno generati in modo statico da Hugo, questo ti permette anche di risparmiare sui costi annui del rinnovo del dominio, il che sul totale mi sembra un ulteriore nota positiva.

Il primo passo quindi è l’installazione 😃

Ho consultato la pagina di install: qui. Ma sono pigro e mi scocciavo di leggere tutte le opzioni di installazione, io per programmare al momento utilizzo Ubuntu quindi senza perdere tempo: CTRL + F (Ubu) mi trova la voce per l’installazione su Debian e Ubuntu. Bene! Apro il mio terminale e:

sudo apt-get install hugo

pochi secondi e l’installazione termina senza problemi. Controllo la versione installata:

hugo version

e scopro che mi ha tirato giù una versione un bel po' vecchiotta, spero però che possa non essere un problema (spoiler: mi sbagliavo), quindi proseguo senza pensarci troppo.

Mi apro la pagina del quickstart ed inizio a seguire le indicazioni. Se sei interessato a muovere i primi passi su Hugo, e vuoi approfondire qualche fase ti consiglio caldamente di leggerti per bene la pagina del quickstart, è veramente ben realizzata.

Quindi creo una nuova cartella, lancio il comando di creazione nuovo progetto:

hugo new site <nome-del-sito>

nel mio caso:

hugo new site progressify

Pochi passaggi quindi, un solo comando ed ho già un progetto “vuoto”, sembra davvero che funzioni proprio tutto come dicono sulla guida 😂

Scelgo un template tra quelli disponibili dal loro repository: qui

Lo installo e lo configuro seguendo le informazioni che trovo nella pagina del template che ho scelto. Ogni template ha il suo comando git per tirarlo giù e configurarlo, quindi leggi bene la pagina del tuo template, di solito l’autore inserisce anche qualche istruzione su come utilizzarlo (cioè i paramentri da inserire nel file di config di hugo) e alcune screen di esempio.

Per vedere come appare il sito mentre lo stiamo sviluppando, Hugo ci mette a disposizione un comando che crea un server di test che ci compila il sito “al volo” ed una volta compilato è raggiungibile direttamente dal browser all’indirizzo: http://localhost:1313

hugo server -D

Il parametro -D serve a farti vedere anche le pagine che hai impostato come bozza.

A questo punto inizio ad avere qualche perplessità.. Le impostazioni che erano segnate nel template sembravano non avere effetto quindi non ottenevo il risultato che mi aspettavo. Il mio sito era leggermente diverso dalla demo del template.

Faccio qualche ricerca su Google e non riesco a trovare grandi informazioni. Ero quasi deciso ad aprire una issue sul repository del template che avevo scelto, poi ho pensato di sceglierne un altro.. Poi mi sono ricordato la cosa del numero di versione.

Disinstallo subito Hugo, ritorno sulla pagina di install di Hugo e inizio a sfogliarla seriamente stavolta 😜

Tra le varie opzioni di installazione c’era anche lo snap package, quindi come riporta anche la guida, apro un terminale e:

snap install hugo

Bene, stavolta mi sento veramente a cavallo!

Subito provo a ridare il comando

hugo version

e non funziona più!! Sconforto 😭

Faccio qualche altra ricerca su Google e scopro che se installi qualcosa con snap per richiamare il comando devi anteporre snap run, questa veramente mi mancava.

snap run hugo version

ok, adesso Hugo funziona e la versione è aggiornatissima. Provo di nuovo a compilare il template ed anche lì va tutto liscio, stavolta il template si visualizza correttamente (quindi era proprio colpa della versione troppo vecchia), è scomodo ogni volta anteporre snap run ma funziona 🤔

Forse proprio sul forum ufficiale Hugo leggo di persone che hanno il mio stesso “problema” e consigliavano di crearsi un alias.

alias hugo='snap run hugo'

Perfetto, l’alias funziona, non ho più bisogno di anteporre nulla al comando hugo ed adesso è tutto pronto e funzionate!!

Conclusioni

Sono veramente contento di come sta venendo il sito: semplice, immediato e veloce. Veloce, non è inteso solo come velocità di caricamento, anche se, ci tengo a sottolinearlo, Hugo genera direttamente l’HTML da servire al browser quindi anche i visitatori del tuo sito avranno un esperienza nettamente più veloce, ma anche di veloce realizzazione.

Sto personalizzando anche buona parte del template, integrando librerie mancanti ed applicando altre modifiche minori alla grafica, ma questi potrebbero essere argomenti di altri articoli 😄

Ultimissima chicca

Questa ultima chicca non riguarda direttamente il framework ma più l’IDE. Visto che sono pigro e sto utilizzando PyCharm per sviluppare il sito, ho cercato qualcosa che mi permettesse di integrare i comandi di Hugo direttamente nell’IDE, senza ogni volta aprire un terminale e digitare i comandi manualmente.

Cercando sul forum di JetBrains ho trovato questo. Si installa direttamente da PyCharm (ma è sicuramente compatibile con gli altri ide di JetBrains, es.: PhpStorm, WebStorm etc.) ed una volta riavviato l’IDE per applicare i cambiamenti è possibile configurare in pochissimi click il server, vi faccio vedere:

A questo punto non dovete fare altro che assegnare un nome alla configurazione appena creata e inserire -D negli Arguments:

Che idea ti sei fatto? Utilizzeresti Hugo per costruire il tuo sito? Fammelo sapere nei commenti.

Per ora credo sia tutto! Ti saluto e ti do appuntamento al prossimo articolo.

AP