Hugo è un generatore statico di siti (SSG o Static Site Generator) scritto in Go (aka Golang), un linguaggio di programmazione compilato ad alte prestazioni spesso utilizzato per sviluppare applicazioni e servizi backend.
Oggi Hugo è in grado di generare la maggior parte dei siti web in pochi secondi (<1 ms per pagina). Questo spiega perché Hugo si presenta come “il framework più veloce al mondo per la costruzione di siti web”.
In questo articolo, daremo un’occhiata alla storia di Hugo, cosa lo rende così veloce e come potete iniziare a costruire il vostro sito statico Hugo.
Cos’È Hugo? E Perché È Popolare?
Steve Francia ha originariamente sviluppato il generatore di siti statici Hugo nel 2013, e Bjørn Erik Pedersen è subentrato come sviluppatore principale del progetto nel 2015. Hugo è un progetto open-source, il che significa che il suo codice può essere visualizzato e migliorato da chiunque.
Come generatore di siti statici, Hugo prende i file di contenuto Markdown, li esegue attraverso template di temi e genera file HTML che potete facilmente distribuire online. E fa tutto questo in modo estremamente veloce.
Nel 2021 ormai esistono decine, se non centinaia, di generatori statici. Ogni generatore di siti statici ha il suo fascino. Jekyll è popolare tra gli sviluppatori Ruby e anche se non è veloce come altre opzioni, è stato uno dei primi generatori di siti statici a vedere un’adozione diffusa. Gatsby è un altro popolare SSG adatto a sviluppare siti staticamente distribuibili e sono dinamici nelle funzionalità.
Quindi, con così tanti SSG là fuori, cosa distingue Hugo?
Hugo È Veloce
In termini di prestazioni grezze, Hugo è il miglior generatore di siti statici al mondo. Forestry ha dimostrato che, rispetto a Jekyll, Hugo è 35 volte più veloce. Allo stesso modo, Hugo può rendere un sito di 10.000 pagine in 10 secondi, un compito che a Gatsby richiederebbe più di mezz’ora per essere completato. Non solo Hugo è il SSG più veloce in termini di tempi di costruzione, ma è anche veloce da installare.
Hugo è un eseguibile autonomo, a differenza di Jekyll, Gatsby e altri SSG che richiedono l’installazione di dipendenze con un gestore di pacchetti. Questo significa che potete scaricare e usare Hugo immediatamente senza dovervi preoccupare delle dipendenze del software.
Il Templating È Più Semplice con Hugo
Nel gergo SSG, “templating” si riferisce al processo di aggiunta di segnaposti per l’inserimento di contenuti dinamici all’interno di una pagina HTML. Per accedere al titolo di una pagina, potete utilizzare la variabile {{ .Title }}. Così, all’interno di un template HTML di Hugo, è comune vedere il {{ .Title }} avvolto nei tag H1 in questo modo:
<h1>{{ .Title }}</h1>Al momento della compilazione, Hugo prenderà automaticamente il titolo all’interno di un file di contenuto e lo inserirà tra i due tag <h1>. Hugo ha tantissime variabili di template incorporate e potete anche scrivere funzioni personalizzate per elaborare i dati al momento della compilazione. Per i modelli, Hugo usa le librerie integrate di Go html/template e text/template. Questo aiuta a ridurre l’eccesso di applicazioni perché Hugo non ha bisogno di installare librerie di terze parti per i template.
Come Installare Hugo
Hugo è un eseguibile compilato, il che significa che non dovrete scaricare e gestire molte dipendenze solo per iniziare. È disponibile per macOS, Windows e Linux.
Come Installare Hugo su MacOS e Linux
Il metodo di installazione raccomandato per macOS e Linux richiede Homebrew, un gestore di pacchetti per l’installazione e l’aggiornamento delle applicazioni. Se non avete già installato Homebrew, potete installarlo eseguendo il comando qui sotto nel Terminale:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"Dopo che Homebrew è stato installato, eseguite il comando qui sotto per installare Hugo:
brew install hugoCome Installare Hugo su Windows
Per gli utenti Windows, Hugo può essere installato utilizzando i gestori di pacchetti Chocolatey o Scoop. Poiché le istruzioni per installare Chocolatey e Scoop sono un po’ più complesse di Homebrew, raccomandiamo di fare riferimento alle loro pagine di documentazione ufficiale qui e qui.
Dopo aver installato Chocolatey o Scoop, potete installare Hugo usando uno dei seguenti comandi (a seconda del vostro gestore di pacchetti):
choco install hugo-extended -confirmscoop install hugo-extendedCome Verificare Che Hugo Sia Installato Correttamente
Per verificare che Hugo sia stato installato correttamente, eseguite il seguente comando:
hugo versionQuesto comando da terminale dovrebbe fornire informazioni sulla versione attualmente installata di Hugo, come segue:
hugo v0.85.0+extended darwin/arm64 BuildDate=unknownComandi e Configurazione di Hugo
Prima di tuffarci nella creazione di un sito statico con Hugo, familiarizziamo con i suoi vari comandi CLI e i parametri del file di configurazione.
Comandi CLI di Hugo
hugo check– esegue vari controlli di verificahugo config– visualizza la configurazione di un sito Hugohugo convert– converte il contenuto in diversi formatihugo deploy– distribuisce il vostro sito a un provider di cloudhugo env– visualizza la versione di Hugo e le informazioni sull’ambientehugo gen– fornisce accesso a vari generatorihugo help– visualizza informazioni su un comandohugo import– vi permette di importare un sito da un’altra posizionehugo list– visualizza un elenco di vari tipi di contenutohugo mod– fornisce l’accesso a vari aiuti per i modulihugo new– vi permette di creare nuovi contenuti per il vostro sitohugo server– avvia un server di sviluppo localehugo version– visualizza la versione corrente di Hugo
La CLI di Hugo ha anche moltissimi flag per specificare opzioni aggiuntive per alcuni comandi. Per visualizzare un elenco completo dei flag di Hugo (ce ne sono molti), consigliamo di usare il comando hugo help per visualizzare un elenco di tutti i flag disponibili.
Il File di Configurazione di Hugo
Il file di configurazione di Hugo supporta tre formati: YAML, TOML e JSON. Allo stesso modo, il file di configurazione di Hugo è config.yml, config.toml, o config.json, e potete trovarlo nella directory principale di un progetto Hugo.
Ecco come appare un tipico file di configurazione Hugo in formato YAML:
DefaultContentLanguage: en
theme:
- kinsta-static-site
contentdir: content
layoutdir: layouts
publishdir: public
paginate: 5
title: Kinsta Static Site
description: "This is a static site generated with Hugo!"
permalinks:
post: :slug/
page: :slug/
tags: "tag/:slug/"
author: "author/:slug/"Se avete usato WordPress o un altro CMS prima, alcune delle opzioni di configurazione potrebbero sembrarvi familiari. Per esempio, kinsta-static-site è il nome del tema del sito, Kinsta Static Site è il SEO meta title, e paginate (il numero di post per pagina) è 5.
Hugo ha dozzine di opzioni di configurazione che potete esplorare nella documentazione ufficiale di Hugo. Se avete bisogno di fare qualsiasi cambiamento di configurazione globale mentre sviluppate un sito con Hugo, è probabile che dobbiate modificare questo file di configurazione.
Come Creare un Sito con Hugo
Ora che abbiamo visto come installare e usare la Hugo CLI e le basi del file di configurazione di Hugo, creiamo un nuovo sito con Hugo.
Per creare un sito con Hugo, usate il comando qui sotto (cambiate pure my-hugo-site con qualcos’altro, se volete):
hugo new site my-hugo-site
Successivamente, andate alla cartella del sito e dovreste vedere i seguenti file e cartelle: file config.toml, cartella archetypes, cartella content, cartella layouts, cartella themes, cartella data e cartella static. Vediamo rapidamente in cosa consiste ognuno di questi file e cartelle.
Il File config.toml di Hugo
Come abbiamo evidenziato sopra, il file di configurazione principale di Hugo contiene le impostazioni globali per il vostro sito.
Cartella Archetypes di Hugo
La cartella archetypes è dove memorizzate i modelli di contenuto formattati in Markdown. Gli archetipi sono particolarmente utili se il vostro sito ha più formati di contenuto. Con gli archetipi di Hugo, potete creare un modello per ogni tipo di contenuto sul vostro sito. Questo vi permette di precompilare i file Markdown generati con tutte le impostazioni di configurazione necessarie.
Per esempio, se avete un tipo di contenuto podcast per visualizzare i vostri episodi podcast, potete creare un nuovo archetipo in archetypes/podcast.md con il contenuto qui sotto:
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
description: ""
season:
episode:
draft: true
---Con questo archetipo di podcast, potete poi usare il comando sottostante per creare un nuovo post:
hugo new podcast/s1e6_interview-with-kinsta-ceo.mdOra, se aprite il post appena creato, dovreste vedere questo:
---
title: "Interview with Kinsta CEO"
date: 2021-05-20T13:00:00+09:00
description: ""
Season: 1
episode: 6
draft: true
---Senza gli archetipi, dovreste specificare manualmente i parametri di facciata per ogni nuovo post che create. Mentre gli archetipi possono sembrare complessi e inutili all’inizio, possono farvi risparmiare molto tempo a lungo termine.
Cartella Content di Hugo
La cartella content è dove va il contenuto effettivo del vostro post. Hugo supporta entrambi i formati Markdown e HTML, con Markdown che è l’opzione più popolare per la sua facilità d’uso. Oltre a essere lo spazio di archiviazione generale per i post, potete usare la cartella dei content per organizzare ulteriormente il contenuto dei post.
Hugo tratta ogni directory di primo livello nella cartella content come una sezione di contenuto. Le sezioni di contenuto in Hugo sono simili ai tipi di post personalizzati in WordPress. Per esempio, se il vostro sito contiene post, pagine e podcast, la vostra cartella content avrà le directory posts, pages e podcasts dove vivono i file di contenuto per questi diversi tipi di post.
La Cartella Layouts di Hugo
La cartella layouts contiene i file HTML che definiscono la struttura del vostro sito. In alcuni casi, potreste vedere un sito Hugo senza una cartella layouts perché non deve trovarsi necessariamente nella cartella principale del progetto e può invece risiedere in una cartella del tema.
In modo simile ai temi di WordPress che usano PHP per i template, i template di Hugo consistono in HTML di base con ulteriori template dinamici alimentati dalle librerie integrate di Golang html/template e text/template. I vari file template HTML necessari per generare il markup HTML del vostro sito sono nella cartella layouts.
Cartella Themes di Hugo
Per i siti che preferiscono un modo più autonomo di memorizzare i file dei template e le risorse, Hugo supporta una cartella dei themes. I temi di Hugo sono simili ai temi di WordPress perché sono memorizzati in una cartella temi e contengono tutti i modelli necessari per il funzionamento di un tema.
Mentre alcuni utenti di Hugo preferiscono mantenere i file relativi ai temi nella directory principale del progetto, memorizzare questi file nella cartella dei themes permette una gestione e una condivisione più facile.
Cartella Data Hugo
La cartella data di Hugo è dove potete memorizzare dati supplementari (in formato JSON, YAML o TOML) che sono necessari per generare le pagine del vostro sito. I file di dati sono utili per le serie di dati più grandi che possono essere ingombranti da memorizzare direttamente in un file di contenuto o modello.
Per esempio, se volessi creare un elenco di tassi di inflazione del dollaro dal 1960 al 2020, ci vorrebbero circa 80 righe per rappresentare i dati (una riga per ogni anno). Invece di mettere questi dati direttamente in un file di contenuto o modello, potete crearli nella cartella data e popolarli con le informazioni necessarie.
Cartella Static di Hugo
La cartella static di Hugo è dove si memorizzano le risorse statiche che non richiedono alcuna elaborazione aggiuntiva. La cartella static è tipicamente dove gli utenti Hugo memorizzano immagini, font, file di verifica DNS e altro. Quando un sito Hugo viene generato e salvato in una cartella per una facile distribuzione, tutti i file nella cartella static vengono copiati così come sono.
Se vi state chiedendo perché non abbiamo menzionato i file JavaScript o CSS, è perché sono spesso elaborati dinamicamente tramite pipeline durante lo sviluppo del sito. In Hugo, i file JavaScript e CSS sono comunemente memorizzati all’interno della cartella themes perché richiedono un’elaborazione aggiuntiva.
Come Aggiungere un Tema a un Sito Hugo
Scaricare e installare un tema preconfezionato è un ottimo modo per iniziare a usare Hugo. I temi di Hugo sono di tutte le forme e dimensioni e molti di essi sono disponibili gratuitamente sul repository ufficiale dei temi di Hugo. Andiamo avanti e installiamo il popolare tema Hyde sul nostro sito Hugo.
Per prima cosa, navigate nella cartella del tema del vostro progetto nel Terminale:
cd <hugo-project-directory>/themes/Poi usate Git per clonare il tema Hyde nella cartella dei themes del vostro progetto.
git clone https://github.com/spf13/hyde.gitPoi, aggiungete la seguente linea al vostro file config.toml per attivare il tema Hyde:
theme = "hyde"A questo punto, il tema Hyde è installato e configurato. Il prossimo passo è quello di avviare il webserver di sviluppo integrato di Hugo per visualizzare il sito nel vostro browser web.
Come Visualizzare un Sito Hugo in Anteprima
Hugo include un webserver integrato per lo sviluppo, il che significa che non avete bisogno di installare un webserver di terze parti come Nginx o Apache solo per visualizzare il vostro sito localmente.
Per avviare il webserver di Hugo, eseguite il comando qui sotto nella directory principale del vostro progetto:
hugo server -DHugo costruirà le pagine del vostro sito e le renderà disponibili su http://localhost:1313/:
Se visitate l’URL nel vostro browser web, dovreste vedere il vostro sito Hugo usare il tema Hyde:
Per impostazione predefinita, il server di sviluppo locale di Hugo osserverà i cambiamenti e ricostruirà il sito automaticamente. Poiché la velocità di costruzione di Hugo è davvero alta, potete vedere gli aggiornamenti al vostro sito quasi in tempo reale, il che è raro nel mondo dei generatori di siti statici. Per dimostrarlo, creiamo il nostro primo post in Hugo.
Come Aggiungere Contenuti a un Sito Hugo
Aggiungere contenuti a un sito Hugo è molto diverso dal farlo con un CMS completo come WordPress o Ghost. Con Hugo, non esiste un livello CMS integrato per gestire i vostri contenuti. Ci si aspetta invece che siate voi a gestire e organizziare le cose come meglio credete.
In altre parole, non c’è un modo esplicitamente “corretto” di gestire i contenuti in Hugo. Condivideremo un metodo per aggiungere e gestire i contenuti in questa sezione, ma cambiate pure le cose man mano che prendete confidenza con Hugo.
Sezioni di Contenuto in Hugo
In Hugo, il primo strumento di organizzazione dei contenuti che avete a disposizione è la sezione contenut. Una sezione di contenuto in Hugo è simile a un post type in WordPress: non solo potete usarla come filtro di contenuto, ma anche come identificatore quando create temi personalizzati.
Per esempio, se avete una cartella blog, potete usarla per memorizzare tutti i vostri post del blog e mostrare un modello di pagina specifico che si applica solo ai post del blog.
Come Aggiungere Post in Hugo
Detto questo, creiamo una sezione di contenuto per i post del blog e aggiungiamo alcuni pezzi di contenuto. Create una nuova cartella chiamata posts nella cartella content del vostro progetto; questa è la sezione content.
Creiamo un altro livello organizzativo all’interno della cartella posts creando una cartella 2021. A questo punto, la vostra cartella content dovrebbe assomigliare a questa:
Ora, creiamo il nostro primo post. Come abbiamo discusso prima, Hugo supporta sia i file Markdown che quelli HTML per i contenuti. In generale, è meglio attenersi ai file Markdown perché sono più facili da scrivere, formattare e leggere.
Nella cartella content/posts/2021, create un nuovo file che finisce in .md (l’estensione del file Markdown). Potete rinominare il file come volete, ma la sintassi raccomandata per rinominare un file di contenuto Hugo è YYYY-MM-DD-a-sample-post.md.
Oltre a creare manualmente un file di contenuto, potete anche usare la Hugo CLI per creare un nuovo post con il comando seguente (assicuratevi di eseguire il comando dalla directory del vostro progetto):
hugo new posts/2021/2021-08-30-a-sample-post.mdNotate come la cartella content manca dal percorso qui sopra. Questo perché Hugo presume che tutti i file di contenuto vadano nella cartella content per impostazione predefinita.
Se aprite il file di contenuto appena creato, dovreste vedere alcune righe di metadati in cima al documento che assomigliano a questo:
---
title: "2021 08 30 a Sample Post"
date: 2021-08-30T13:44:28+09:00
draft: true
---Questi metadati, che sono formattati in YAML, sono chiamati “front matter”. Il front matter generato automaticamente è un vantaggio significativo dell’utilizzo della Hugo CLI. Il front matter è dove i dati unici per un post (nome del post, dati, stato della bozza, tag, categorie, ecc.) sono memorizzati. Il formato predefinito per il front matter può essere configurato per ogni sezione utilizzando gli archetipi.
Ora aggiungiamo del testo al post. Quando scrivete un post, assicuratevi sempre che il vostro contenuto sia sotto il front matter, in questo modo:
Una volta salvato il file dei contenuti, dovreste vedere Hugo ricostruire il vostro sito nel terminale. Nello screenshot qui sotto, potete vedere che Hugo ha ricostruito l’intero sito in 22 ms!
Se visitate il vostro sito Hugo nel browser web, dovreste vedere il nuovo post.
Come Aggiungere una Pagina in Hugo
Ora che abbiamo aggiunto un post al nostro sito Hugo, aggiungiamo anche una pagina. La maggior parte dei sistemi di gestione dei contenuti, incluso WordPress, distingue tra post e pagine. Tipicamente, un post è un contenuto datato, mentre una pagina consiste in un contenuto sempreverde o statico.
Per creare una pagina, abbiamo prima bisogno di una sezione di contenuto della pagina. Per farlo, create una cartella chiamata pages nella cartella content di Hugo. In seguito, usate il comando sottostante per aggiungere una nuova pagina “About” al vostro sito:
hugo new pages/about.mdNotate come la convenzione di denominazione delle pagine differisce dai post. A differenza dei post, le pagine non sono legate a una data specifica, quindi non è necessario includere la data di creazione nel nome del file.
Ora aggiungiamo del testo alla pagina “About”:
A questo punto, dovreste vedere la pagina About nel vostro browser web:
Ora che abbiamo due sezioni di contenuto – post e pagine – vediamo come applicare alcune personalizzazioni al sito, come modificare il titolo e la descrizione, aggiungere la pagina About al menu della barra laterale, cambiare il formato dei permalink e rimuovere le pagine dal feed dei post.
Come Cambiare il Titolo e la Descrizione del Sito
Il metodo esatto per cambiare il titolo e la descrizione del sito dipende dalla configurazione del vostro sito e/o dal tema attivo. Nel caso del tema Hyde, il titolo e la descrizione del sito possono essere cambiati nel file di configurazione Hugo (config.toml).
Lo sappiamo grazie al seguente codice del tema che visualizza la barra laterale:
<aside class="sidebar">
<div class="container sidebar-sticky">
<div class="sidebar-about">
<a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a>
<p class="lead">
{{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}
</p>
</div>
<nav>
<ul class="sidebar-nav">
<li><a href="{{ .Site.BaseURL }}">Home</a> </li>
{{ range .Site.Menus.main -}}
<li><a href="{{.URL}}"> {{ .Name }} </a></li>
{{- end }}
</ul>
</nav>
<p>{{ with .Site.Params.copyright }}{{.}}{{ else }}© {{ now.Format "2006"}}. All rights reserved. {{end}}</p>
</div>
</aside>Le due parti su cui concentrarsi sono:
{{ .Site.Title }}e…
{{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}Gli handlebars {{ }} sono parte del motore di template di Hugo e permettono di generare dinamicamente i dati nelle pagine renderizzate. Come esempio, {{ .Site.Title }} istruisce Hugo a controllare il file config.toml e a recuperare il valore mappato alla chiave Title.
Poiché la configurazione predefinita di Hugo usa My New Hugo Site come titolo del sito, questo è ciò che la barra laterale mostra. Se cambiamo il titolo del sito da config.toml scegliendone un altro, il cambiamento si rifletterà anche sul frontend.
Andiamo avanti e cambiamo il parametro del titolo nel config.toml da My New Hugo Site a Kinsta’s Hugo Site.
Passando alla descrizione del sito, potete vedere che il motore di template di Hugo supporta la logica condizionale. Tradotto in inglese semplice, il codice qui sotto indica a Hugo di controllare se un valore Params è assegnato alla chiave description nel file config.toml. In caso contrario, ecco una stringa predefinita da usare al suo posto.
{{ with .Site.Params.description }} {{.}} {{ else }} An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}Dato che non abbiamo una descrizione configurata nel file config.toml, Hugo visualizza di default “An elegant open source and mobile-first theme for Hugo made by @mdo. Originally made for Jekyll”.
Ora aggiorniamo il nostro file config.toml da:
baseURL = "http://example.org/"
languageCode = "en-us"
title = "Kinsta's Hugo Site"
theme = "hyde"A:
baseURL = "http://example.org/"
languageCode = "en-us"
title = "Kinsta's Hugo Site"
theme = "hyde"
[params]
description = "Kinsta is a premium managed WordPress hosting company."Come previsto, i cambiamenti sono ora visibili anche sul frontend:
Come Rimuovere le Pagine dal Feed dei Post
Sulla maggior parte dei blog, è comune che il post feed sulla homepage mostri solo i post. Per impostazione predefinita, il tema Hyde include tutti i file di contenuto nel post feed. Per cambiare questo comportamento, dovrete modificare la funzione range nel template index.html, che genera la home page.
La funzione range di Hugo itera su un insieme definito di elementi e poi fa qualcosa con i dati. Per impostazione predefinita, il template index.html del tema Hyde itera su .Site.RegularPages e filtra i dati come il permalink, il titolo del post e il riassunto del post prima di rendere l’HTML.
Poiché .Site.RegularPages include tutte le pagine regolari su Hugo, compresi sia i post che le pagine, viene visualizzata la pagina “About”. Cambiando gli elementi di range in .Site.RegularPages "Section" "posts", possiamo istruire Hugo a filtrare solo le pagine regolari nella sezione dei post, i file di contenuto nella cartella posts che abbiamo creato in precedenza.
Facciamo questa modifica partendo da questo template:
{{ define "main" -}}
<div class="posts">
{{- range .Site.RegularPages -}}
<article class="post">
<h1 class="post-title">
<a href="{{ .Permalink }}">{{ .Title }}</a>
</h1>
<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
{{ .Summary }}
{{ if .Truncated }}
<div class="read-more-link">
<a href="{{ .RelPermalink }}">Read More…</a>
</div>
{{ end }}
</article>
{{- end }}
</div>
{{- end }}…per arrivare a questo:
{{ define "main" -}}
<div class="posts">
{{- range where .Site.RegularPages "Section" "posts" -}}
<article class="post">
<h1 class="post-title">
<a href="{{ .Permalink }}">{{ .Title }}</a>
</h1>
<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
{{ .Summary }}
{{ if .Truncated }}
<div class="read-more-link">
<a href="{{ .RelPermalink }}">Read More…</a>
</div>
{{ end }}
</article>
{{- end }}
</div>
{{- end }}Dopo aver fatto questa modifica, la pagina iniziale visualizzerà solo i post, così:
Come Usare i Partial in Hugo
Una delle caratteristiche di template più potenti di Hugo sono i partial, template HTML incorporati in un altro template HTML. I partial permettono di riutilizzare il codice in diversi file di template senza gestire il codice in ogni file.
Per esempio, è comune vedere diverse sezioni di pagina (intestazione, footer, ecc.) nei loro file partial separati, che sono poi chiamati all’interno del file template baseof.html di un tema.
All’interno del file baseof.html del tema Ananke, potete vedere un esempio di un partial alla riga 18 – {{ partial "site-style.html" . }}.
In questo caso, {{ partial "site-style.html" . }} istruisce Hugo a sostituire il contenuto della riga 18 con il site-style.html nella cartella /layouts/partials. Se navighiamo verso /partials/site-style.html, vediamo il seguente codice:
{{ with partialCached "func/style/GetMainCSS" "style/GetMainCSS" }}
<link rel="stylesheet" href="{{ .RelPermalink }}" >
{{ end }}
{{ range site.Params.custom_css }}
{{ with partialCached "func/style/GetResource" . . }}{{ else }}
<link rel="stylesheet" href="{{ relURL (.) }}">
{{ end }}
{{ end }}Scaricando questo codice in un file separato, il file modello baseof.html può rimanere organizzato e facile da leggere. Mentre i partial non sono necessari, specialmente per progetti di base, sono utili per progetti più grandi con funzionalità più complesse.
Come Usare gli Shortcode in Hugo
Gli shortcode di Hugo sono simili ai partial in quanto permettono il riutilizzo del codice in molte pagine. Gli shortcode sono file HTML che risiedono nella cartella /layouts/shortcodes. La differenza principale è che i partial si applicano ai template HTML, mentre gli shortcode si applicano alle pagine di contenuto Markdown.
In Hugo, gli shortcodes vi permettono di sviluppare moduli di funzionalità che potete usare nelle pagine del vostro sito senza gestire i cambiamenti di codice per ogni pagina.
Se gestite un blog, è probabile che dobbiate passare attraverso il contenuto del corpo dei vostri post per aggiornare i riferimenti all’anno corrente. A seconda di quanti post avete sul vostro sito, questo compito può richiedere molto tempo!
Usando uno shortcode Hugo nei vostri file di contenuto, non dovrete più preoccuparvi di aggiornare i riferimenti all’anno!
Iniziamo creando uno shortcode in /layouts/shortcodes/current_year.html con il contenuto seguente:
{{ now.Format "2006" }}Gli shortcode possono essere incorporati nei post con questa sintassi: {{< shortcode_name >}}. Nel nostro caso, possiamo chiamare lo shortcode current_year.html con {{< shortcode_name >}} in questo modo:
---
title: "2021 08 30 a Sample Post"
date: 2021-08-30T13:44:28+09:00
draft: true
---
This post was created in the year {{< current_year >}}.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus, velit sit amet vulputate scelerisque, massa turpis fringilla nulla, commodo dapibus urna arcu at nunc. Mauris ultrices convallis ipsum eget facilisis. Curabitur ut rutrum sem. Praesent id nibh non enim mollis porta. Nam mollis, quam et vehicula tristique, lorem ante laoreet orci, sit amet congue tortor nibh sit amet leo. Curabitur lobortis neque tempor, vestibulum lacus nec, condimentum arcu. Nulla fringilla leo sit amet ipsum auctor sagittis. Vivamus aliquam iaculis posuere. Pellentesque malesuada neque sit amet consectetur fringilla. Curabitur felis tellus, mattis in dui vel, vestibulum tincidunt metus. Mauris eget elit dui. Etiam risus nulla, ultricies vitae molestie quis, placerat in magna. Proin interdum, orci ac auctor ullamcorper, tellus ex porta tortor, suscipit luctus libero odio quis arcu.
Phasellus dapibus pellentesque ex eget pulvinar. Proin vitae elit risus. Sed justo nulla, pellentesque eu erat eu, luctus bibendum magna. Curabitur at mi id augue egestas condimentum sed quis lectus. Aenean fringilla nisl sed tincidunt tristique. Cras scelerisque laoreet sapien a faucibus. Vivamus a vehicula arcu. Duis rutrum, massa eu tincidunt eleifend, est nulla faucibus nisl, sit amet consectetur neque velit at velit. Integer fermentum augue ut orci iaculis aliquet. Ut in gravida magna.Se visualizzate il post nel browser web, dovreste vedere l’anno corrente nella prima riga del post, in questo modo:
Come Aggiungere Immagini a un Post in Hugo
A differenza di WordPress e di altri sistemi di gestione dei contenuti completi, Hugo non include un sistema drag-and-drop per la gestione delle immagini. Quindi, la progettazione di un sistema di gestione delle immagini viene delegata all’utente finale.
Anche se Hugo non ha un modo standardizzato di gestire le immagini, un metodo popolare si basa sulla memorizzazione delle immagini nella cartella /static e sul loro riferimento nei post e nelle pagine utilizzando uno shortcode. Vediamo come potete organizzare le immagini di base in Hugo.
La prima cosa che dobbiamo fare è creare una struttura organizzativa per la nostra libreria di immagini. Anche se questo sembra complesso, tutto ciò che è richiesto è la creazione di alcune directory aggiuntive all’interno della cartella /static.
Iniziamo creando una cartella uploads in /static. All’interno della cartella uploads, create una cartella chiamata 2021 per contenere tutte le immagini caricate nel 2021.
Successivamente, aggiungiamo due immagini (blue1.jpg e blue2.jpg) nella cartella 2021.
In HTML, le immagini vengono visualizzate usando il tag <img>. Per esempio, per visualizzare blue1.jpg, possiamo usare il seguente HTML:
<img src="/uploads/2021/blue1.jpg" alt="Blue is the warmest color!">Anche se è possibile aggiungere questo HTML direttamente al file di contenuto Markdown, è meglio creare uno shortcode che potete utilizzare per visualizzare qualsiasi immagine dalla cartella uploads. In questo modo, se avete bisogno di aggiornare il tag img, potete modificare il template di shortcode senza modificare ogni istanza del tag img.
Per creare il template di shortcode, create un nuovo file in /layouts/shortcodes/img.html con il contenuto seguente:
<img src="/uploads/{{ .Get "src" }}" alt="{{ .Get "alt" }}Poi aggiungete lo shortcode qui sotto a un post del blog:
{{< img src="2021/blue1.jpg" alt="Blue is also the coolest color!">}Nel template dello shortcode, {{ .Get "src" }} e {{ .Get "alt" }} istruiscono Hugo a recuperare il contenuto dei parametri src< e alt< quando chiama uno shortcode.
Ora, se ricaricate il post del blog, dovreste vedere l’immagine così:
Come Distribuire un Sito Hugo
Finora avete imparato come installare Hugo, creare un sito, aggiungere un tema, fare modifiche di base ai file di configurazione ed espandere la funzionalità del vostro sito con partial e shortcode. A questo punto, dovreste avere un sito funzionale pronto per essere messo online.
Poiché Hugo è un generatore di siti statici, potete distribuire l’HTML, il CSS e il JS che genera ovunque con un webserver. Dato che i requisiti tecnici per servire siti statici sono così bassi, potete ospitarli gratuitamente attraverso una vasta gamma di provider come Netlify, Vercel, Cloudflare Pages e altri.
In precedenza, abbiamo usato hugo server -D per far girare un server di sviluppo locale per vedere in anteprima i cambiamenti al nostro sito in tempo reale. Per generare il sito per intero, possiamo usare il comando hugo nella directory principale del nostro progetto. Dopo che la generazione del sito è completa, dovreste vedere una nuova cartella public nella directory del vostro progetto. All’interno di questa cartella, troverete tutti i file che devono essere caricati su un server o su un servizio di cloud storage come Amazon S3.
Generare il sito localmente e caricarlo manualmente su Amazon S3 o su un server con Nginx è un modo per distribuire un sito generato staticamente. Tuttavia, non è il più efficiente perché richiede di caricare manualmente nuovi file ogni volta che fate un cambiamento.
Invece, un’opzione migliore è quella di collegare la cartella del vostro progetto Hugo a un repository GitHub e collegare il repository GitHub a un servizio di distribuzione automatica come Netlify. Con questa configurazione, potete modificare il vostro sito, fare un push dei cambiamenti su GitHub e innescare un nuovo build e implementarlo su Netlify senza alcun intervento manuale. Ora, vediamo come fare tutto questo!
Come Caricare il Vostro Progetto Hugo su GitHub
Per prima cosa, dovrete creare un repository GitHub per il vostro progetto. Per farlo, create un account GitHub (se non ne avete già uno) e scaricate l’applicazione desktop ufficiale di GitHub. Dopo aver installato l’applicazione GitHub, fate clic su File nella barra dei menu e selezionate New repository. Date al repository un nome a vostra scelta, lasciate per ora le altre opzioni nei loro stati predefiniti e fate clic su Create Repository.
Per impostazione predefinita (su macOS), l’applicazione GitHub crea nuovi repository in /Users/username/Documents/GitHub. Dato che abbiamo chiamato il nostro repository my-hugo-site, lo possiamo trovare in /Users/brianli/Documents/GitHub/my-hugo-site.
Successivamente, spostate tutti i file nella cartella del vostro progetto originale nella nuova cartella del repository GitHub. Cancellate la cartella public perché non abbiamo bisogno di caricarla su GitHub.
Se tornate all’applicazione GitHub, dovreste ora vedere un elenco di file modificati. Per caricare il repository su GitHub, aggiungete un riepilogo, fate clic su Commit to main e poi su Publish Repository nell’angolo in alto a destra.
Per impostazione predefinita, l’opzione “Keep this code private” è selezionata. Se volete che il vostro codice sia open-source e accessibile pubblicamente, deselezionatelo. Infine, fate clic ancora una volta su Publish Repository.
Ora, se andate su GitHub, dovreste vedere il vostro repository online così:
Come Collegare il Repo GitHub a Netlify
Se non avete già un account Netlify, registratevi qui. Per collegare un repository GitHub a Netlify, fate clic su New site from Git nella bacheca di Netlify.
Sotto Continuous Deployment, selezionate l’opzione GitHub.
Successivamente, usate la casella di ricerca per trovare il repository del vostro progetto Hugo.
Successivamente, specificate le impostazioni per il deployment continuo. Poiché Netlify può rilevare una configurazione Hugo, le impostazioni predefinite dovrebbero funzionare bene per un deployment di base.
Quando avrete più familiarità con Hugo, potrete approfondire le variabili d’ambiente, i comandi di compilazione personalizzati e altro. Per il momento, impostare il comando di compilazione su hugo e la directory pubblica su public vi permetterà di distribuire un semplice sito Hugo. Dopo aver specificato il comando di compilazione e la directory pubblica, fate clic su Deploy Site.
Poiché Hugo è un generatore di siti statici molto veloce, la distribuzione dovrebbe richiedere solo pochi secondi per un sito di base. Una volta che il deployment finisce, sarete in grado di vedere un URL di staging nella bacheca di Netlify. Fate clic sull’URL per visualizzare il sito distribuito.
Ecco il nostro sito Hugo su Netlify. Come potete vedere, è identico al sito sul nostro ambiente locale:
A questo punto, potete impostare un dominio personalizzato e un certificato SSL per il vostro sito ospitato su Netlify. Per farlo, vi consigliamo di fare riferimento alla documentazione ufficiale di Netlify.
Dato che abbiamo collegato Netlify a GitHub, un nuovo commit al repo GitHub del progetto Hugo attiverà automaticamente una nuova distribuzione su Netlify!
Riepilogo
Hugo è uno dei generatori di siti statici più popolari al mondo e per una buona ragione. Non solo ha un’elaborazione di build super veloce, ma ha anche potenti capacità di template che supportano partial e shortcodes.
In questo tutorial avete imparato come configurare Hugo, creare un nuovo progetto, aggiungere file di contenuto, modificare i file del tema e distribuire un sito statico finito. Raccomandiamo di consultare la documentazione ufficiale di Hugo per saperne di più su Hugo e le sue caratteristiche più avanzate come le funzioni personalizzate, il front matter e i buildpack CSS/JS.
Cosa pensate di Hugo e degli altri generatori di siti statici? Fatecelo sapere nei commenti qui sotto!
Brian utilizza WordPress da oltre 10 anni e si diverte a condividere le sue conoscenze con la community. Nel tempo libero, Brian ama suonare il pianoforte ed esplorare Tokyo con la sua macchina fotografica. Potete mettervi in contatto con Brian sul suo sito web all'indirizzo brianli.com.
Lascia un commento