Introduzione⌗

Hugo è un generatore, moderno, di siti statici scritto in GO, più di preciso è un framework che si occupa di generare siti in maniera statica (Static Site Generator - SSG). A differenza del funzionamento dei normali siti in cui i vari componenti, lato server, generano dinamicamente i contenuti ad ogni richiesta dell’utente, gli SSG generano i contenuti al momento della loro stesura. L’uso di siti statici ha diversi vantaggi ma anche qualche svantaggio, partendo dai vantaggi possiamo dire che, a differenza dei siti dinamici, non necessitano di hardware e software particolare, in quanto non si appoggiano a database e non hanno bisogno di software lato server che generi, in tempo reale, le pagine richieste dall’utente, anche a livello di sicurezza e di privacy sono nettamente superiori in quanto, come detto poco prima, non si appoggiano su DB o software che possono essere attaccati, gli basta avere un web server, i contenuti sono in chiaro e tutti leggibili e fruibili dall’utente, di contro la gestione di un sito statico potrebbe farci creare grossi problemi di gestione lato files in quanto bisogna creare ogni contenuto e struttura per ogni pagina/post che si vuole presentare all’utente, ma fortunatamente, in questo frangente, ci vengono in aiuto gli SSG.

Nonostante gli SSG abbiano evidenti potenzialità ritengo che non siano sempre la scelta migliore di produrre contenuti per il web, ogni progetto va valutato e vanno scelti gli strumenti più idonei.

Basi⌗

Il requisito basa è avere installato Hugo, fortunatamente è un software multi piattaforma e di semplice installazione, non sto a dilungarmi nello spiegarvi la procedura di installazione, la documentazione ufficiale lo fa in maniera impeccabile e, sicuramente, con istruzioni più puntuali di quelle che vi potrei dare io.

Inizializzazione sito⌗

Una volta che abbiamo l’ambiente installato e funzionante i passaggi per creare il nostro primo sito sono molto semplici, prima di tutto si inizializza la struttura base con cui, Hugo, opera.

hugo new site miosito
Congratulations! Your new Hugo site is created in ~/miosito.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

se tutto è andato a buon fine, questo è quello che vedrete dopo aver lanciato il comando, andiamo un po ad analizzare le parti che compongono il programma.

  • hugo => il nostro SSG.
  • new => questa è lazione che deve compiere e cioè inizializzare/creare un qualcosa di nuovo.
  • site => questa invece è cosa deve generare e cioè un sito, nel nostro caso, o per meglio dire la struttura base con cui Hugo lavorerà.
  • miosito => ed in fine il nome del sito, anche qui per essere più precisi si tratta della cartella in cui risiederanno i nostri file.

Vedremo più avanti che Hugo può generare altri contenuti oltre che alla struttura per il sito.

Struttura cartelle Hugo⌗

Prima di procedere con qualsiasi altra cosa, ritengo opportuno fare un piccolo escursus sulla struttura appena generata.

miosito/
├── archetypes
├── assets
├── content
├── data
├── layouts
├── public
├── static
├── themes
└── config.toml
  • archetype

In questa cartella possiamo troviamo gli archetipi dei file dei contenuti e anche la loro struttura. Questo permette a Hugo, tramite il comando hugo new ... di generare file di contenuti strutturati ed uguali.

  • assets

Qui vanno tutti i file che necessitano di essere elaborati da Hugo Pipes.

  • contents

Qui vanno tutti i file con i contenuti da pubblicare, nel caso di Hugo questi contenuti sono scritti in vari formati, quello standard è il MarkDown, questi file dovrebbero contenere un Front Matter che permette di specificati vari metadati ed altro, anche questo FM può essere scritto in vari formati.

  • data

In questa cartella vanno quei file che svolgono un pò la funzione dei database, da cui si possono raccogliere dati da usare in diverse maniere.

  • layouts

Qui vanno inseriti i template, tipo heading, footer ecc…, che Hugo userà per generare la struttura dei file da pubblicare.

  • public

Questa cartella conterrà i file statici genrati da Hugo che dovranno poi essere pubblicati nel web server.

  • static

Qui vanno inseriti i file statici tipo immagini, css, javascript ecc. da utilizzare nei post o per il sito in generale.

  • themes

Qui va inserito il tema che darà la grafica e la struttura visiva finale al nostro sito.

  • config.toml

Questo è il file di configurazione di Hugo dove possimo impostare varie informazioni tra cui titolo, il tema usato ecc.

Aggiunta tema⌗

Dopo aver creato la nostra struttura, appena vista, dobbimo installare un tema, la maniera più semplice è quella di usare un template, dei tantissimi, che possimo trovare nel sito ufficiale di Hugo, anche in questo caso ce la caviamo con un comando o più e, al massimo, con qualche modifica al file di configurazione.

Se nel vostro sistema è installato git potete usare il comado:

git clone https://github.com/panr/hugo-theme-terminal.git themes/terminal

oppure dovete scaricarlo dal sito ed estrarlo nella cartella themes.

wget https://github.com/panr/hugo-theme-terminal/archive/refs/heads/master.zip
unzip master.zip -d themes
mv themes/hugo-theme-terminal-master themes/terminal

Creazione contenuti⌗

Abbiamo la struttura base, abbiamo il tema per presentare il nostro sito, non ci resta che creare il primo contenuti, se vogliamo usare tutte le potenzialità di Hugo possiamo avvalerci del comando hugo new ... che, basandosi sul modello di default che si trova nella cartella archetype, ci genererà un file e con le informazioni base che ci serviranno.

hugo new posts/first_post.md

In alternativa, possiamo creare manualmente i contenuti premurandoci di crearli nel folder content e cona la giusta struttura, nel nostro esempio avremmo dovuto creare il file first_post.md in ./content/posts/

Il comando appena lanciato ci ha generato una sottocartella ed un file nel folder content, la cartella è posts ed il file, nel nostro caso, è first_post.md

+++
title = "Pippo"
date = "2023-02-15T00:33:49+01:00"
author = ""
authorTwitter = "" #do not include @
cover = ""
tags = ["", ""]
keywords = ["", ""]
description = ""
showFullContent = false
readingTime = false
hideComments = false
color = "" #color from the theme settings
+++

Quello che vedete, qui sopra, è il Front Matter, che ha generato Hugo in automatico o che dovremmo inserire noi manualmente, queste informazioni aiuteranno Hugo a generare il posts con autore, titolo, tags ecc…, ovviamente dovremmo compilare e/o eliminare quello che non ci interessa ed in fine aggiungere il contenuto. Ok, fatto!!!, no aspetta le pagine statiche ancora non ci sono, quindi ecco l’ultimo comando che ci permetterà, finalmente, di avere il nostro sito, almeno in locale.

Generazione sito statico⌗ 

hugo

TUTTO QUI … esatto!!!, ora nella cartella public troviamo i nostri file statici.

Anteprima del risultato⌗

In realtà ci ssarebbe un altro comando che ci può tornare sicuramente utile, di seguito trovi il comando che permette a Hugo di generare un piccolo e semplice web server e che ti mostrerrà in tempo reale quello che hai scritto e come verrà visualizzato.

hugo server

Conclusioni⌗

In pochi passaggi e con semplicità abbimo installato Hugo, abbiamo generato la struttura, aggiunto il template, i contenuti ed in fine visto anche un’anteprima di come sarà il nostro sito. Hugo ha tantissime potenzialità ed in futuro vedremo come pubblicare e personalizzare ulteriormente il nostro sito.

Approfondimenti⌗