Cos’è un generatore di siti web statici

Un generatore di siti web statici è un software che genera un sito web HTML statico usando come “input” dei dati grezzi e del codice come templates.

In sostanza, un generatore di siti statici automatizza il compito di generare le singole pagine HTML e le rende pronte per essere servite agli utenti in anticipo. static site generator

Siti web dinamici e statici

Un sito web statico quindi è un sito web composto di una o più pagine web HTML che vengono caricate sempre nello stesso modo, in modo piuttosto basico in quanto non viene utilizzato codice Javascript o eseguite operazioni su database.

L’opposto di un sito web statico, è il sito web dinamico (o CMS). Quest’ultimo genera le pagine HTML da servire all’utente in maniera dinamica e cioè quando l’utente ne fa richiesta. Può utilizzare variabili come ora, data, cookies o geolocalizzazione, per fornire all’utente un’esperienza d’uso personalizzata. Tutto questo viene supportato da codice Javascript.

Esempi di generatori di siti web statici:

  • Hugo
  • Jekyll
  • Gatsby
  • Next.js

Esempi di siti web dinamici:

  • Wordpress
  • Joomla
  • Drupal
  • Magento

Come funziona

Un generatore di siti web statici come Hugo, non è altro che un programma il cui scopo è generare pagine web a partire da codice Markdown e un template a scelta.

Il codice Markdown, utilizzato sotto forma di file, serve al programma come sorgente dal quale ottenere il testo delle varie pagine del sito. Il template invece è un codice di sviluppatori terzi che si occupa della formattazione delle pagine web.

Unendo i due componenti, si ottengono delle pagine in formato HTML con all’interno testo e formattazione.

static site generation

Per utilizzare Hugo basta un computer (anche offline), Hugo infatti può funzionare come web server standalone, ma solo per motivi di test. All’esecuzione del comando hugo publish il software genererà tutte le pagine web.

Perché ho scelto Hugo

Precedentemente utilizzavo Wordpress, un potentissimo CMS adatto a mille utilizzi diversi, ma per me anche troppo. Per il mio tipico utilizzo era troppo potente, direi addirittura overkill, con le centinaia di opzioni diverse a volte era difficile trovare la pagina giusta per cambiare questa o quella impostazione.

Inoltre, l’ho scelto anche per un motivo di sicurezza e soprattutto performance.

Già, perché intanto il codice HTML statico è inattaccabile sotto il punto di vista informatico visto che non basandosi su Javascript e database, non è proprio possibile utilizzare falle per ottenere il controllo del sito (o peggio ancora, del server).

Inoltre, il funzionamento intrinseco delle pagine HTML statiche permette una velocità di accesso senza pari. Infatti, su PageSpeed Insights ottengo un punteggio superiore a 90 nella home e superiore a 95 sui singoli articoli (il collo di bottiglia sta nelle immagini, devo ancora lavorarci su).

Pro e contro

Pro

  • Velocità
  • Semplicità: una volta configurato permette di concentrarsi sulla scrittura degli articoli
  • Flessibilità, facilità di personalizzazione con temi
  • Nessun software da mantenere
  • Sicurezza
  • Possibilità di scrivere i post ovunque senza usare il CMS
  • Hosting gratuito (a breve un articolo a proposito)

Contro

  • Possibilità d’utilizzo limitate a blog o semplice sito web
  • Nessun editor con funzionalità di formattazione (non nativamente)
  • Plugin limitati e non installabili con un singolo click
  • Configurazione iniziale non proprio banale

Considerazioni

Come avete potuto vedere Hugo, ma i generatori di siti statici in generale, sono adatti a chi ha poche pretese dal punto di vista di plugin e aggiunta di funzionalità, ma c’è anche da dire che i temi non si limitano all’aspetto grafico (come invece avviene su Wordpress), ma portano funzionalità al sito.

Un esempio è il tema che uso su questo sito, che per dirne una supporta la ricerca e il cambio di modalità chiaro/scuro.

D’altra parte è anche vero che la configurazione iniziale non è banale. La documentazione c’è, ma in inglese e talvolta non è proprio immediata da trovare.


Crediti: Icons created by Freepik - Flaticon