Tutorial di Jekyll: tutto quello che dovete sapere

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 una serie di file di testo strutturati e statici, i cosiddetti 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 editor di contenuti come Prose, che facilita la modifica del markdown ed è ottimizzato per Jekyll.

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

Così create un sito web Jekyll in maniera semplice e veloce:

Ma può anche essere utilizzato per creare design più elaborati dal punto di vista grafico:

Per i blog e altri progetti web statici vale la pena di prendersi un momento per considerare Jekyll come valida alternativa ai sistemi di gestione dei contenuti e agli editor per la creazione 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 rinunciare a un 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 sua 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. A differenza dei classici CMS, Jekyll genera il markup direttamente dopo una modifica e non solo quando un utente richiama la pagina.

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. 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.

Innanzitutto, avrete bisogno di un account GitHub. 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 e i vostri interessi. Dopodiché riceverete un’e-mail di conferma da GitHub con un link sul quale dovrete cliccare per attivare il vostro account.

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, create subito un nuovo repository cliccando sul simbolo “+” nella lista utente in alto e scegliendo “New repository”.

Fino a questo momento la directory è una normale directory di progetto GitHub. Per convertirla nel vostro repository web, avete diverse opzioni:

• Potete partire da zero e creare un sito web senza un modello utilizzando Jekyll. Trovate informazioni a riguardo nella documentazione ufficiale di Jekyll.
• Se utilizzate un tema pronto di Jekyll, sarà più facile iniziare.
• Anche l’esempio di Jekyll su Deploy Now è un buon punto di partenza per il vostro sito web con il generatore di siti web statici.

Se ancora non avete un account su Deploy Now, potete crearne uno gratuitamente. Quindi potete creare un nuovo progetto e collegarlo al vostro repository GitHub. Selezionate Jekyll nella configurazione: una volta compiuto questo breve passaggio, potete iniziare a occuparvi del contenuto del vostro sito web.

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.

Se le impostazioni hanno funzionato come descritto nel passaggio precedente, siete pronti a 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 fogli CSS o 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 drag&drop.

Client desktop

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

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”.

Nel vostro repository potete accedere a diversi rami (“branches” in inglese) individuali, che permettono agli sviluppatori di lavorare sul codice simultaneamente o di concentrarsi separatamente su specifiche aree di sviluppo. IONOS Deploy Now mostra i singoli rami del repository clonato. Il nuovo ramo creato viene automaticamente visualizzato utilizzando Deploy Now, permettendovi di tenere d’occhio l’intero progetto web così come il progresso all’interno dei singoli rami di sviluppo in ogni momento.