Jekyll: il pratico generatore di siti web statici

Per molti la prima scelta per creare un nuovo blog o semplicemente l’homepage di un’azienda è WordPress. Di fatto il content management system presta servizio da anni come uno strumento affidabile adatto sia ai principianti che ai professionisti. Essendosi però sviluppato nel tempo sempre più nella direzione di un sistema a tutto tondo, si creano situazioni nelle quali WordPress non è in grado di soddisfare le esigenze di uno sviluppatore web. Sono proprio queste le problematiche di cui si fanno carico alternative più leggere come Jekyll: limitato ai componenti indispensabili, il generatore di siti web consente di gestire pagine senza connessioni a database o software aggiuntivi.

Che cos’è Jekyll?

Nel novembre del 2008 Tom Preston-Werner, uno dei quattro fondatori della piattaforma di sviluppo GitHub, pubblica il generatore di siti web Jekyll sotto licenza libera MIT. Scritto in Ruby, Jekyll si basa su una directory template che contiene un numero di file di testo strutturati e statici (Markdown) di diversi formati. Questi ultimi stabiliscono da un lato il layout, dall’altro il contenuto del progetto web e si possono personalizzare a seconda delle esigenze individuali. Inoltre il generatore non mette a disposizione un editor WYSIWYG, ma richiede la scrittura classica del codice. A questo proposito si suggerisce un content editor come Prose, che facilita la modifica del markdown ed è ottimizzato per Jekyll.

Prima di incorporare eventuali modifiche nella versione live dell’applicazione web sviluppata, si possono valutare grazie al server di sviluppo di Jekyll. Per la conversione di file in un sito statico, che può essere restituito da qualsiasi comune server web, viene fornito il motore di rendering implementato Liquid, che genera il codice HTML automaticamente in background, nel caso in cui vengano apportate modifiche ai file di testo.

Per tutelare la vostra privacy il video si caricherà dopo aver cliccato.

Per utilizzare il generatore di siti web avete la possibilità di scaricarlo e ospitarlo localmente sul vostro computer. Tra le varie alternative si può citare GitHub Pages con il quale viene preso in carico non soltanto il rendering HTML, ma anche l’hosting. Il servizio gratuito, che consente di registrare la pagina del proprio progetto, blog o sito web sui server GitHub, si basa di fatto sul motore Jekyll.

Vantaggi e svantaggi di Jekyll

Per i blog e altri progetti web statici vale la pena di prendersi un momento per considerare Jekyll come valida alternativa ai sistemi di content management e ai kit di costruzione di siti. Il vantaggio essenziale di questa soluzione è la semplicità che contraddistingue sia la creazione con il generatore di siti web che la gestione dei progetti creati.

Ad esempio, grazie alla possibilità di evitare database, si risparmiano del tutto l’installazione e la configurazione degli stessi. Di conseguenza non sono nemmeno necessari gli accessi ai database, il che a propria volta ha conseguenze positive per i tempi di caricamento della pagina. Anche il codice minimale, ridotto alle funzioni più importanti, che contraddistingue tutti i temi di Jekyll, contribuisce alla buona performance e al facile sviluppo e manutenzione del progetto.

Inoltre Jekyll convince per quanto riguarda stabilità e sicurezza: poiché essenzialmente il server web deve fornire file di testo, il potenziale di errore è più piccolo che con i siti che funzionano soltanto attraverso l’interazione di molte componenti diverse; e poiché non sono necessari regolari aggiornamenti, la stabile struttura del codice garantisce un’alta disponibilità del sito web. La sicurezza risulta dal fatto che Jekyll, senza CMS, database e script con elementi dinamici (PHP, JavaScript ecc.) non offre molti appigli per eventuali attacchi.

Mentre per lo sviluppatore esperto la base di codice fortemente limitata non costituisce un ostacolo, i novizi troveranno difficoltà con i generatori di siti web. Nella versione standard Jekyll non dispone di un’interfaccia grafica, per cui l’installazione deve essere eseguita tramite la riga di comando. Chi non dispone delle conoscenze necessarie deve affidarsi all’interfaccia utente di un provider di terze parti. Anche per quanto riguarda la selezione dei temi Jekyll è significativamente inferiore a molti CMS o ad altri strumenti di sviluppo di siti web per i quali esistono spesso centinaia o addirittura migliaia di modelli di progettazione e layout. Lo stesso vale per il supporto, che è piuttosto scarso a causa della piccola comunità e della bassa distribuzione.

La tabella seguente riassume i principali vantaggi e svantaggi di Jekyll.

Vantaggi Svantaggi
✔ Tempi di caricamento brevi del sito web sviluppato ✘ Soluzioni standard senza interfaccia grafica utente
✔ Non è necessario installare e di conseguenza fare manutenzione di database e CMS ✘ Lunghi tempi di compilazione
✔ Non offre un terreno di attacco ✘ Varietà di temi e plug-in limitata
✔ Non sono necessari aggiornamenti periodici ✘ Community piccola
✔ Grande libertà nella programmazione (opzionale: scelta libera di GUI ed editor) ✘ Nessun programma di modifica delle immagini
✔ Nessuna dipendenza da particolari formati o strumenti aggiuntivi ✘ Non è possibile lo scripting lato server (ad esempio per moduli)
✔ È possibile un hosting indipendente o su server GitHub (gratuito) 
✔ Proprio server di sviluppo integrato|
✔ Possibilità di controllo della versione tramite Git|

Jekyll e GitHub: la simbiosi perfetta

 

GitHub riveste una certa importanza nel circolo degli sviluppatori: la piattaforma online facilita enormemente la gestione di progetti e la pubblicazione di codici di programmi, specialmente se è prevista una compartecipazione di sviluppatori. Più di 24 milioni di persone si affidano a questa applicazione web, che si basa sul software Git sviluppato da un team guidato da Linus Thorvald. Il creatore di Linux ha rilasciato il version manager 2005 come alternativa al BitKeeper proprietario. GitHub utilizza quindi l’applicazione open source per poter gestire i codici a sorgente aperta sui propri server, che vengono salvati in directory separate.

Le modifiche di un progetto vengono inizialmente registrate come forks (divisioni), dopodiché l’autore riceve una notifica a riguardo e può decidere se avvalersene per il codice originale o meno.

Per tutelare la vostra privacy il video si caricherà dopo aver cliccato.

Con GitHub Pages il provider della piattaforma di sviluppo offre anche un servizio opzionale per memorizzare la propria directory come normale sito web sui server GitHub. Una particolarità consiste nel fatto che la base di codice per queste pagine di progetto è fornita da Jekyll. In questo modo è facile creare blog o semplici siti web che possono inoltre essere hostate gratuitamente.

GitHub Pages funziona essenzialmente come un CMS di Jekyll molto semplice, che consente tra le altre cose la scelta di un tema e l’utilizzo dell’editor proprio della piattaforma per la creazione di contenuti. Per salvare il repository di GitHub anche localmente è necessario clonarlo. Questo processo può avvenire attraverso un terminale o con il rispettivo desktop client (disponibile per Windows e macOS).

Per tutelare la vostra privacy il video si caricherà dopo aver cliccato.

Le differenze tra Jekyll e gli altri generatori di blog e CMS

Come già menzionato, la maggiore differenza tra Jekyll e i sistemi di gestione dei contenuti standard consiste nel fatto che il generatore di siti crea pagine che funzionano anche senza accesso a un database. D’altra parte manca, però, la possibilità di incorporare elementi dinamici, motivo per cui con Jekyll si possono creare solo pagine statiche.

Tuttavia esistono anche CMS senza database, concepiti soltanto per progetti lato client. Comparati a Jekyll, sono però più complessi: offrono all’utente funzionalità come back end, gestione degli utenti e numerose possibilità di espansione; proprio per questa ragione sono però più vulnerabili ad errori di programmazione e scoprono così il fianco a potenziali falle di sicurezza.

Per tutelare la vostra privacy il video si caricherà dopo aver cliccato.

Confrontandolo con altri generatori di siti statici come Hugo o Middleman, Jekyll primeggia soprattutto per la connessione diretta a GitHub e per i vantaggi che ne conseguono, come ad esempio l’eccellente gestione della versione e il servizio di hosting gratuito.

Tutorial di Jekyll: ecco come funziona la creazione di siti web con GitHub Pages

GitHub consente ad ogni utente o azienda di creare un sito web per account, che può constare di un numero di pagine illimitato, anche se i progetti sono limitati ad un massimo di un Gigabyte (che tuttavia, considerando la mancanza di elementi dinamici, è più che sufficiente). Lo stesso si può dire per il limite di banda mensile di 100 Gigabyte, che per gestire un blog o una semplice pagina aziendale è molto generoso. Tuttavia, se doveste aver bisogno di maggiori risorse, potete rivolgervi all’assistenza e concordare una soluzione individuale (per esempio l’inserimento di un (CDN).

Se foste interessati alle possibilità offerte da Jekyll e GitHub Pages, il seguente tutorial vi mostra passo per passo come potete usare il generatore per la piattaforma di sviluppo.

Passo 1: istituire un account GitHub

Per poter utilizzare GitHub Pages avete bisogno innanzitutto di un account GitHub: se non vi siete ancora registrati, questo è sicuramente il primo passo. Accedete al sito di GitHub e inserite un indirizzo e-mail valido, un nome utente e una password per il vostro account. Infine potete scegliere il piano desiderato (abbonamento): la variante gratuita per un numero illimitato di directory pubbliche oppure quella a pagamento per un numero illimitato di directory private. Qualora lo desideraste, potete inserire informazioni sulle vostre conoscenze di programmazione ed interessi. Dopodiché riceverete un’e-mail di conferma da GitHub con un link sul quale dovrete cliccare per attivare il vostro account.

Passo 2: creare un repository per il sito web o blog

Ora potete accedere all’account GitHub che avete creato. La bacheca offre una panoramica delle singole directory, anche se ovviamente all’inizio non fornisce alcuna informazione. Per cambiare questa situazione e impostare i prerequisiti per l’utilizzo di GitHub, create subito un nuovo repository cliccando sul segno “+” sulla lista utente in alto e scegliendo “New repository”. Nel nominare questa directory vi ricordiamo che è importante attenersi al modello “nomeutente.github.io”, altrimenti la conversione successiva nella directory del sito non funzionerà.

Passo 3: scegliere un tema

Dopo aver istituito il repository, potete richiamarlo in qualsiasi momento dal menu start in seguito al login, cliccando sulla voce “Repositories” del menu. Fino a questo momento la directory è una normale directory di progetto GitHub. Per convertirla nel vostro repository web dovete navigare nella sezione GitHub Pages e scegliere un tema di Jekyll: aprite la directory e poi le impostazioni (“Settings”).

Scorrendo verso il basso trovate la voce “GitHub Pages” e lì cliccate su “Choose a theme” per aprire il template manager di Jekyll, nel quale potete decidere uno dei dodici temi standard. Con il tasto “Select theme” confermate la vostra scelta.

Passo 4: pubblicare una pagina di esempio con un messaggio di benvenuto

Con la scelta del tema vengono generati automaticamente un file di configurazione (config.yml) e una pagina indice (index.md). Per impostazione predefinita si tratta di un esempio per il tema di Jekyll scelto, presentato già in formato markdown. Potete modificare sia questa pagina iniziale che il file di configurazione selezionando il relativo file e cliccando sull’icona a forma di matita nella barra del menu.

Cancellate il codice presente e inserite un’intestazione di benvenuto per il vostro sito:

## Benvenuti sul mio sito!

Dopo aver confermato il messaggio di benvenuto con il tasto “commit changes” potete richiamare in qualsiasi momento la prima pagina con il nome del repository che avete scelto nel secondo passo, che è anche l’URL del vostro sito web.

Consiglio

Per fare un test potete anche ovviamente in un primo momento lasciare il codice di Markdown così come vi viene fornito: in questo modo la vostra pagina iniziale sarà identica alla pagina demo del tema.

Passo 5: inserire il proprio contenuto

Se le impostazioni hanno funzionato come descritto nel passo precedente, siete pronti ad iniziare con la configurazione del vostro sito web o blog. Con il tasto “Create new file” si possono creare tutti i file di cui avete bisogno, come ad esempio CSS Sheets o i codici JavaScript. Allo stesso modo avete anche la possibilità di generare sottopagine aggiuntive per il vostro progetto. Con “Upload files” è possibile caricare direttamente dei file, indicando il luogo di memorizzazione o inserendo il file prescelto servendovi della funzione di drag&drop.

Passo 6: scaricare il desktop client

In realtà un sito web Jekyll si può amministrare completamente attraverso l’interfaccia web di GitHub. Tuttavia con il desktop client, che come accennato è disponibile per Windows e macOS, si ha anche una soluzione offline. Se non lo avete ancora installato, cliccate sul bottone “Set up in desktop” nel repository creato, che vi conduce automaticamente alla pagina di download.

Passo 7: clonare un repository

Dopo aver scaricato e installato il client, lo potete utilizzare anche per creare una copia locale del vostro sito. Effettuate l’accesso con il vostro Login GitHub e scegliete nel menu iniziale “Clone a repository”: così facendo avrete la possibilità di scegliere il repository che deve essere clonato. Stabilite dove salvarlo inserendo il “Local path”.

Ulteriori offerte di Jekyll

Il tutorial mostra che l’impostazione e l’hosting di un sito web con GitHub Pages procede velocemente. Se però riscontrate problemi con il vostro progetto Jekyll su GitHub, il servizio di assistenza sarà pronto ad aiutarvi in ogni momento. Inoltre vengono forniti diversi manuali e un’ampia raccolta delle domande più frequenti, che trattano tra le altre cose l’utilizzo di versioni, il markdown e la modifica del codice. Sul canale YouTube di GitHub si trova un vero e proprio arsenale di video che va a completare gli strumenti di aiuto.

Per tutelare la vostra privacy il video si caricherà dopo aver cliccato.

Nel caso in cui voleste utilizzare Jekyll senza GitHub, si consiglia il tutorial su YouTube in tre parti di Arachne in cui potete imparare non soltanto come impostare il generatore di siti statici e come pubblicare la vostra pagina web, ma anche tutte le informazioni importanti riguardo alla struttura del framework web basato sul file.

Per tutelare la vostra privacy il video si caricherà dopo aver cliccato.


Abbiamo una proposta per te:
Web hosting a partire da 1 €/mese!

Dominio gratis
Certificato SSL Wildcard incluso
Assistenza clienti 24/7
A partire da 1 €/mese IVA escl. per un anno,
poi 8 €/ mese IVA escl.