Capitolo 1: Introduzione a Hugo

In questo primo capitolo incominceremo a trattare di siti statici, dinamici e GoHugo. Introdurremo le differenze tra le varie tecnologie e a seguire spiegheremo che cosa è Hugo.

Differenza tra siti dinamici e siti statici

A differenza dei siti dinamici, i siti statici hanno meno o nessuna dipendenza dai database, server di applicazioni e quindi fornisce una maggiore sicurezza, una maggiore velocità di caricamento e migliori prestazioni per gli utenti finali. Mantenere e aggiornare manualmente ogni pagina di un sito statico è ingombrante. Quindi, sono nati i generatori di siti statici dove lo sviluppatore scrive la funzionalità del sito, l’editor di contenuti pubblica o aggiorna gli articoli, e infine, il generatore di siti web rende il contenuto in file HTML e risparmia migliaia di ore di sviluppo e manutenzione. Dei 283 generatori di siti statici opensource elencati su staticgen.com, Hugo rappresenta una buona parte dei generatori attualmente utilizzati (oltre ad essere il motore del mio blog!).

Generatore di siti statici

Un generatore di siti statici o SSG è uno strumento di compilazione che produce siti statici. Questi siti hanno pagine create in anticipo e non cambiano spesso tra le visite degli utenti. Un SSG di solito prende i modelli e aggiunge loro i dati forniti per creare le pagine HTML. Le pagine pre-renderizzate vengono quindi ospitate dove gli utenti possono accedervi. Questo è diverso dai siti dinamici in cui viene creata una pagina quando un utente lo richiede.

Gli SSG semplificano lo sviluppo del sito. In alcuni casi, la creazione di un sito con un SSG si ottiene solo in pochi passaggi e in un periodo molto breve. Gli SSG sono ottimi strumenti per i nuovi sviluppatori e per coloro con esperienza limitata che desiderano creare siti senza troppi problemi. Molti SSG sono ricchi di risorse e forniscono una vasta gamma di temi del sito, utilità comuni come commenti e integrazione di hosting, ecc. I siti statici coinvolgono molte meno parti mobili e sono più facili da costruire, proteggere e mantenere. Sono veloci poiché le pagine sono già pre-renderizzate e vengono servite così come sono, sfruttando elementi come la cache. Il ridimensionamento dei siti statici è più semplice rispetto ad altri siti con infrastrutture più complesse.

Una soluzione potrebbe essere quella di scrivere a mano i file HTML e file CSS, ma ci sono molti svantaggi in questo. Con un sito HTML scritto a mano, alcuni componenti uguali in pagine diverse devono essere ripetuti. Per esempio, devi inserire il menu in alto in ogni pagina. Se cambi il menu, devi cambiarlo in ogni pagina. Un generatore di siti statici se ne occupa per te. Dovrai solo cambiare il menu in un posto e il SSG farà il resto.

Vantaggi dei generatori di siti statici

Veloce caricamento della pagina

Come accennato in precedenza, l’HTML statico pre-renderizzato dei siti statici si carica molto più velocemente delle pagine di un sito dinamico. I siti Web veloci sono davvero importanti per una buona esperienza utente e anche per aumentare il tuo sito nelle classifiche dei motori di ricerca (vedi SEO e parametri CLS).

Sicurezza

I siti statici per loro stessa natura non dispongono di database e non richiedono alcuna elaborazione. Ciò significa che non c’è alcun database da hackerare o piattaforma da poter trarre vantaggio. La maggioranza degli attacchi avviene attraverso l’esecuzione di codice remoto che mira il database del sito web: rimuovendo la “pre-esecuzione” dall’equazione vengono rimosse anche vulnerabilità come SQL injection (SQLi), Cross-site Scripting (XSS), Remote Code Execution (RCE).

La maggior parte degli aggressori prende di mira i siti Web creati con il software Open Source più popolare, poiché una volta individuata una vulnerabilità, possono scalare il loro attacco su tutti i siti in esecuzione su quel software. Avendo un sito statico, stai rimuovendo il gran parte della tua superficie di attacco, limitando così notevolmente le possibilità di essere hackerato.

Prestazioni

Poiché i siti Web dinamici devono elaborare il contenuto e interrogare il database per eseguire il rendering delle pagine, utilizzano molte risorse del server. Di conseguenza, un picco di traffico può sovraccaricare il server e causare il rallentamento del sito fino a una dolorosa scansione o un arresto anomalo. Poiché non ci sono script dinamici in esecuzione su un sito statico e ogni pagina è pre-renderizzata, è meno probabile che il tuo sito vada giù quando c’è un picco di traffico.

Ospita il tuo sito ovunque

Poiché il tuo sito è composto interamente da file HTML, puoi praticamente prenderli e caricarli dove vuoi: Dropbox, Amazon, GitHub Pages, Google Cloud, una USB… praticamente ovunque.

Nessuna manutenzione richiesta

Non ci sono plugin o aggiornamenti software necessari per mantenere il tuo sito aggiornato e sicuro. L’unica manutenzione richiesta è nel caso in cui si voglia aggiornare il generatore ad una versione successiva con nuove caratteristiche. Nulla perà vieta di rimanere ad una versione precedente.

Scrivi offline

Poiché i generatori di siti statici non necessitano di server per aggiornare i contenuti, non devi essere connesso a Internet quando aggiorni il tuo sito. Puoi salvarlo offline e pubblicarlo in un secondo momento.

Creazione rapida di contenuti

I generatori di siti statici non hanno un backend in cui modifichi i tuoi contenuti. Al contrario, userai un semplice editor di testo per modificare i file. Alcuni sviluppatori trovano inefficiente tutto ciò che fa clic in una dashboard e preferiscono l’efficienza di Markdown agli editor WYSIWYG.

Semplice gestione dei contenuti

Se non sei tecnico e stai utilizzando WordPress può essere difficile interagire con i tuoi dati al di fuori dell’area di backend. Capire dove sono archiviati i tuoi post o provare a recuperarli dopo un guasto del server può essere un compito arduo. Ancora peggio, i famosi costruttori di siti come SquareSpace e Wix non offrono nemmeno la funzionalità per esportare il sito che hai lavorato così duramente per costruire. Sono i tuoi dati, il tuo lavoro, la tua creatività, non dovrebbe essere semplice possederli e controllarli?

Hugo

Hugo (anche chiamato GoHugo) è un generatore di siti statici e un framework scritto in Go. Utilizza i modelli Go per i suoi layout. Un vantaggio chiave che lo distingue dagli altri SSG è la velocità con cui crea le pagine. Fornisce una straordinaria gestione dei contenuti, è disponibile su più piattaforme OS, supporta tassonomie, offre la generazione di indici, supporta URL graziosi e può essere ospitato praticamente ovunque. Oltre a queste funzionalità, fornisce la ricarica in tempo reale durante lo sviluppo, supporta diverse opzioni di tipo di contenuto e dispone di funzionalità di conteggio delle parole e minuti di lettura. Questi sono solo alcuni esempi delle numerose funzionalità che Hugo ha da offrire e ne parleremo a mano a mano che il corso si sviluppa.

Casi d’uso

Qui di seguito andremo a presentare alcuni casi d’uso per l’utilizzo dei blog.

Siti web personali e blog

Sono finiti i giorni in cui ci si nascondeva da internet. In un modo o nell’altro, chiunque nel mondo moderno abbia qualche utente di internet come amico o parente è già presente su internet. Piuttosto che cercare di nascondersi da esso, l’approccio giusto sarebbe quello di abbracciare internet e controllare la propria impressione online piuttosto che lasciarla dipendere da altri.

Hugo è molto adatto per iniziare a lavorare con un sito web personale. I grandi obiettivi per i siti personali sono una bassa manutenzione, bassi costi e la flessibilità di mostrare i propri gusti personali. In questo libro vedremo come possiamo costruire qualcosa a bassissima manutenzione, hosting quasi gratuito e abbastanza flessibilità da personalizzare quanto si desidera. Aggiungete a questo le grandi prestazioni, la possibilità di aggiornare quando e dove volete, il pieno supporto SEO e un inizio veloce.

Puoi prendere uno qualsiasi dei temi di Hugo disponibili pubblicamente per iniziare ed essere operativo con un sito web decente in pochi minuti. Sarete sorpresi di quante caratteristiche sono disponibili senza alcuna personalizzazione. Una volta che sei lì, è molto facile inforcare il tema e iniziare a personalizzarlo per lasciare la tua impressione unica su internet.

Siti business

Hugo si adatta a squadre che aggiornano i contenuti in parallelo senza alcun problema. Le aziende le cui competenze principali non sono la costruzione di siti web hanno bisogno di qualcosa di facile da mantenere, con bassi costi e grandi prestazioni. Vogliono anche flessibilità e controllo. Hugo ha tutte queste caratteristiche. È ben pensato e facile da capire per qualsiasi team di venditori che può essere aggiunto allo sviluppo del sito web con un contratto a breve termine. Hugo fornisce pochissimi casi in cui uno sviluppatore potrebbe scrivere cattivo codice che rallenterebbe il sito web. L’intero meccanismo è abbastanza flessibile per aggiungere immediatamente la pagina personalizzata di cui il business ha bisogno senza dover passare attraverso e strappare l’intero sito web.

I siti web Hugo possono essere estesi per fornire caratteristiche riservate ai siti web dinamici che si aggiornano al volo su un server. Vedrete in questo corso come possiamo costruire funzionalità a basso costo e bassa manutenzione come carrelli della spesa e schermate di pagamento mantenendo il resto del sito web gestito staticamente.

Documentazione

Hugo ha un grande supporto per leggere dati strutturati da un file su disco come un CSV o un JSON e poi creare un sito web da esso. È ancora possibile applicare i propri temi personalizzati. Ha un supporto integrato per l’evidenziazione della sintassi e può scalare fino a un numero molto grande di pagine molto facilmente. Questo lo rende molto adatto a scrivere siti web personalizzati che potrebbero leggere dai documenti API e preparare una versione formattata in modo ordinato delle specifiche.

Procediamo ora all’installazione di Gohugo per iniziare a creare un blog d’esempio.