Introduzione ad Hugo

hugo è uno Static Site Generator in linguaggio go. Un generatore di siti statici permette di creare l’intera struttura del sito direttamente in HTML. Le caratteristiche fondamentali di Hugo sono: velocità nel rendering statico delle pagine, semplicità di utilizzo, portabilità e flessibilità.

Un solo eseguibile binario, tipicamente installato in ambiente linux con snap, si utilizza per tutti i comandi.

Per verificare l’installazione

hugo version

per creare un nuovo sito

hugo new site quickstart

Crea un nuovo progetto web nella cartella quickstart

aggiungere un tema grafico

Il sito themes.gohugo.io mostra i vari temi grafici base disponibili. Una volta scaricato va installato nella sottodirectory themes della cartella di progetto (quickstart),

per utilizzare un tema disponibile via git

cd quickstart/themes
git clone  <theme-url>

utilizzare git per lo sviluppo del sito

cd quickstart
git init
cd themes
git submodule add <theme-url>

configurare il sito

Editare il file config.toml nella cartella principale del progetto:

baseURL = "https://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ananke"

aggiungere contenuti

hugo new posts/my-first-post.md

Crea un nuovo contenuto markdown nella cartella posts (subdirectory di content)

Avvio del server di sviluppo

▶ hugo server -D

                   | EN
+------------------+----+
  Pages            | 10
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  3
  Processed images |  0
  Aliases          |  1
  Sitemaps         |  1
  Cleaned          |  0

Total in 11 ms
Watching for changes in /Users/bep/quickstart/{content,data,layouts,static,themes}
Watching for config changes in /Users/bep/quickstart/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

oppure

hugo server  	\
	--buildDrafts  \
	--buildFuture \
	--disableFastRender \
	--watch	\
	--source <PROJECT_DIR> \
	--destination <PROJECT_DIR>/dev

Aprire il browser all’indirizzo http://localhost:1313/. per visualizzare l’anteprima del sito.

personalizzare il tema

L’aspetto grafico può essere personalizzato, utilizzando le directory static/css static/js e layouts che hanno precedenza rispetto al tema del progetto.

compilazione

Per compilare in html le pagine, che vanno nella cartella public, basta dare il comando

hugo \
	--ignoreCache \
	--cleanDestinationDir \
	--source $PROJECT_DIR \
	--destination $PROJECT_DIR/public

pubblicazione

Una volta installati ssh, rsync, con le oppurtune chiavi ssh, sul server di produzione, si pubblica il sito con

cd  public
rsync -auvz --delete $PROJECT_DIR/public/  $WEBSITE_DIR/