Se desideri creare un sito web statico professionale e iniziare a generare le tue prime entrate online, Hugo è lo strumento ideale per lo sviluppo web e la creazione di siti web moderni e veloci.
Cos’è Hugo?#
Hugo è un generatore di siti statici open-source. E’ pensato per la rapidità, flessibilità e facilità di utilizzo per la gestione e caricamento della pagine web.
Viene utilizzato principalmente per la creazione di: blog, portfolio, pagine vetrina.
Vediamo insieme come scaricare ed installare Hugo nel tuo sistema operativo.
Requisiti per l’installazione#
Prima di procedere con l’installazione di Hugo, verifica di avere nel tuo sistema operativo questi strumenti:
Seleziona la versione adatta al tuo sistema operativo
Come installare Hugo su Windows#
Ora che hai installato il necessario ci occorre un ulteriore pacchetto: Chocolatey. E’ un gestore di pacchetti per windows. Ti sarà utile anche se vorrai utilizzare diversi temi e potrai installare ed aggiornare i software direttamente dal terminale
Installa Chocolatey:
- Apri il promt dei comandi come amministratore
- Copia e incolla questo comando per procedere con l’installazione
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.SecurityProtocolType]::Tls12; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))- Primi invio e Choco verrà installato automaticamente
Installare Hugo su Windows
Una volta che hai installato Choco possiamo installare Hugo con questi semplicissimi passaggi:
Da terminale utilizza questo comando:
choco install hugo-extended
Hugo è ora correttamente installato.
Come installare Hugo su macOS#
Per installare Hugo su mac utilizzeremo un gestore di pacchetti dedicato. Homebrew.
Installa Homebrew
- Apri il terminale e copia questo codice
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"- Segui le istruzioni per completare l’installazione
Installa Hugo
Ora che abbiamo installato Homebrew possiamo installare Hugo utilizzando questo comando:
brew install hugo
Come installare Hugo su Linux#
Se utilizzi una distribuzione basata su Ubuntu o Debian, puoi utilizzare apt-get.
- Apri il terminale e aggiorna i pacchetti utilizzando questo comando:
sudo apt-get update
- Installa Hugo:
sudo apt-get install hugo
Ora Hugo è correttamente installato.
Controllo di versione#
Una volta terminata l’installazione, è buona regola verificare che tutto sia andato a buon fine:
hugo version
Come configurare Hugo#
Ora che abbiamo tutto il necessario puoi finalmente iniziare a configurare il tuo primo progetto con Hugo.
- Crea una cartella (per comodità la creiamo sul desktop)
Crea una cartella per il tuo progetto. Noi la chiameremo my_project.
- Apri la cartella in Visual Code e utilizza il terminale.
Per aprire il terminale in visual code vai in alto a sinistra File>Terminale.
- Genera un nuovo sito utilizzando questo comando sul terminale:
hugo new site mywebsite
- Cambia la directory:
cd mywebsite
cd viene utilizzando nel terminal per “direzionarti” in una cartella specifica.Troverai ora una nuova cartella con all’interno i file generati da hugo.
Non ci resta che inizializzare un respository git vuoto:
git init
Questo passaggio ti permetterà di utilizzare i temi specifici di hugo che vengono caricati su Github. In questa guida verrà utilizzato il tema Ananke, se preferisci utilizzare temi differenti visita la sezione temi di hugo.
- Aggiungiamo come submodule il tema che abbiamo scelto per questa guida:
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
Se hai eseguito tutto correttamente dovresti ritrovarti con una schermata di questo tipo:
Ora non ci resta che impostare il nome del tema all’interno del file hugo.toml, lo puoi trovare come ultimo file nella cartella.
Selezioniamo il file e scriviamo questa riga: theme = 'ananke'. In questo modo:
baseURL e title: da qui puoi impostare il nome del sito e il suo url. Se non hai ancora un URL lascia il campo così com’è.
Il tuo sito web ora è correttamente configurato! Non dobbiamo far altro che avviare il server inserendo nel terminale:
hugo server
Se il terminale restituisce questa schermata significa che il server si è avviato correttamente. Per poter visualizzare il nostro sito, come suggerisce il terminale, dobbiamo utilizzare questo url in una pagina web:
http://localhost:1313/
Quando un nuovo sito viene caricato come nel nostro caso, lo troverai privo di contenuti. Non preoccuparti è del tutto normale.
Hugo fornisce una struttura essenziale, viene quindi richiesto l’inserimento manuale dei contenuti. Ma permette facilmente di eseguire operazione come: aggiungere post, strutturare il menu, inserire tag e categorie personalizzate in pochi e semplici passaggi.
Come aggiungere contenuto al tuo sito web#
Ti mostro come poter inserire un nuovo post per avere una idea di come funziona hugo.
Per prima cosa fermiamo il server utilizzando CTRL+C nel terminale.
Ogni volta che vuoi inserire del contenuto utilizza questo comando:
hugo new content content/posts/first-post.md
Notiamo subito che la cartella content si è popolata.
Possiamo iniziare a scrivere del contenuto di prova. Salva il file e fai ripartire il server in modo da poter visualizzare il tuo contenuto appena creato.
Per lavorare al meglio, leggere la documentazione fornita dai creatori dei temi è essenziale anche per capire tutte le enormi potenzialità che questo generatore di siti statici ha da offrire.
Leggi la documentazione ufficiale di Hugo se sei interessato ad approfondire l’argomento.
GoHugo e i suoi temi utilizzano il linguaggio Mardown, se vuoi capire come utilizzarlo ti rimando ad un articolo dedicato