In questo articolo vi presenteremo uno dei pi\u00f9 popolari SSG, Jekyll, vi spiegheremo come funziona e come potete creare un sito web statico con questo strumento.<\/p>\n
Ecco una demo live del sito blog<\/a> che realizzeremo con Jekyll.<\/p>\n Potete accedere al repository GitHub del progetto<\/a> se volete dare un’occhiata pi\u00f9 da vicino.<\/p>\n Jekyll \u00e8 un SSG open-source gratuito che si basa sul linguaggio di programmazione Ruby<\/a>. Non \u00e8 necessario conoscere il funzionamento di Ruby per usare Jekyll; \u00e8 sufficiente che Ruby sia installato sul vostro computer.<\/p>\n Jekyll si pu\u00f2 usare per creare vari tipi di siti statici come un blog personale, un sito web di portfolio e un sito web di documentazione senza bisogno di un database o di un sistema di gestione dei contenuti come WordPress<\/a>.<\/p>\n Ecco cosa distingue Jekyll dagli altri SSG:<\/p>\n Prima di procedere all’installazione di Jekyll, come indicato nella documentazione di Jekyll<\/a>, dovete installare Ruby sul vostro computer.<\/p>\n Per impostazione predefinita, Ruby \u00e8 preinstallato su macOS, ma non \u00e8 consigliabile usare questa versione di Ruby per installare Jekyll, perch\u00e9 \u00e8 vecchia. Per esempio, su Ventura, l’ultimo sistema operativo di Apple, la versione di Ruby preinstallata \u00e8 la 2.6.10, di cui l’ultima versione \u00e8 la 3.1.3 (al momento della stesura di questo articolo).<\/p>\n Per risolvere questo problema, dovete installare Ruby correttamente usando un gestore di versioni come chruby<\/a>. Per prima cosa dovete installare Homebrew<\/a> sul vostro Mac usando il comando seguente nel vostro terminale:<\/p>\n Una volta che l’installazione \u00e8 andata a buon fine, uscite e riavviate il terminale, quindi verificate se Homebrew \u00e8 pronto per l’uso eseguendo questo comando:<\/p>\n Se ottenete il messaggio “Your system is ready to brew”<\/strong>, potete passare all’installazione di Ora potete installare l’ultima versione di ruby, la 3.1.3, usando il pacchetto L’operazione richieder\u00e0 alcuni minuti. Una volta completata l’installazione, configurate la vostra shell per usare automaticamente A questo punto potete uscire e rilanciare il Terminal, quindi verificare che tutto funzioni eseguendo questo comando:<\/p>\n Dovrebbe esserci scritto ruby 3.1.3<\/strong>.<\/p>\n Ora avete installato l’ultima versione di Ruby sul vostro computer. Potete procedere all’installazione dell’ultima gemma di Jekyll e di bundler:<\/p>\n Per installare Ruby e Jekyll su un computer Windows, dovete usare il RubyInstaller<\/a>. Questo pu\u00f2 essere fatto scaricando e installando una versione di Ruby+Devkit<\/strong> da RubyInstaller Downloads<\/a> e utilizzando le opzioni predefinite per l’installazione.<\/p>\n Nell’ultima fase dell’installazione guidata, eseguite Tra le opzioni, scegliete MSYS2 e la toolchain di sviluppo MINGW. Aprite una nuova finestra del prompt dei comandi e installate Jekyll e Bundler con il comando seguente:<\/p>\n Per verificare che Jekyll sia installato correttamente sul vostro computer, aprite il terminale ed eseguite il seguente comando:<\/p>\n Se vedete il numero di versione, significa che Jekyll \u00e8 installato e funziona correttamente sul vostro sistema. Ora tutto \u00e8 pronto per iniziare a usare Jekyll!<\/p>\n Prima di iniziare a creare e personalizzare un sito statico con Jekyll, \u00e8 bene familiarizzare con i suoi vari comandi CLI e i parametri dei file di configurazione.<\/p>\n Ecco alcuni dei pi\u00f9 diffusi comandi CLI di Jekyll. Non \u00e8 necessario che li memorizziate, ma sappiate che esistono e sentitevi liberi di controllare le funzioni di ognuno di essi quando ne noterete l’uso nel corso di questo articolo.<\/p>\n Potete anche aggiungere alcune opzioni a questi comandi. Per un elenco completo dei comandi e delle opzioni di Jekyll, consultate la documentazione<\/a>.<\/p>\n Il file di configurazione di Jekyll \u00e8 un file YAML chiamato _config.yml<\/strong> che contiene impostazioni e opzioni per il vostro sito Jekyll. Si usa per configurare vari aspetti del vostro sito, tra cui il titolo, la descrizione, l’URL e altre impostazioni.<\/p>\n Ecco alcune delle opzioni di configurazione pi\u00f9 comunemente utilizzate:<\/p>\n Potete anche creare delle variabili personalizzate nel vostro file di configurazione e usarle nei template, nei layout e negli include del sito. Per esempio, potete creare una variabile chiamata Per modificare il file di configurazione di Jekyll, aprite il file _config.yml<\/strong> nella directory del vostro progetto Jekyll con un editor di testo e apportate le modifiche.<\/p>\n Nota:<\/strong> qualsiasi modifica apportata al file di configurazione avr\u00e0 effetto la prossima volta che genererete il vostro sito con Ora che avete installato Jekyll sul vostro computer, potete creare un sito web statico su Jekyll con un solo comando in pochi secondi. Aprite il terminale ed eseguite questo comando:<\/p>\n Sostituite “joels-blog” con il nome del vostro sito preferito.<\/p>\n Ora navigate nella cartella del sito web. Noterete una struttura di base del sito Jekyll che include directory e file come questi:<\/p>\n Ecco a cosa serve ciascuna di queste directory e file:<\/p>\n Ma ci sono altri file\/cartelle che si possono usare per personalizzare il sito web Jekyll. Queste cartelle includono:<\/p>\n Questa struttura di file costituisce una solida base per un progetto Jekyll, ma potete modificarla in base alle esigenze specifiche del vostro progetto.<\/p>\n In alternativa all’avvio del progetto tramite Jekyll CLI, potete creare un repository Git usando il template Jekyll “Hello World”<\/a> di Kinsta su GitHub. Selezionate Use this template<\/strong> > Create a new repository<\/strong> per copiare il codice iniziale in un nuovo repository all’interno del vostro account GitHub.<\/p>\n Ora avete un sito Jekyll, ma come potete visualizzare un’anteprima del sito per vederne l’aspetto prima di iniziare a personalizzarlo secondo le vostre esigenze? Aprite il terminale e spostatevi nella directory del vostro progetto, quindi eseguite il seguente comando:<\/p>\n Questo genera una cartella _site<\/strong> che include tutti i file statici generati dal progetto. Avvier\u00e0 anche il server Jekyll e potrete visualizzare un’anteprima del vostro sito su http:\/\/localhost:4000.<\/strong><\/p>\n Se visitate l’URL nel vostro browser web, dovreste vedere il sito Jekyll con il tema minima:<\/p>\n Quando create un sito con Jekyll e usate un tema, potete personalizzare il sito in base alle vostre esigenze. Per esempio, potreste voler aggiungere nuove pagine, modificare il layout di una pagina o regolare la visualizzazione di alcuni elementi. Tutto questo \u00e8 possibile con Jekyll.<\/p>\n Quando aprite una pagina o un post del vostro progetto, noterete un blocco di informazioni all’interno di tre trattini (—) nella parte superiore della pagina. Questo blocco sia chiama “front matter”<\/strong>.<\/p>\n Si tratta di un formato di metadati usato in Jekyll per memorizzare le informazioni relative a una pagina o a un post; pu\u00f2 essere scritto sia in YAML che in JSON.<\/p>\n Nell’esempio precedente, il front matter include variabili come il titolo, la descrizione e la data del post. Queste variabili si possono usare nel layout o nel contenuto della pagina o del post.<\/p>\n Jekyll analizza il front matter e lo usa per generare l’HTML di output del sito. Potete usare il front matter per specificare varie opzioni, come il layout, il permalink, lo stato di pubblicazione, ecc.<\/p>\n Potete anche configurare dei front matter predefiniti, in modo da non doverli ridefinire per file simili. Per esempio, se ogni post del blog usa lo stesso nome dell’autore e lo stesso layout, potete definire un front matter personalizzato nel vostro file _config.yml<\/strong> per servire tutti i post del blog.<\/p>\n Il modo in cui \u00e8 strutturato \u00e8 un po’ complesso, ma ecco come si presenter\u00e0. Incollatelo sotto l’ultima configurazione del vostro file _config.yml<\/strong>:<\/p>\n Quando ora eseguite il comando Nota:<\/strong> quando non definite un percorso, tutti i file useranno i valori di front matter definiti.<\/p>\n Quando create un file nella directory principale del vostro progetto, questo viene considerato una pagina. Il nome che date al file si usa spesso nell’URL, quindi dovrete dare a ogni file di pagina un nome che suoni bene.<\/p>\n Per esempio, se volete creare una pagina con l’URL https:\/\/example.com\/about<\/strong>, create un file chiamato about.html<\/strong> o about.md<\/strong>. L’estensione del file determina il linguaggio di markup da usare per il contenuto della pagina (HTML o Markdown).<\/p>\n Una volta creato il file, aggiungete il materiale e i contenuti appropriati. Salvate il file e aggiornate il sito Jekyll nel browser. La nuova pagina dovrebbe essere accessibile all’URL corrispondente al nome del file.<\/p>\n Potete usare i layout per definire la struttura e il design delle pagine e dei post del vostro sito. Di solito questo viene fatto principalmente con il codice HTML. Potete includere un header, un footer e delle meta-informazioni nei metadati della pagina.<\/p>\n Il primo passo consiste nel creare una cartella _layouts<\/strong> nella directory principale del progetto. Quindi create un file per ogni layout: il file deve avere un nome descrittivo che rifletta lo scopo del layout. Per esempio, potreste creare un file chiamato page.html<\/strong> per definire il layout di tutte le pagine del sito.<\/p>\n \u00c8 meglio definire la struttura generale dei layout con l’HTML o un altro linguaggio di markup.<\/p>\n Potete includere dei segnaposto per qualsiasi contenuto dinamico che verr\u00e0 inserito nel layout, come il titolo della pagina, il contenuto e i metadati. Potreste per esempio creare un layout di base che include un header, un footer e un’area di contenuto come questa:<\/p>\n In questo esempio, i segnaposto A questo punto, qualsiasi pagina o post che usi page come valore di layout nella sua parte frontale avr\u00e0 questo layout. Potete creare pi\u00f9 layout all’interno della cartella _layouts<\/strong> e creare i vostri layout come preferite. Potete anche sovrascrivere il layout di un tema definendo un layout con un nome simile.<\/p>\n La cartella _includes<\/strong> contiene snippet di codice riutilizzabili che potete includere in diverse parti del sito web. Per esempio, potete creare un file navbar.html<\/strong> nella cartella includes e aggiungerlo al file di layout page.html<\/strong> usando il tag Al momento della creazione, Jekyll sostituir\u00e0 il tag con il contenuto di navbar.html<\/strong>.<\/p>\n La cartella _includes<\/strong> pu\u00f2 contenere qualsiasi tipo di file, come HTML, Markdown o Liquid. Lo scopo principale \u00e8 quello di mantenere il codice DRY (Don’t Repeat Yourself) permettendovi di riutilizzare il codice in tutto il sito.<\/p>\n Potreste voler creare una pagina blog dedicata per contenere tutti i post del blog, il che significa recuperare tutti i post del vostro sito e scorrerli in loop. Con Jekyll \u00e8 facile farlo grazie al tag Tutti i post di un sito web Jekyll sono memorizzati nella variabile Potete anche usare altre variabili Liquid per visualizzare altre informazioni su ogni post, come la data o l’autore del post:<\/p>\n Nell’esempio precedente, il filtro Liquid data formatta la data di ogni post in un formato pi\u00f9 leggibile.<\/p>\n Ora avete un’idea di alcune formattazioni di base che si possono creare con un sito Jekyll. Potreste anche non aver bisogno di usare tutti questi elementi per costruire un sito Jekyll da zero, perch\u00e9 potete sempre cercare un tema che soddisfi le vostre esigenze e aggiungerlo al sito Jekyll.<\/p>\n Esistono diversi temi facili da aggiungere, ma la cosa positiva \u00e8 che per ogni tema ci sono sempre informazioni chiare su come installarlo nel file ReadMe su GitHub. Potete decidere di clonare il tema mentre, se si tratta di un tema basato su una gemma<\/a>, il processo \u00e8 pi\u00f9 semplice.<\/p>\n Per questo articolo, installerete un tema per blog<\/a> e lo personalizzerete per avere un sito blog distribuito su Kinsta<\/a>. Si tratta di un tema basato su gen e potete accedere al suo codice sorgente<\/a> e alle istruzioni su GitHub<\/a>.<\/p>\n Per aggiungere un tema basato su gemme, aprite il Gemfile del vostro sito e aggiungete la gemma del tema che volete usare. Il tema che useremo \u00e8 il jekyll-theme-clean-blog<\/strong>. Potete sostituire il tema minima<\/strong> predefinito nel Gemfile:<\/p>\n Eseguite il comando Nel file _config.yml<\/strong> del vostro sito, aggiungete la seguente riga per specificare il tema che volete usare:<\/p>\n A questo punto il tema \u00e8 pronto per essere utilizzato.<\/p>\n Dovrete rimuovere tutti i layout presenti nella cartella _layouts<\/strong> per evitare che sovrascrivano il layout del tema.<\/p>\n Potete trovare i nomi dei layout per i vostri file nella documentazione del tema<\/a>. Per esempio, se state usando il tema jekyll-theme-clean-blog<\/strong>, il nome del layout del file index.html<\/strong> \u00e8 home<\/strong>, quello delle altre pagine \u00e8 page<\/strong> e quello di tutti i post \u00e8 post<\/strong>.<\/p>\n Infine, eseguite Ecco fatto! Il vostro sito Jekyll dovrebbe ora usare il nuovo tema basato sulla gemma che avete aggiunto. Potete personalizzare ulteriormente il tema modificando il suo layout nella directory _layouts<\/strong> del vostro sito.<\/p>\n Ora che il tema \u00e8 stato aggiunto al vostro sito, la prossima azione sar\u00e0 quella di personalizzare il sito in modo che risponda alle vostre esigenze e funzioni come dovrebbe. Per esempio, le immagini di ogni pagina e post non vengono visualizzate, ma viene visualizzato uno sfondo grigio.<\/p>\n Potete risolvere questo problema aggiungendo un’opzione “front matter” a ogni pagina e post, specificando il percorso di un’immagine che volete usare. In Jekyll, le risorse come le immagini sono memorizzate nella cartella assets<\/strong>. In questa cartella potete decidere di creare delle sottocartelle per organizzare le immagini.<\/p>\n Ora potete aggiungere un’opzione di sfondo al blocco della pagina principale e un percorso per la sua immagine. Per esempio, nella pagina about, questo \u00e8 lo sfondo:<\/p>\n Se lo fate per tutte le pagine e i post, la vostra pagina avr\u00e0 questo aspetto:<\/p>\n Potete ulteriormente personalizzare il sito regolando le opzioni della navbar. Per esempio, potreste non aver bisogno di una pagina di contatti e quindi dovreste rimuovere il suo link dalle opzioni della navbar. Potete farlo studiando il codice sorgente del tema<\/a>, notando il file responsabile dei link della navbar e replicando esattamente il file nel vostro progetto, rimuovendo l’opzione che non vi serve.<\/p>\n I link di navigazione si trovano nel file navbar.html della cartella _includes<\/a>. Potete creare questo file, incollare il codice dal vostro codice sorgente e rimuovere l’opzione di contatto o aggiungere qualsiasi altra opzione desideriate.<\/p>\n![\"Anteprima](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/joels-blog-jekyll-site.jpg\")
Cos’\u00e8 Jekyll?<\/h2>\n
\n
Come installare Jekyll<\/h2>\n
Come Installare Jekyll su macOS<\/h3>\n
\/bin\/bash -c \"$(curl -fsSL https:\/\/raw.githubusercontent.com\/Homebrew\/install\/HEAD\/install.sh)\"<\/code><\/pre>\nbrew doctor<\/code><\/pre>\nchruby<\/code> e ruby-install<\/strong> con il comando seguente:<\/p>\nbrew install chruby ruby-install<\/code><\/pre>\nruby-install<\/code> appena installato:<\/p>\nruby-install 3.1.3<\/code><\/pre>\nchruby<\/code> con il comando seguente:<\/p>\necho \"source $(brew --prefix)\/opt\/chruby\/share\/chruby\/chruby.sh\" >> ~\/.zshrc\necho \"source $(brew --prefix)\/opt\/chruby\/share\/chruby\/auto.sh\" >> ~\/.zshrc\necho \"chruby ruby-3.1.3\" >> ~\/.zshrc<\/code><\/pre>\nruby -v<\/code><\/pre>\ngem install jekyll bundler<\/code><\/pre>\nCome installare Jekyll su Windows<\/h3>\n
ridk install<\/code>, che serve per installare le gemme. Per saperne di pi\u00f9, consultate la Documentazione di RubyInstaller<\/a>.<\/p>\ngem install jekyll bundler<\/code><\/pre>\nCome verificare che Jekyll sia installato correttamente<\/h3>\n
jekyll -v<\/code><\/pre>\nComandi e configurazione di Jekyll<\/h2>\n
Comandi CLI di Jekyll<\/h3>\n
\n
jekyll build<\/code>: genera il sito statico nella directory _site<\/strong>.<\/li>\njekyll serve<\/code>: costruisce il sito e avvia un server web sul vostro computer locale, permettendovi di visualizzare un’anteprima del sito nel vostro browser all’indirizzo http:\/\/localhost:4000.<\/li>\njekyll new [site name]<\/code>: crea un nuovo sito Jekyll in una nuova directory con il nome del sito specificato.<\/li>\njekyll doctor<\/code>: mostra tutti i problemi di configurazione o di dipendenza eventualmente presenti.<\/li>\njekyll clean<\/code>: cancella la directory _site<\/strong>, dove sono memorizzati i file del sito generato.<\/li>\njekyll help<\/code>: visualizza la documentazione di supporto di Jekyll.<\/li>\njekyll serve --draft<\/code>: genera e serve il vostro sito Jekyll, compresi i post che si trovano nella directory _drafts<\/strong>.<\/li>\n<\/ul>\nFile di Configurazione di Jekyll<\/h3>\n
\n
minima<\/code>. Potete usare qualsiasi altro tema<\/a> impostandone il nome e implementando altre impostazioni che scopriremo pi\u00f9 avanti in questo articolo.<\/li>\n<\/ul>\nauthor_name<\/code> e usarla nei template in questo modo: {{ site.author_name }}<\/code>.<\/p>\njekyll build<\/code> o jekyll serve<\/code>.<\/p>\nCome si crea un sito web statico su Jekyll?<\/h2>\n
jekyll new joels-blog<\/code><\/pre>\n![\"Il](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/create-new-jekyll-site.jpg\")
\u251c\u2500\u2500 _config.yml\n\u251c\u2500\u2500 _posts\n\u251c\u2500\u2500 Gemfile\n\u251c\u2500\u2500 Gemfile.lock\n\u251c\u2500\u2500 index.md\n\u2514\u2500\u2500 README.md<\/code><\/pre>\n\n
\n
Opzione di avvio rapido: usare il nostro template GitHub<\/h3>\n
Come visualizzare l’anteprima di un sito Jekyll<\/h2>\n
jekyll serve<\/code><\/pre>\n![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/minima-jekyll-theme.jpg\")
Come personalizzare un sito Jekyll<\/h2>\n
Come funziona il front matter in Jekyll<\/h3>\n
---\ntitle: \"Welcome to Jekyll!\"\ndescription: \"Introduction to what Jekyll is about and how it works\"\ndate: 2023-03-07 16:54:37 +0100\n---<\/code><\/pre>\nCome configurare l’immagine di copertina predefinita<\/h4>\n
defaults:\n -\n scope:\n \tpath: \"posts\" # empty string means all files\n values:\n \tlayout: \"post\"\n \tauthor: \"John Doe\"<\/code><\/pre>\njekyll serve<\/code>, noterete che anche se non definite il layout e l’autore per ogni post, avete comunque accesso ad essi all’interno dei vostri file.<\/p>\nCreare pagine in Jekyll<\/h3>\n
![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/create-new-page.jpg\")
Creare layout in Jekyll<\/h3>\n
<!DOCTYPE html>\n<html>\n\t<head>\n \t<title>{{ page.title }}<\/title>\n\t<\/head>\n\t<body>\n \t<header>\n \t\n \t<\/header>\n \t<main>{{ content }}<\/main>\n \t<footer>\n \t\n \t<\/footer>\n\t<\/body>\n<\/html><\/code><\/pre>\n{{ page.title }}<\/code> e {{ content }}<\/code> saranno sostituiti dal titolo e dal contenuto effettivi della pagina che viene renderizzata.<\/p>\nCome funziona la cartella _includes in Jekyll<\/h3>\n
{% include %}<\/code>.<\/p>\n<!DOCTYPE html>\n <html>\n \t<head>\n \t<title>{{ page.title }} <\/title>\n \t<\/head>\n \t<body>\n \t<header>{% include navbar.html %} <\/header>\n \t<main>{{ content }} <\/main>\n \t<footer>\n \t\n \t<\/footer>\n \t<\/body>\n <\/html><\/code><\/pre>\nScorrere in loop i post in Jekyll<\/h3>\n
{% for %}<\/code>.<\/p>\nsite.posts<\/code>. In questo modo potete scorrere i post e usare la variabile Liquid {{ post.title }}<\/code> per visualizzare il titolo di ogni post:<\/p>\n{% for post in site.posts %}\n <h2>{{ post.title }}<\/h2>\n{% endfor %}<\/code><\/pre>\n\n{% for post in site.posts %}\n <h2>{{ post.title }}<\/h2>\n <p>Published on {{ post.date | date: \"%B %-d, %Y\" }} by {{ post.author }}<\/p>\n{% endfor %}<\/code><\/pre>\nCome aggiungere un tema a un sito Jekyll<\/h2>\n
gem \"jekyll-theme-clean-blog\"<\/code><\/pre>\nbundle install<\/code> nella directory del vostro sito per installare la gemma del tema e le sue dipendenze.<\/p>\ntheme: jekyll-theme-clean-blog<\/code><\/pre>\njekyll serve<\/code> per creare e servire il vostro sito con il nuovo tema.<\/p>\n![\"Homepage](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/jekyll-blog-theme.jpg\")
Personalizzare un tema Jekyll<\/h3>\n
![\"Schermata](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/jekyll-assets.jpg\")
---\nlayout: page\ntitle: About\ndescription: This is the page description.\npermalink: \/about\/\nbackground: '\/assets\/images\/about-page.jpeg'\n---<\/code><\/pre>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/about-page-customized.jpg\")
![\"Editor](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/customizing-navbar.jpg\")