I generatori di siti statici creano siti HTML, con layout di pagina prevedibili e contenuti con presentazioni regolari come i blog. Ci sono molti framework che possono sfruttare un linguaggio di programmazione e consentirti di riutilizzare il codice e processare risorse per queste pagine HTML, ma questo articolo metterà a confronto due dei più popolari: Hugo e Jekyll. (Per una comparazione tra un sito statico e un sito dinamico, vedi Jekyll vs WordPress)
Perché utilizzare pagine HTML statiche?
I generatori di siti statici sono interessanti perché producono siti sicuri che richiedono poco mantenimento e sono più veloci da servire rispetto alle pagine web generate dinamicamente. Con le pagine web dinamiche, un framework web installato su un server genera la pagina che un utente visualizza. Un utente fa una richiesta, il server interroga un database, estrae le informazioni che gli utenti desiderano vedere, combina quei dati in una pagina HTML, e quindi invia quella pagina a un utente.
Con le pagine HTML statiche, le pagine sono pre-renderizzate, quindi il server non fa alcun lavoro nella costruzione della pagina. Si occupa solo di inviare la pagina appropriata all’utente. Questo significa che le pagine HTML statiche sono più veloci e i requisiti di calcolo per il server sono molto più ridotti; un aspetto importante negli ambienti cloud dove si paga per la potenza di calcolo.
Le pagine statiche eliminano la generazione della pagina, quindi l’utente riceve la propria pagina molto più velocemente. I rischi per la sicurezza sono anche minori perché ci sono meno componenti in movimento per gli attaccanti da infiltrare e sfruttare. Le pagine HTML statiche sono facilmente memorizzate nella cache, quindi sono ben adatte per essere servite dalle reti di distribuzione dei contenuti (CDN), che rendono i tempi di risposta ancora più veloci.
Poiché le pagine statiche non richiedono ai server di eseguire calcoli o interrogare il database, è possibile distribuirle utilizzando opzioni di hosting molto semplici e a basso costo come un bucket Amazon S3 o le Pagine GitHub.
Generatori di siti statici
Potresti semplicemente scrivere una pagina HTML e metterla su un server, tornando ai primi giorni del web, ma i generatori di siti statici rendono molto più semplice creare nuove pagine che utilizzano modelli esistenti o modificare tutte le tue pagine esistenti contemporaneamente.
Uno dei primi generatori di siti statici a riprendere questa tendenza nello sviluppo web è stato Jekyll. Hugo si è unito cinque anni dopo.
Che cos’è Hugo?
Hugo è un generatore di siti statici super veloce e altamente sicuro che si posiziona come uno strumento divertente e moderno per la creazione di siti web. È scritto in Go e i siti possono essere ospitati ovunque. Una delle caratteristiche più distintive è che i siti statici di Hugo non hanno bisogno di un database in esecuzione come Ruby, PHP o Python. Secondo il loro sito web, il generatore di siti statici di Hugo “è lo strumento più veloce del suo genere” elencando velocità medie di costruzione del sito inferiori a un secondo.
Ulteriori informazioni su “Cosa è Hugo”.
Cos’è Jekyll?
Jekyll è un generatore di siti statici open source scritto in Ruby dal co-fondatore di Github, Tom Preston-Werner. Traduce documenti di testo in siti statici che possono essere utilizzati per siti web basati su informazioni o blog. Ha un supporto integrato per le pagine di Github ed è uno dei generatori di siti statici più popolari disponibili.
Ulteriori informazioni su “Cos’è Jekyll”
Hugo contro Jekyll
Con uno qualsiasi dei due generatori, puoi avere un blog preimpostato in funzione in meno di trenta minuti. Se parti da zero, Hugo è leggermente più facile da installare. Con Jekyll, devi installare un paio di prerequisiti come Ruby. Go viene precompilato come binario preinstallato insieme all’installazione di Hugo.
Per entrambi i framework Jekyll e Hugo, di solito si scrive un file di contenuto come un post del blog in HTML o Markdown. Questo contenuto viene combinato con modelli HTML, che incorniciano e stilizzano il contenuto, producendo un file HTML per la visualizzazione sul web.
Entrambi i framework consentono agli sviluppatori di aggiungere variabili al contenuto, utilizzando il linguaggio di markup YAML, e di consumare file di dati in formati comuni come JSON e CSV. Entrambi i framework offrono anche numerose funzionalità utili per un blog, come i tag e la possibilità di indirizzare i file di contenuto verso pagine HTML finite. Sono anche open source, quindi puoi richiedere modifiche e contribuire a miglioramenti.
La prima e più fondamentale differenza tra i framework Jekyll e Hugo è il linguaggio in cui sono scritti. Jekyll è scritto in Ruby, un linguaggio di script popolare che è stato uno dei primi linguaggi ad essere dotato di un framework web orientato, rendendolo estremamente popolare per la costruzione veloce di siti web. Hugo è scritto in Go, sviluppato da Google con l’obiettivo di esecuzione concorrente, ottimizzando per il dispiegamento in ambienti cloud dove la potenza di calcolo è distribuita su molte macchine.
Ogni framework ha anche preferenze diverse su quali linguaggi funzionino meglio. Jekyll offre il supporto per CoffeeScript e SASS/SCSS. Hugo supporta TOML e JSON markdown nei file di contenuto, ma per supportare SASS e SCSS potrebbe essere necessaria una configurazione aggiuntiva.
La situazione del modello
Uno dei principali vantaggi del framework Jekyll è la facilità d’uso, la documentazione ben sviluppata e il supporto ampio da parte di importanti organizzazioni come GitHub. Jekyll è stato rilasciato dodici anni fa e ha contribuito a generare un nuovo interesse per i siti HTML statici. Hugo è stato rilasciato in seguito ed è meno popolare, quindi ha un ecosistema di plug-in e modelli meno sviluppato.
I temi di GitHub topics offrono ben 1.200 opzioni da scegliere per Jekyll, mentre sulle pagine dei temi di Hugo sono offerte solo 370 opzioni (anche se è possibile creare i propri temi). È ovviamente molto più probabile che si trovi un tema con l’aspetto desiderato con Jekyll. Jekyll è supportato da GitHub, quindi se si desidera un deployment semplice e senza costi, Jekyll funziona perfettamente con GitHub Pages, così è possibile avere un semplice blog Jekyll online molto rapidamente seguendo l’eccellente documentazione di GitHub.
Un’altra differenza tra i framework Hugo e Jekyll è che creare un nuovo sito con Jekyll eseguendo il comando jekyll new my-awesome-site installa un tema di base, mentre creare un nuovo sito con il comando hugo new site my-awesome-site di Hugo genera solo la struttura delle cartelle e un file archetype. Con Jekyll, avrai qualcosa con cui lavorare immediatamente, mentre con Hugo ti troverai davanti a uno schermo vuoto in attesa che tu aggiunga un tema o modelli personalizzati.
Questo può essere ottimo per una configurazione totalmente personalizzata, ma Jekyll offre un percorso molto più rapido per vedere contenuti con cui lavorare.
Velocità, più velocità
Uno dei principali vantaggi dell’utilizzo del generatore di siti statici Hugo è la sua velocità. Sfruttando il focus sulla concorrenza del linguaggio Go, significa che i blog con migliaia di voci o tonnellate di immagini genereranno HTML più rapidamente. Questo è importante se stai eseguendo codice in un’area in cui stai pagando per la potenza di calcolo.
Conta anche durante lo sviluppo, poiché le modifiche apportate ai modelli o ai contenuti vengono ri-renderizzate più rapidamente con Hugo. Questa differenza di velocità è evidente anche con un basso numero di pagine, ma diventa significativa se stai costruendo centinaia di pagine di contenuto.
Hugo Bonus
Hugo offre supporto per l’internazionalizzazione, fornendo molteplici modi per categorizzare i contenuti in diverse lingue. Hugo offre anche elaborazione delle immagini, menu integrati, mappatura del sito e ricarica in tempo reale.
È possibile ottenere lo stesso risultato in Jekyll, ma sarà necessario più lavoro per impostarlo. In Jekyll, questa funzionalità proviene da plug-in, ma se stai costruendo pagine complesse, è bello averla integrata.
Ospitare
Entrambi i linguaggi offrono opzioni per un hosting facile, ma Jekyll è il più semplice. Jekyll e le pagine di GitHub hanno una stretta e lunga relazione, e il deploy di un progetto Jekyll su GitHub Pages è semplice e veloce, il che può essere ottimo per provare un blog con Jekyll.
Anche Hugo offre molte opzioni di hosting. Per entrambi i generatori, hai due opzioni fondamentali:
- Puoi eseguire il generatore del sito in locale, e successivamente caricare i risultati su un server. Puoi fare questo manualmente oppure istruire un servizio a prendere il tuo HTML aggiornato.
- Puoi installare il generatore di siti statici su un computer in cloud, dire a quel computer di eseguire il comando di generazione dei contenuti, quindi servire i file che quel processo crea. Questo è come funzionano servizi come Amazon Amplify, CloudCannon e Netlify. Tutti questi fornitori hanno guide specifiche per il rilascio dei siti, ma il processo di distribuzione è piuttosto indolore quando si utilizza un generatore di siti statici.
Cosa scegliere
Jekyll e Hugo sono entrambi ben adatti per blog e altri siti orientati al frontend. Generano pagine HTML statiche combinando contenuti scritti in un linguaggio markdown con template HTML.
Il generatore di siti statici Jekyll ha l’impostazione più veloce, più opzioni per i template e offre un’esperienza più facile all’inizio, ma può iniziare a sembrare lento una volta che stai elaborando un centinaio di pagine. L’impostazione iniziale di Hugo è più complicata, ma può gestire siti più grandi con maggiore velocità, ad esempio un blog di Hugo.
Nel prendere una decisione, pensa ai linguaggi con cui sei familiare, ai tipi di markdown che desideri utilizzare e a come distribuirai il sito. Se vuoi iniziare subito a bloggare, Jekyll è la scelta giusta, ma se prevedi di scrivere molto contenuto, la velocità e le funzionalità di Hugo renderanno più fluida la tua esperienza di sviluppo.
Leave a Reply