Come costruire un sito statico incredibilmente veloce con Hugo

Pubblicato: 2021-10-26

Hugo è un generatore di siti statici (SSG) scritto in Go (aka Golang), un linguaggio di programmazione compilato ad alte prestazioni spesso utilizzato per lo sviluppo di applicazioni e servizi di back-end.

Oggi, Hugo è in grado di generare la maggior parte dei siti Web in pochi secondi (<1 ms per pagina). Questo spiega perché Hugo si autodefinisce "il framework più veloce al mondo per la creazione di siti Web".

In questo articolo, daremo un'occhiata alla storia di Hugo, cosa lo rende così veloce e come puoi iniziare a creare il tuo sito statico Hugo.

Cos'è Hugo? E perché è popolare?

Screenshot della homepage di Hugo.
Homepage del sito web di Hugo.

Steve Francia ha originariamente sviluppato il generatore di siti statici Hugo nel 2013 e Bjrn Erik Pedersen ha assunto la carica di 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 modelli di temi e sputa file HTML che puoi facilmente distribuire online, e fa tutto questo in modo estremamente rapido.

Nel 2021 ci sono decine, se non centinaia, di generatori statici. Ogni generatore di siti statici ha il suo fascino. Jekyll è popolare tra gli sviluppatori di Ruby e, sebbene non sia veloce come altre opzioni, è stato uno dei primi generatori di siti statici a vedere un'adozione diffusa. Gatsby è un altro popolare SSG adatto per lo sviluppo di siti distribuibili staticamente con funzionalità dinamiche.

Quindi, con così tanti SSG là fuori, cosa distingue Hugo?

Hugo si autodefinisce "il framework più veloce al mondo per la creazione di siti Web" ️ quindi se stai cercando un modo per creare rapidamente un sito statico, inizia da qui ️ Fai clic per twittare

Hugo è veloce

In termini di prestazioni grezze, Hugo è il miglior generatore di siti statici al mondo. Rispetto a Jekyll, Hugo ha dimostrato di essere 35 volte più veloce da Forestry. Allo stesso modo, Hugo può eseguire il rendering di un sito di 10.000 pagine in 10 secondi, un'attività che richiederebbe a Gatsby più di mezz'ora per essere completata. Non solo Hugo è l'SSG più veloce in termini di tempi di costruzione, ma è anche veloce da installare.

Hugo viene fornito come eseguibile autonomo, a differenza di Jekyll, Gatsby e altri SSG che richiedono l'installazione di dipendenze con un gestore di pacchetti. Ciò significa che puoi scaricare e utilizzare Hugo immediatamente senza doversi preoccupare delle dipendenze del software.

Creare modelli è facile in Hugo

Nel gergo SSG, "templare" si riferisce al processo di aggiunta di segnaposto per l'inserimento di contenuti dinamici all'interno di una pagina HTML. Per accedere al titolo di una pagina, puoi utilizzare la variabile {{ .Title }} . Pertanto, all'interno di un modello HTML Hugo, è comune vedere {{ .Title }} racchiuso in tag H1 in questo modo:

 <h1>{{ .Title }}</h1>

In fase di compilazione, Hugo acquisirà automaticamente il titolo all'interno di un file di contenuto e inserirà il titolo tra i due tag <h1> . Hugo ha una varietà di variabili di template integrate e puoi persino scrivere funzioni personalizzate per elaborare i dati in fase di compilazione. Per la creazione di modelli, Hugo utilizza le librerie html/template e text/template integrate di Go. Questo aiuta a ridurre il sovraccarico delle applicazioni perché Hugo non ha bisogno di installare librerie di terze parti per la creazione di modelli.

Ecco un esempio di un modello di home page index.html dal popolare tema Ananke. Come puoi vedere, assomiglia a un file HTML standard con del codice di template aggiuntivo:

 TBD: GRAB CODE FROM HERE: https://github.com/theNewDynamic/gohugo-theme-ananke

Come installare Hugo

Hugo viene fornito come eseguibile compilato, il che significa che non dovrai 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 consigliato per macOS e Linux richiede Homebrew, un gestore di pacchetti per l'installazione e l'aggiornamento delle applicazioni. Se non hai già installato Homebrew, puoi installarlo eseguendo il comando seguente in Terminale:

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Dopo aver installato Homebrew, esegui il comando seguente per installare Hugo:

 brew install hugo

Come installare Hugo su Windows

Per gli utenti Windows, Hugo può essere installato utilizzando i gestori di pacchetti Chocolatey o Scoop. Poiché le istruzioni per l'installazione di Chocolatey e Scoop sono un po' più complesse di Homebrew, consigliamo di fare riferimento alle loro pagine di documentazione ufficiale qui e qui.

Dopo aver installato Chocolatey o Scoop, puoi installare Hugo usando uno dei seguenti comandi (a seconda del tuo gestore di pacchetti):

 choco install hugo-extended -confirm
 scoop install hugo-extended

Come verificare che Hugo sia installato correttamente

Per verificare che Hugo sia stato installato correttamente, esegui il seguente comando:

 hugo version

Questo comando Terminale dovrebbe fornire informazioni sulla versione attualmente installata di Hugo in questo modo:

 hugo v0.85.0+extended darwin/arm64 BuildDate=unknown

Comandi e configurazione di Hugo

Prima di immergerci nella creazione di un sito statico con Hugo, prendiamo familiarità con i suoi vari comandi CLI e parametri del file di configurazione.

Comandi dell'interfaccia a riga di comando di Hugo

  • hugo check – esegue vari controlli di verifica
  • hugo config : mostra la configurazione per un sito Hugo
  • hugo convert : converte i contenuti in diversi formati
  • hugo deploy : distribuisce il tuo sito a un provider cloud
  • hugo env : mostra la versione di Hugo e le informazioni sull'ambiente
  • hugo gen : fornisce l'accesso a vari generatori
  • hugo help – mostra le informazioni su un comando
  • hugo import – ti consente di importare un sito da un'altra posizione
  • hugo list : mostra un elenco di vari tipi di contenuto
  • hugo mod – fornisce l'accesso a vari moduli di supporto
  • hugo new : ti consente di creare nuovi contenuti per il tuo sito
  • hugo server – avvia un server di sviluppo locale
  • hugo version : mostra la versione corrente di Hugo

Hugo CLI ha anche una varietà di flag per specificare opzioni aggiuntive per alcuni comandi. Per visualizzare un elenco completo delle bandiere di Hugo (ce ne sono molte), ti consigliamo di utilizzare il comando di hugo help per visualizzare un elenco di tutte le bandiere 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 puoi trovarlo nella directory principale di un progetto Hugo.

Un'immagine del file di configurazione di hugo
File di configurazione di Hugo.

Ecco come appare un tipico file di configurazione di 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 hai già utilizzato WordPress o un altro CMS, alcune delle opzioni di configurazione potrebbero sembrarti familiari. Ad esempio, kinsta-static-site è il nome del tema del sito, Kinsta Static Site è il meta titolo SEO e la paginate (il numero di post per pagina) è 5 .

Hugo ha dozzine di opzioni di configurazione, tutte esplorabili nella documentazione ufficiale di Hugo. Se devi apportare modifiche alla configurazione globale durante lo sviluppo di un sito Hugo, è probabile che dovrai modificare questo file di configurazione.

Come creare un sito Hugo

Ora che abbiamo spiegato come installare e utilizzare la CLI di Hugo e le basi del file di configurazione di Hugo, creiamo un nuovo sito Hugo.

Per creare un sito Hugo, usa il comando seguente (se lo desideri, sentiti libero di cambiare my-hugo-site in qualcos'altro):

 hugo new site my-hugo-site

Creazione di un nuovo sito statico hugo
Crea un nuovo sito Hugo.

Quindi, vai alla cartella del sito e dovresti vedere i seguenti file e cartelle: file config.toml , cartella archetypes , cartella contenuto , cartella layout , cartella temi , cartella dati e cartella statica . Esaminiamo rapidamente cos'è ciascuno di questi file e cartelle.

Il file config.toml di Hugo

Come evidenziato sopra, il file di configurazione principale di Hugo contiene le impostazioni globali per il tuo sito.

Cartella Archetipi di Hugo

La cartella archetipi è il punto in cui memorizzi i modelli di contenuto formattati in Markdown. Gli archetipi sono particolarmente utili se il tuo sito ha più formati di contenuto. Con gli archetipi di Hugo, puoi creare un modello per ogni tipo di contenuto sul tuo sito. Ciò ti consente di precompilare i file Markdown generati con tutte le impostazioni di configurazione necessarie.

Ad esempio, se disponi di un tipo di contenuto podcast per visualizzare gli episodi del tuo podcast, puoi creare un nuovo archetipo in archetypes/podcast.md con i contenuti seguenti:

 --- title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} description: "" season: episode: draft: true ---

Con questo archetipo di podcast, puoi quindi utilizzare il comando seguente per creare un nuovo post:

 hugo new podcast/s1e6_interview-with-kinsta-ceo.md

Ora, se apri il post appena creato, dovresti vedere questo:

 --- title: "Interview with Kinsta CEO" date: 2021-05-20T13:00:00+09:00 description: "" Season: 1 episode: 6 draft: true ---

Senza archetipi, dovresti specificare manualmente i parametri in primo piano per ogni nuovo post che crei. Sebbene all'inizio gli archetipi possano sembrare complessi e non necessari, a lungo termine possono farti risparmiare molto tempo.

Cartella dei contenuti di Hugo

La cartella dei contenuti è dove va il contenuto del tuo post effettivo. Hugo supporta sia i formati Markdown che HTML, con Markdown che è l'opzione più popolare grazie alla sua facilità d'uso. Oltre ad essere lo spazio di archiviazione generale per i post, puoi utilizzare la cartella dei contenuti per organizzare ulteriormente i contenuti dei post.

Hugo tratta ogni directory di primo livello nella cartella dei contenuti come una sezione dei contenuti. Le sezioni di contenuto in Hugo sono simili ai tipi di post personalizzati in WordPress. Ad esempio, se il tuo sito contiene post, pagine e podcast, la tua cartella dei contenuti conterrà le directory di post , pagine e podcast in cui risiedono i file di contenuto per questi diversi tipi di post.

Cartella dei layout di Hugo

La cartella layout contiene file HTML che definiscono la struttura del tuo sito. In alcuni casi, potresti vedere un sito Hugo senza una cartella dei layout perché non deve trovarsi nella directory principale del progetto e può invece risiedere all'interno di una cartella del tema.

Simili ai temi WordPress che utilizzano PHP per la creazione di modelli, i modelli Hugo sono costituiti da HTML di base con modelli dinamici aggiuntivi basati sulle librerie html/template e text/template integrate di Golang. I vari file modello HTML necessari per generare il markup HTML del tuo sito si trovano nella cartella dei layout .

Cartella dei temi di Hugo

Per i siti che preferiscono un modo più autonomo di archiviare file e risorse modello, Hugo supporta una cartella dei temi . I temi di Hugo sono simili ai temi di WordPress in quanto sono archiviati in una directory dei 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, la memorizzazione di questi file all'interno della cartella dei temi consente una gestione e una condivisione più semplici.

Cartella dati Hugo

La cartella dei dati di Hugo è dove puoi archiviare i dati supplementari (in formato JSON, YAML o TOML) necessari per generare le pagine del tuo sito. I file di dati sono utili per set di dati più grandi che possono essere ingombranti da archiviare direttamente in un file di contenuto o modello.

Ad esempio, se si desidera creare un elenco di tassi di inflazione in USD dal 1960 al 2020, occorrerebbero circa 80 righe per rappresentare i dati (una riga per ogni anno). Invece di inserire questi dati direttamente in un file di contenuto o modello, puoi crearlo nella cartella dei dati e popolarlo con le informazioni necessarie.

Cartella statica Hugo

La cartella statica di Hugo è dove memorizzi le risorse statiche che non richiedono alcuna elaborazione aggiuntiva. La cartella statica è in genere il punto in cui gli utenti Hugo archiviano immagini, caratteri, 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 statica vengono copiati così come sono.

Se ti stai chiedendo perché non abbiamo menzionato i file JavaScript o CSS, è perché spesso vengono elaborati dinamicamente tramite pipeline durante lo sviluppo del sito. In Hugo, i file JavaScript e CSS sono comunemente archiviati nella cartella del tema perché richiedono un'elaborazione aggiuntiva.

Come aggiungere un tema a un sito Hugo

Scaricare e installare un tema premade è un ottimo modo per iniziare con Hugo. I temi Hugo sono disponibili in tutte le forme e dimensioni e molti di essi sono disponibili gratuitamente nel repository ufficiale dei temi Hugo. Andiamo avanti e installiamo il popolare tema Hyde sul nostro sito Hugo.

Innanzitutto, vai alla cartella del tema del tuo progetto in Terminale:

 cd <hugo-project-directory>/themes/

Quindi, usa Git per clonare il tema Hyde nella directory dei temi del tuo progetto.

 git clone https://github.com/spf13/hyde.git

Quindi, aggiungi la seguente riga al tuo file config.toml per attivare il tema Hyde:

 theme = "hyde"

A questo punto, il tema Hyde è installato e configurato. Il prossimo passo è avviare il server web di sviluppo integrato di Hugo per visualizzare il sito nel tuo browser web.

Come visualizzare in anteprima un sito Hugo

Hugo viene fornito con un server web integrato per scopi di sviluppo, il che significa che non è necessario installare un server web di terze parti come Nginx o Apache solo per visualizzare il tuo sito in locale.

Per avviare il server web di Hugo, esegui il comando seguente nella directory principale del tuo progetto:

 hugo server -D

Hugo creerà quindi le pagine del tuo sito e le renderà disponibili all'indirizzo http://localhost:1313/ :

Un'immagine del server di sviluppo locale Hugo
Server di sviluppo locale Hugo.

Se visiti l'URL nel tuo browser web, dovresti vedere il tuo sito Hugo con il tema Hyde:

Sito Hugo con il tema Hyde.
Sito di Hugo visualizzato con il tema Hyde.

Per impostazione predefinita, il server di sviluppo locale di Hugo controllerà le modifiche e ricostruirà il sito automaticamente. Poiché la velocità di costruzione di Hugo è così veloce, gli aggiornamenti del tuo sito possono essere visualizzati quasi in tempo reale, cosa rara da vedere nel mondo dei generatori di siti statici. Per dimostrarlo, creiamo il nostro primo post in Hugo.

Come aggiungere contenuti a un sito Hugo

L'aggiunta di contenuti a un sito Hugo è molto diversa da un CMS completo come WordPress o Ghost. Con Hugo, non esiste un livello CMS integrato per gestire i tuoi contenuti. Invece, dovresti gestire e organizzare le cose come meglio credi.

In altre parole, non esiste un modo esplicitamente "corretto" per gestire i contenuti in Hugo. Condivideremo un metodo per aggiungere e gestire i contenuti in questa sezione, ma sentiti libero di cambiare le cose man mano che acquisisci familiarità con Hugo.

Sezioni di contenuto in Hugo

In Hugo, il primo strumento di organizzazione dei contenuti che hai a tua disposizione è la sezione dei contenuti . Una sezione di contenuto in Hugo è simile a un tipo di post in WordPress: non solo puoi usarla come filtro dei contenuti, ma puoi anche usarla come identificatore quando crei temi personalizzati.

Ad esempio, se disponi di una cartella della sezione del contenuto del blog , puoi utilizzarla per archiviare tutti i post del blog e visualizzare un modello di pagina specifico che si applica solo ai post del blog.

Come aggiungere post in Hugo

Con questo in mente, creiamo una sezione di contenuto per i post del blog e aggiungiamo alcuni contenuti. Crea una nuova cartella denominata post nella cartella dei contenuti del tuo progetto: questa è la sezione dei contenuti.

Creiamo un altro livello organizzativo all'interno della cartella dei post creando una cartella 2021 . A questo punto, la tua directory dei contenuti dovrebbe apparire così:

Immagine della directory dei contenuti higo.
Directory dei contenuti di Hugo.

Ora creiamo il nostro primo post. Come discusso in precedenza, Hugo supporta sia i file Markdown che 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 , crea un nuovo file che termina con .md (l'estensione del file Markdown). Puoi nominare il file come vuoi, ma la sintassi consigliata per nominare un file di contenuto Hugo è AAAA-MM-GG-a-sample-post.md .

Oltre a creare manualmente un file di contenuto, puoi anche utilizzare la CLI di Hugo per creare un nuovo post con il comando seguente (assicurati di eseguire il comando dalla directory del tuo progetto):

 hugo new posts/2021/2021-08-30-a-sample-post.md

Nota come la cartella del contenuto manca dal percorso sopra. Questo perché Hugo presume che tutti i file di contenuto andranno nella cartella dei contenuti per impostazione predefinita.

Se apri il file di contenuto appena creato, dovresti vedere alcune righe di metadati nella parte superiore del 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 "argomento principale". Le prime informazioni generate automaticamente sono uno dei vantaggi significativi dell'utilizzo dell'interfaccia a riga di comando di Hugo. L'argomento principale è dove vengono archiviati i dati univoci per un post (nome del post, dati, stato della bozza, tag, categorie, ecc.). Il formato predefinito per la prima parte può essere configurato per sezione utilizzando gli archetipi.

Ora aggiungiamo del testo al post. Quando scrivi un post, assicurati sempre che i tuoi contenuti siano al di sotto della prima pagina in questo modo:

Visualizzazione di un post del blog in Hugo.
Post sul blog in Hugo.

Una volta salvato il file di contenuto, dovresti vedere Hugo ricostruire il tuo sito in Terminale. Nello screenshot qui sotto, puoi vedere Hugo ricostruire l'intero sito in 22 ms!

Veduta di una ricostruzione del sito di Hugo.
Ricostruzione del sito di Hugo.

Se visiti il ​​tuo sito Hugo nel tuo browser web, dovresti vedere il nuovo post.

Sito Hugo con un post visualizzato.
Sito Hugo con un post.

Come aggiungere una pagina in Hugo

Ora che abbiamo aggiunto un post al nostro sito Hugo, aggiungiamo una pagina. La maggior parte dei sistemi di gestione dei contenuti, incluso WordPress, distingue tra post e pagine. In genere, un post è un contenuto datato, mentre una pagina è composta da contenuto sempreverde o statico.

Per creare una pagina, abbiamo prima bisogno di una sezione del contenuto della pagina . Per fare ciò, crea una cartella denominata pagine nella cartella dei contenuti di Hugo. Successivamente, utilizza il comando seguente per aggiungere una nuova pagina "Informazioni" al tuo sito:

 hugo new pages/about.md

Nota come la convenzione di denominazione per le 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 "Informazioni":

Informazioni sulla pagina in Hugo.
Informazioni sulla pagina in Hugo.

A questo punto, dovresti vedere la pagina Informazioni nel tuo browser web:

Informazioni sulla pagina nel browser web dal vivo
Informazioni sulla pagina nel browser web.

Ora che abbiamo due sezioni di contenuto - post e pagine - esaminiamo come apportare alcune personalizzazioni al sito, come modificare il titolo e la descrizione, aggiungere la pagina Informazioni al menu della barra laterale, modificare il formato dei permalink e rimuovere pagine dal feed del post.

Come modificare il titolo e la descrizione del sito

Il metodo esatto per modificare il titolo e la descrizione del sito dipende dalla configurazione del sito e/o dal tema attivo. Nel caso del tema Hyde, il titolo e la descrizione del sito possono essere modificati nel file di configurazione di Hugo ( config.toml ).

Lo sappiamo a causa del seguente codice del tema che esegue il rendering della 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}}

I manubri {{ }} fanno parte del motore di modelli di Hugo e consentono la generazione dinamica di dati nelle pagine renderizzate. Ad esempio, {{ .Site.Title }} indica a Hugo di controllare il file config.toml e di recuperare il valore mappato sulla chiave del titolo .

Poiché la configurazione predefinita di Hugo utilizza My New Hugo Site come titolo del sito, questo è ciò che mostra la barra laterale. Se cambiamo il titolo del sito in config.toml in qualcos'altro, la modifica si rifletterà anche sul frontend.

Andiamo avanti e cambiamo il parametro title nel config.toml da My New Hugo Site a Kinsta's Hugo Site .

Modifica del titolo del sito in Hugo.
Modifica del titolo del sito in Hugo.

Passando alla descrizione del sito, puoi vedere che il motore di creazione di modelli di Hugo supporta la logica condizionale. Tradotto in un inglese semplice, il codice seguente indica a Hugo di verificare se un valore Params è assegnato alla chiave di descrizione nel file config.toml . In caso contrario, ecco una stringa predefinita da utilizzare.

 {{ 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}}

Dal momento che non abbiamo una descrizione configurata nel file config.toml , Hugo esegue automaticamente il rendering “Un elegante tema open source e mobile first per Hugo realizzato da @mdo. Originariamente realizzato per 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, le modifiche ora sono visibili anche sul frontend:

Modifica della descrizione del sito Hugo.
Modifica la descrizione del sito Hugo.

Come rimuovere le pagine dal feed dei post

Nella maggior parte dei blog, è comune che il feed dei post sulla home page mostri solo i post. Per impostazione predefinita, il tema Hyde include tutti i file di contenuto nel feed del post. Per modificare questo comportamento, dovrai modificare la funzione range nel modello index.html , che genera la home page.

La funzione di range di Hugo esegue l'iterazione su un insieme definito di elementi e quindi fa qualcosa con i dati. Per impostazione predefinita, il modello index.html del tema Hyde si estende su .Site.RegularPages e filtra i dati come il permalink, il titolo del post e il riepilogo del post prima di eseguire il rendering dell'HTML.

Poiché .Site.RegularPages include tutte le normali pagine su Hugo, inclusi sia i post che le pagine, viene visualizzata la pagina "Informazioni". Modificando gli elementi range in .Site.RegularPages "Section" "posts" , possiamo indicare a Hugo di filtrare solo le pagine normali nella sezione dei post : i file di contenuto nella cartella dei post che abbiamo creato in precedenza.

Hai bisogno di un hosting velocissimo, affidabile e completamente sicuro per il tuo sito WordPress? Kinsta fornisce tutto questo e un supporto di livello mondiale 24 ore su 24, 7 giorni su 7, da esperti di WordPress. Dai un'occhiata ai nostri piani

Apportiamo la modifica ora modificando il modello da questo:

 {{ 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 }}

A questa:

 {{ 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 apportato questa modifica, la home page visualizzerà solo i post in questo modo:

Visualizza i post solo nella home page.
Visualizza i post solo nella home page.

Come usare i parziali in Hugo

Una delle funzionalità di creazione di modelli più potenti di Hugo sono i parziali: modelli HTML incorporati in un altro modello HTML. I parziali consentono il riutilizzo del codice in diversi file modello senza gestire il codice in ogni file.

Ad esempio, è comune vedere diverse sezioni di pagina (intestazione, piè di pagina, ecc.) nei loro file parziali separati, che vengono quindi richiamati all'interno del file modello baseof.html di un tema.

All'interno del file baseof.html nel tema Ananke, puoi vedere un esempio di un partial sulla riga 18 – {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} .

In questo caso, {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} indica a Hugo di sostituire il contenuto della riga 18 con site-style.html nella cartella /layouts/partials . Se andiamo a /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 di facile lettura. Sebbene i parziali non siano necessari, specialmente per i progetti di base, sono utili per progetti più grandi con funzionalità più complesse.

Come usare gli shortcode in Hugo

Gli shortcode Hugo sono simili ai parziali in quanto consentono il riutilizzo del codice su una varietà di pagine. Gli shortcode sono file HTML che risiedono nella cartella /layouts/shortcodes . La differenza principale è che i parziali si applicano ai modelli HTML, mentre gli shortcode si applicano alle pagine di contenuto di Markdown.

In Hugo, gli shortcode ti consentono di sviluppare moduli di funzionalità che puoi utilizzare nelle pagine del tuo sito senza gestire le modifiche al codice per ciascuna pagina.

Se gestisci un blog, è probabile che dovrai esaminare il contenuto del corpo dei tuoi post per aggiornare i riferimenti dell'anno all'anno in corso. A seconda di quanti post hai sul tuo sito, questa attività può richiedere molto tempo!

Utilizzando uno shortcode Hugo nei tuoi file di contenuto, non dovrai più preoccuparti di aggiornare i riferimenti dell'anno!

Iniziamo creando uno shortcode in /layouts/shortcodes/current_year.html con i contenuti seguenti:

 {{ 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 visualizzi il post nel browser web, dovresti vedere l'anno in corso nella prima riga del post in questo modo:

Usa uno shortcode Hugo per generare automaticamente l'anno in corso.
Usa uno shortcode Hugo per generare automaticamente l'anno in corso.

Come aggiungere immagini a un post in Hugo

A differenza di WordPress e di altri sistemi di gestione dei contenuti a tutti gli effetti, Hugo non include un sistema di trascinamento della selezione per la gestione delle immagini. Pertanto, la progettazione di un sistema di gestione delle immagini viene scaricata sull'utente finale.

Sebbene Hugo non abbia un modo standardizzato per gestire le immagini, un metodo popolare si basa sulla memorizzazione delle immagini nella cartella /static e sul riferimento ad esse in post e pagine utilizzando uno shortcode. Esaminiamo come puoi eseguire l'organizzazione di base delle immagini in Hugo.

La prima cosa che dovremo fare è creare una struttura organizzativa per la nostra libreria di immagini. Anche se sembra complesso, tutto ciò che serve è la creazione di alcune directory aggiuntive all'interno della cartella /static .

Iniziamo creando una cartella di upload in /static . All'interno della cartella dei caricamenti , crea una cartella denominata 2021 per contenere tutte le immagini caricate nel 2021.

Gestione delle immagini in Hugo.
Gestione delle immagini in Hugo.

Successivamente, aggiungiamo due immagini ( blue1.jpg e blue2.jpg ) nella cartella 2021 .

Aggiunta di immagini al
Aggiunta di immagini alla cartella "2021".

In HTML, le immagini vengono visualizzate utilizzando il tag <img> . Ad esempio, per visualizzare blue1.jpg , possiamo utilizzare l'HTML seguente:

 <img src="/uploads/2021/blue1.jpg" alt="Blue is the warmest color!">

Sebbene sia possibile aggiungere questo codice HTML direttamente al file di contenuto di Markdown, è meglio creare uno shortcode che puoi utilizzare per visualizzare qualsiasi immagine dalla cartella dei caricamenti. In questo modo, se hai bisogno di aggiornare il tag img , puoi modificare il modello shortcode senza modificare ogni istanza del tag img .

Per creare il modello di shortcode, crea un nuovo file in /layouts/shortcodes/img.html con il contenuto seguente:

 <img src="/uploads/{{ .Get "src" }}" alt="{{ .Get "alt" }}

Quindi, aggiungi lo shortcode di seguito a un post del blog:

 {{< img src="2021/blue1.jpg" alt="Blue is also the coolest color!">}

Nel modello shortcode, {{ .Get "src" }} e {{ .Get "alt" }} indicano a Hugo di recuperare il contenuto dei parametri src< e alt< quando si chiama uno shortcode.

Ora, se ricarichi il post del blog, dovresti vedere l'immagine in questo modo:

Esempio di uno shortcode di immagine in Hugo.
Codice breve dell'immagine in Hugo.

Come distribuire un sito Hugo

Fino a questo post, hai imparato come installare Hugo, creare un sito, aggiungere un tema, apportare modifiche di base ai file di configurazione ed espandere le funzionalità del tuo sito con codici parziali e brevi. A questo punto, dovresti avere un sito funzionale pronto per essere distribuito online.

Poiché Hugo è un generatore di siti statici, puoi distribuire HTML, CSS e JS che genera ovunque con un server web. Poiché i requisiti tecnici per servire i siti statici sono così bassi, puoi ospitarli gratuitamente su un'ampia gamma di provider come Netlify, Vercel, Cloudflare Pages e altri.

In precedenza, abbiamo utilizzato il hugo server -D per avviare un server di sviluppo locale per visualizzare in anteprima le modifiche al nostro sito in tempo reale. Per generare il sito per intero, possiamo utilizzare il comando hugo nella directory principale del nostro progetto. Al termine della generazione del sito, dovresti vedere una nuova cartella pubblica nella directory del tuo progetto. All'interno di questa cartella troverai tutti i file che devono essere caricati su un server o un servizio di cloud storage come Amazon S3.

Genera il tuo sito Hugo in locale.
Genera il tuo sito Hugo in locale.

Generare il tuo sito in locale e caricarlo manualmente su Amazon S3 o su un server che esegue Nginx è un modo per distribuire un sito generato staticamente. Tuttavia, non è il più efficiente perché richiede il caricamento manuale di nuovi file ogni volta che apporti una modifica.

Invece, un'opzione migliore è collegare la cartella del progetto Hugo a un repository GitHub e collegare il repository GitHub a un servizio di distribuzione automatizzato come Netlify. Con questa configurazione, puoi modificare il tuo sito, inviare le modifiche a GitHub e attivare una nuova build e distribuzione su Netlify senza alcun intervento manuale. Ora, vediamo come fare tutto questo!

Come caricare il tuo progetto Hugo su GitHub

Innanzitutto, dovrai creare un repository GitHub per il tuo progetto. Per fare ciò, crea un account GitHub (se non ne hai già uno) e scarica l'app desktop GitHub ufficiale. Dopo aver installato l'app GitHub, fai clic su File nella barra dei menu e seleziona Nuovo repository . Assegna al repository un nome a tua scelta, lascia le altre opzioni nei loro stati predefiniti per ora e fai clic su Crea repository .

Crea un repository GitHub.
Crea un repository GitHub.

Per impostazione predefinita (su macOS), l'app GitHub crea nuovi repository in /Users/username/Documents/GitHub . Poiché abbiamo chiamato il nostro repository my-hugo-site , il nostro repository può essere trovato in /Users/brianli/Documents/GitHub/my-hugo-site .

Quindi, sposta tutti i file nella cartella del progetto originale nella nuova cartella del repository GitHub. Assicurati di eliminare la cartella pubblica perché non è necessario caricare quella cartella su GitHub.

Copia il progetto nella cartella del repository GitHub.
Copia il progetto nella cartella del repository GitHub.

Se torni all'app GitHub, ora dovresti vedere un elenco di file modificati. Per caricare il repository su GitHub, aggiungi un riepilogo, fai clic su Commit to main e fai clic su Pubblica repository nell'angolo in alto a destra.

Esegui il commit del repository e carica su GitHub.
Esegui il commit del repository e caricalo su GitHub.

Per impostazione predefinita, l'opzione "Mantieni questo codice privato" è selezionata. If you want your code to be open-source and publicly accessible, feel free to uncheck it. Finally, click Publish Repository once again.

Publish your GitHub repository.
Publish your GitHub repository.

Now, if you go to GitHub, you should see your repository online like so:

Hugo project repository on GitHub.
Hugo project repository on GitHub.

How to Link GitHub Repo to Netlify

If you don't already have a Netlify account, sign up for one here. To link a GitHub repository to Netlify, click New site from Git in the Netlify dashboard.

New site from Git on Netlify.
New site from Git on Netlify.

Under Continuous Deployment , select the GitHub option.

Selezionare
Select “GitHub” for continuous deployment.

Next, use the search box to find your Hugo project repository.

Find your Hugo project repository.
Find your Hugo project repository.

Next, specify the settings for the continuous deployment. Since Netlify can detect a Hugo configuration, the default settings should work fine for a basic deployment.

As you get more familiar with Hugo, you may delve into environment variables, custom build commands, and more. For the time being, setting the build command to hugo and the public directory to public will allow you to deploy a simple Hugo site. After specifying the build command and public directory, click Deploy Site .

Distribuisci il sito Hugo su Netlify.
Distribuisci il sito Hugo su Netlify.

Poiché Hugo è un generatore di siti statici così veloce, la distribuzione dovrebbe richiedere solo pochi secondi per un sito di base. Una volta terminata la distribuzione, sarai in grado di vedere un URL di staging nella dashboard di Netlify. Fare clic sull'URL per visualizzare il sito distribuito.

URL di staging Netlify.
URL di staging Netlify.

Ecco il nostro sito Hugo su Netlify. Come puoi vedere, è identico al sito nel nostro ambiente locale:

Sito di Hugo su Netlify.
Sito di Hugo su Netlify.

A questo punto, puoi impostare un dominio personalizzato e un certificato SSL per il tuo sito ospitato da Netlify. Per farlo, ti consigliamo di fare riferimento alla documentazione ufficiale di Netlify.

Dato che abbiamo collegato Netlify a GitHub, un nuovo commit nel repository GitHub del progetto Hugo attiverà automaticamente una nuova distribuzione su Netlify!

Pronto a costruire un sito statico in tempi record? Inizia con Hugo ️ Clicca per twittare

Sommario

Hugo è uno dei generatori di siti statici più popolari al mondo e per una buona ragione. Non solo ha un'elaborazione di compilazione super veloce, ma include anche potenti funzionalità di creazione di modelli che supportano parziali e shortcode.

In questo tutorial hai imparato a configurare Hugo, creare un nuovo progetto, aggiungere file di contenuto, modificare file di temi e distribuire un sito statico finito. Ti consigliamo di consultare la documentazione ufficiale di Hugo per saperne di più su Hugo e sulle sue funzionalità più avanzate come funzioni personalizzate, informazioni preliminari e pacchetti di build CSS/JS.

Cosa ne pensi di Hugo e di altri generatori di siti statici? Fatecelo sapere nei commenti qui sotto!