Tutorial di Jekyll: tutto quello che dovete sapere

Nel novembre del 2008 Tom Preston-Werner, uno dei quattro fondatori della piat­ta­for­ma di sviluppo GitHub, pubblica il ge­ne­ra­to­re 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 strut­tu­ra­ti e statici, i co­sid­det­ti markdown, di diversi formati. Questi ultimi sta­bi­li­sco­no da un lato il layout, dall’altro il contenuto del progetto web e si possono per­so­na­liz­za­re a seconda delle esigenze in­di­vi­dua­li. Inoltre il ge­ne­ra­to­re non mette a di­spo­si­zio­ne un editor WYSIWYG, ma richiede la scrittura classica del codice. A questo proposito si sug­ge­ri­sce un editor di contenuti come Prose, che facilita la modifica del markdown ed è ot­ti­miz­za­to per Jekyll.

Prima che le eventuali modifiche vengano in­cor­po­ra­te nella versione live dell’ap­pli­ca­zio­ne web svi­lup­pa­ta, possono essere esaminate grazie al server di sviluppo di Jekyll. Per la con­ver­sio­ne di file in un sito web statico, che può essere re­sti­tui­to da qualsiasi comune server web, viene fornito il motore di rendering im­ple­men­ta­to Liquid, che genera au­to­ma­ti­ca­men­te il codice HTML in back­ground, 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 uti­liz­za­to 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 con­si­de­ra­re Jekyll come valida al­ter­na­ti­va ai sistemi di gestione dei contenuti e agli editor per la creazione di siti. Il vantaggio es­sen­zia­le di questa soluzione è la sem­pli­ci­tà che con­trad­di­stin­gue sia la creazione con il ge­ne­ra­to­re di siti web che la gestione dei progetti creati.

Ad esempio, grazie alla pos­si­bi­li­tà di ri­nun­cia­re a un database, si ri­spar­mia­no del tutto l’in­stal­la­zio­ne e la con­fi­gu­ra­zio­ne degli stessi. Di con­se­guen­za non sono nemmeno necessari gli accessi ai database, il che a sua volta ha con­se­guen­ze positive per i tempi di ca­ri­ca­men­to della pagina. Anche il codice minimale, ridotto alle funzioni più im­por­tan­ti, che con­trad­di­stin­gue tutti i temi di Jekyll, con­tri­bui­sce alla buona per­for­man­ce e al facile sviluppo e ma­nu­ten­zio­ne del progetto. A dif­fe­ren­za dei classici CMS, Jekyll genera il markup di­ret­ta­men­te dopo una modifica e non solo quando un utente richiama la pagina.

Inoltre Jekyll convince per quanto riguarda stabilità e sicurezza: poiché es­sen­zial­men­te il server web deve fornire file di testo, il po­ten­zia­le di errore è più piccolo che con i siti che fun­zio­na­no soltanto at­tra­ver­so l’in­te­ra­zio­ne di molte com­po­nen­ti diverse; e poiché non sono necessari regolari ag­gior­na­men­ti, la stabile struttura del codice ga­ran­ti­sce un’alta di­spo­ni­bi­li­tà del sito web. La sicurezza risulta dal fatto che Jekyll, senza CMS, database e script con elementi dinamici (PHP, Ja­va­Script, ecc.) non offre molti appigli per eventuali attacchi.

Mentre per lo svi­lup­pa­to­re esperto la base di codice for­te­men­te limitata non co­sti­tui­sce un ostacolo, i novizi tro­ve­ran­no dif­fi­col­tà con i ge­ne­ra­to­ri di siti web. Nella versione standard, Jekyll non dispone di un’in­ter­fac­cia grafica, per cui l’in­stal­la­zio­ne deve essere eseguita tramite la riga di comando. Anche per quanto riguarda la selezione dei temi Jekyll è si­gni­fi­ca­ti­va­men­te inferiore a molti CMS o ad altri strumenti di sviluppo di siti web per i quali esistono spesso centinaia o ad­di­rit­tu­ra migliaia di modelli di pro­get­ta­zio­ne e layout. Lo stesso vale per il supporto, che è piuttosto scarso a causa della piccola comunità e della bassa di­stri­bu­zio­ne.

La tabella seguente riassume i prin­ci­pa­li vantaggi e svantaggi di Jekyll.

In­nan­zi­tut­to, 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 de­si­de­ra­to (ab­bo­na­men­to): la variante gratuita per un numero il­li­mi­ta­to di directory pubbliche oppure quella a pagamento per un numero il­li­mi­ta­to di directory private. Qualora lo de­si­de­ra­ste, potete inserire in­for­ma­zio­ni sulle vostre co­no­scen­ze di pro­gram­ma­zio­ne e i vostri interessi. Dopodiché ri­ce­ve­re­te 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 pa­no­ra­mi­ca delle singole directory, anche se ov­via­men­te all’inizio non fornisce alcuna in­for­ma­zio­ne. Per cambiare questa si­tua­zio­ne, create subito un nuovo re­po­si­to­ry cliccando sul simbolo “+” nella lista utente in alto e sce­glien­do “New re­po­si­to­ry”.

Fino a questo momento la directory è una normale directory di progetto GitHub. Per con­ver­tir­la nel vostro re­po­si­to­ry web, avete diverse opzioni:

• Potete partire da zero e creare un sito web senza un modello uti­liz­zan­do Jekyll. Trovate in­for­ma­zio­ni a riguardo nella do­cu­men­ta­zio­ne ufficiale di Jekyll.
• Se uti­liz­za­te 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 ge­ne­ra­to­re di siti web statici.

Se ancora non avete un account su Deploy Now, potete crearne uno gra­tui­ta­men­te. Quindi potete creare un nuovo progetto e col­le­gar­lo al vostro re­po­si­to­ry GitHub. Se­le­zio­na­te Jekyll nella con­fi­gu­ra­zio­ne: una volta compiuto questo breve passaggio, potete iniziare a occuparvi del contenuto del vostro sito web.

Con la scelta del tema vengono generati au­to­ma­ti­ca­men­te un file di con­fi­gu­ra­zio­ne (config.yml) e una pagina indice (index.md). Per im­po­sta­zio­ne pre­de­fi­ni­ta si tratta di un esempio per il tema di Jekyll scelto, pre­sen­ta­to già in formato markdown. Potete mo­di­fi­ca­re sia questa pagina iniziale che il file di con­fi­gu­ra­zio­ne se­le­zio­nan­do il relativo file e cliccando sull’icona a forma di matita nella barra del menu.

Se le im­po­sta­zio­ni hanno fun­zio­na­to come descritto nel passaggio pre­ce­den­te, siete pronti a iniziare con la con­fi­gu­ra­zio­ne 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 Ja­va­Script. Allo stesso modo, avete anche la pos­si­bi­li­tà di generare sot­to­pa­gi­ne ag­giun­ti­ve per il vostro progetto. Con “Upload files” è possibile caricare di­ret­ta­men­te dei file, indicando il luogo di me­mo­riz­za­zio­ne o inserendo il file prescelto ser­ven­do­vi della funzione drag&drop.

Client desktop

In realtà un sito web Jekyll si può am­mi­ni­stra­re com­ple­ta­men­te at­tra­ver­so l’in­ter­fac­cia web di GitHub. Tuttavia con il client desktop, che come accennato è di­spo­ni­bi­le per Windows e macOS, si ha anche una soluzione offline. Se non lo avete ancora in­stal­la­to, cliccate sul pulsante “Set up in desktop” nel re­po­si­to­ry creato, che vi conduce au­to­ma­ti­ca­men­te alla pagina di download.

Dopo aver scaricato e in­stal­la­to il client, lo potete uti­liz­za­re anche per creare una copia locale del vostro sito. Ef­fet­tua­te l’accesso con il vostro Login GitHub e scegliete nel menu iniziale “Clone a re­po­si­to­ry”: così facendo avrete la pos­si­bi­li­tà di scegliere il re­po­si­to­ry che deve essere clonato. Stabilite dove salvarlo inserendo il “Local path”.

Nel vostro re­po­si­to­ry potete accedere a diversi rami (“branches” in inglese) in­di­vi­dua­li, che per­met­to­no agli svi­lup­pa­to­ri di lavorare sul codice si­mul­ta­nea­men­te o di con­cen­trar­si se­pa­ra­ta­men­te su spe­ci­fi­che aree di sviluppo. IONOS Deploy Now mostra i singoli rami del re­po­si­to­ry clonato. Il nuovo ramo creato viene au­to­ma­ti­ca­men­te vi­sua­liz­za­to uti­liz­zan­do Deploy Now, per­met­ten­do­vi di tenere d’occhio l’intero progetto web così come il progresso all’interno dei singoli rami di sviluppo in ogni momento.