Capitolo 3: Installazione del tema

Per creare un nuovo sito con le directory necessarie, è sufficiente aprire una nuova sessione shell e digitare il seguente comando:

[email protected]: $ hugo new site awesome-blog
Congratulations! Your new Hugo site is created in \awesome-blog\.

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.

awesome-blog sarà il titolo del nostro blog. Più o meno la struttura delle cartelle sarà la seguente:

├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

Struttura delle cartelle di Hugo

Una volta eseguito il hugo newcomando, accedi alla nuova directory e controlla la struttura della nuova cartella. Hugo dovrebbe creare automaticamente diverse cartelle per te che utilizzerai alla fine per archiviare diversi tipi di file e contenuti.

In questa sezione, esamineremo brevemente per cosa viene utilizzata ciascuna cartella.

Archetipi

La cartella degli archetipi sarà molto probabilmente quella che usi di meno. Memorizzerà tutti i file archetipici che decidi di creare per il tuo progetto. Un Archetipo è solo una parola complicata che significa qualcosa che si ripete. In questo caso si riferisce al contenuto frontale, che è solo l’informazione che memorizziamo su una particolare pagina del sito web. Se stessimo scrivendo un post sul blog, l’archetipo potrebbe specificare che dobbiamo fornire il titolo del post, il nome dell’autore e una descrizione del contenuto.

Contenuto

La cartella dei contenuti è dove memorizzeremo tutti i contenuti del nostro sito Web (grande sorpresa) il che significa che tutti i post del blog, gli articoli o qualsiasi contenuto web che scrivi andranno qui. Se stessimo scrivendo un blog di viaggio, potremmo inserire un post sul blog sulla visita al Colosseo qui.

Dati

La cartella dei dati è essenzialmente un database per il tuo sito web statico. è un luogo in cui è possibile memorizzare i dati che devono essere utilizzati sul sito web. Generalmente la cartella dei dati conterrà una serie di file con elenchi di informazioni al loro interno. Nel caso di un blog di viaggio, potremmo memorizzare un elenco di paesi e le loro capitali nella sezione dati. Quindi potremmo facilmente accedere a quei dati in tutto il blog.

Layout

Uno degli strumenti fondamentali che Hugo utilizza per aiutarti a organizzare il tuo sito web sono i layout. I layout sono fondamentalmente scheletri che puoi utilizzare sul tuo sito. Se decidi di utilizzare i layout (e dovresti) andranno in questa cartella.

Il layout più semplice per un sito Web sarebbe un’intestazione e un piè di pagina. La maggior parte dei siti Web ha un’intestazione di navigazione nella parte superiore in cui gli utenti possono accedere ai collegamenti del sito. E un piè di pagina in basso con informazioni aggiuntive. Poiché questi elementi appaiono spesso su ogni pagina, possono essere inseriti in un layout in modo che debbano essere scritti solo una volta.

Temi

Se decidi di utilizzare un tema con il tuo sito Web, tutti i file per il tema andranno qui. Generalmente, a meno che tu non sappia cosa stai facendo, non vuoi fare confusione con i file in questa cartella.

Config.toml

Il file config.toml è dove vengono impostate le variabili di configurazione che controllano gli aspetti universali del tuo sito web.

Il file config.toml è molto simile all’app delle impostazioni sul tuo smartphone. Tutti gli smartphone hanno un’app per le impostazioni in cui è possibile apportare modifiche e personalizzare lo smartphone come meglio piaccia.

Il file config.toml funziona allo stesso modo. È l’abbraccio centrale di configurazione per il sito web. Inutile dire che questo è IL file più importante in un sito hugo. Impareremo nel corso delle lezioni a configurare il nostro sito web e ad esplorare meglio le possibilità di personalizzazione di GoHugo.

Installazione di un tema

Procediamo ora all’installazione di un tema già esistente creato da un membro della comunità. È possibile trovare i temi sia su Github che sul sito dedicato themes.gohugo.io , classificati per categorie. Qui ci sono tutti i temi sotto la categoria “blog”.

Una volta trovato un tema che desideri utilizzare, è il momento di importarlo nel tuo progetto. Ci sono due modi per farlo. Il più semplice è usare git. Basta inserire un cd nella cartella Themes e clonare il repository che desideri. Devi anche aggiungere il tema al tuo file config.toml.

cd themes/
git clone path-to-git-repo.git

Una volta clonato il tema che vuoi usare, l’ultima cosa che devi fare è dire a hugo che vuoi usare quel tema. Vai al tuo file config.toml e aggiungi una riga che specifica il nome del tema che hai importato.

# config.toml file
+++
theme = your-theme-name
+++

Ora riavvia il tuo sito hugo e dovresti vedere il tuo nuovo tema. Gioca con il tema aggiungendo file di contenuto, tassonomie e dati. Il tema dovrebbe sapere automaticamente cosa fare con tutti i tuoi contenuti e lo organizzerà per te.

Scarica un paio di temi e vedi quale funziona per il tuo sito web. Per passare a un tema diverso è sufficiente scaricare quello nuovo (non è necessario eliminare i file per quello esistente) e modificare il nome del tema nel file config.toml. Alcuni temi hanno bisogno di una configurazione aggiuntiva, assicurati sempre di leggere anche la documentazione allegata al tema che hai scelto.