Ultima modifica:
2020.
Ormai per creare un semplice sito non servono più giorni e giorni di duro lavoro, studio delle dimensioni dei vari componenti, studio del layout dei blog e giorni di scrittura del codice. Ci sono i CMS, che sono molto comodi, ma ancora meglio (secondo la mia opinione) ci sono i generatori dinamici di siti statici, uno tra tutti Jekyll.
Questi programmi, a differenza dei soliti CMS, sono ottimi perchè permettono di mettere le mani in pasta per quanto riguarda la creazione di template (un mix di HTML e linguaggi propri del generatore) e la scrittura degli articoli (solitamente scritti in Markdown), ma poichè permettono di usare appunto dei template (sviluppati a mano o scaricati da terzi) e di non dover scrivere righe di codice aggiuntive, permettono di raggiungere un livello di personalizzazione e risparmio di tempo senza precedenti.
Inoltre sono ottimi per la creazione di siti e blog da hostare su github per i propri progetti e per le proprie pagine! Dovete sapere che GitHub integra nel proprio motore Jekyll, permettendo quindi di "programmare" il sito sopra il loro portale ed eseguire la build per voi in totale trasparenza e autonomia (per approfondire l'hosting su github vi invito a leggere il loro sito ufficiale, la pagina di help e la documentazione ufficiale di Jekyll).
Installare Jekyll localmente
In molti, arrivati a questo punto, si chiederanno quale sia l'utilità di installare Jekyll in locale quando potremmo fare tutto su GitHub.
Le risposte sono molteplici, prima tra tutti appunto il fatto che magari una persona non voglia hostare il sito su GitHub ma da qualche altra parte, oppure che voglia creare una pagina per GitHub ma vuole personalizzare al massimo il proprio sito senza metterlo subito online.
Ecco, è proprio in questi casi che entra in gioco Jekyll installato localmente!
Inoltre c'è da dire che GitHub non supporta tutti i temi, per cui la scelta di lavorare in locale e fare il deploy a prodotto finito è sempre la scelta migliore.
Tornando a noi, installare Jekyll è questione di pochi comandi.
Sentitevi liberi di seguire la documentazione ufficiale oppure questa release. Le differenze saranno minime.
Hint: consiglio di creare una VM apposita di development, in modo da avere un ambiente di sviluppo in cui eventuali test non andranno a "rompere" o modificare in alcun modo i vostri sistemi standard. Il mio consiglio è quello di installare l'ultima versione di Debian dal sito ufficiale, ma sentitevi liberi di usare qualunque altra distribuzione.
Ciò che ci servirà è:
Creazione del sito
Ora che abbiamo installato il programma non ci resta altro da fare che partire con la creazione del sito!
Scegliamo quindi il path in cui vogliamo salvare i files, spostiamoci al suo interno e creiamo la cartella contenente il nostro futuro blog:
Potremo notare come venga istanziata e creata per intero la struttura del nostro sito, con pagine di default e cartelle predefinite.
Immagino che vi starete ora chiedendo il significato di tutti questi file. Non temete, a breve ne spiegheremo l'utilità di ognuno.
Ora dovete però decidere se sviluppare per intero il vostro blog da zero oppure affidarvi a dei template già esistenti.
In caso voleste scrivere il vostro sito da zero sentitevi liberi di saltare questo approfondimento, altrimenti il mio consiglio è quello di sfogliare un po' di siti contenenti dei temi già pronti e di scegliere quello che più vi aggrada.
I siti più indicati per la ricerca del tema che fa per voi sono indubbiamente:
- https://jamstackthemes.dev/ssg/jekyll/
- http://jekyllthemes.org/
- https://jekyllthemes.io/
Una volta trovato il tema che più vi piace, scaricatelo, copiatelo nella cartella "myblog" (o il nome che le avete dato voi) e.. voilà, avete il vostro tema!
Warning: non tutti i temi si installano allo stesso modo! Fate sempre riferimento ai file di README o alla documentazione di ognuno di loro.
Generalmente i temi di Jekyll si dividono in due macro-categorie: i temi gem-based e i temi tradizionali. La differenza sta nel fatto che per i primi non serve installarli direttamente nella cartella del sito; essi infatti vengono presi e gestiti da gem (come succede su GitHub). Per utilizzare questi temi basta modificare la configurazione del Gemfile, scaricare il tema dentro gem tramite comando bundle e aggiornare la configurazione in _config.yml. Per maggiori dettagli vedere https://jekyllrb.com/docs/themes/
Installare un tema tradizionale invece è più o meno complesso in base al tipo di tema, ma permette comunque di getire al 100% ogni configurazione di esso. In linea di massima è sempre necessario scaricare il tema e copiarlo nella cartella contenente il sito, rimpiazzando tutti gli eventuali file duplicati
Un' ottima playlist youtube per imparare a lavorare con Jekyll è quella di Mike Dane (vedi i video qui).
Sono 19 video di durata relativamente breve in cui installa Jekyll da zero e spiega ogni sua funzionalità, sino ad arrivare alla pubblicazione del sito. Playlist assolutamente da seguire se è la prima (o anche la seconda o terza
) volta che lavorate con questo fantastico prodotto.
Struttura del progetto
Come avrete notato al momento della creazione del progetto, viene creata una specifica struttura composta da diverse directory e file, ognuno con una sua utilità. In questo paragrafo andremo ad addentrarci dentro ognuna di loro, in modo da capire a cosa servano e come lavorarci.
Per dettagli, consultare la documentazione: https://jekyllrb.com/docs/structure/
Struttura delle pagine
Come detto più volte, la forza di Jekyll sta nel poter scrivere le pagine in markdown e farle poi renderizzare in HTML dal motore interno. Per poter però lavorare correttamente, serve spiegare la struttura che una pagina debba avere per essere interpretata correttamente.
Le sezioni fondamentali sono principalmente due:
Build del sito finale
Fare la build del sito finale è davvero questione di un comando, dipende solo dal risultato che vogliamo ottenere!
Se vogliamo renderizzare il sito in locale, dinamicamente, per vedere il nostro lavoro in diretta, eseguiamo
Per eseguire la build finale del sito in modo da poterlo poi hostare da qualche altra parte, eseguiamo invece il comando
Per approfondimenti e dettagli vi invito a leggere per intero la documentazione di Jekyll da https://jekyllrb.com/ e cercare online eventuali problemi o curiosità
Per domande, note, appunti, correzioni e quant'altro, resto a disposizione!
Grazie a tutti per la lettura!
Download
Ormai per creare un semplice sito non servono più giorni e giorni di duro lavoro, studio delle dimensioni dei vari componenti, studio del layout dei blog e giorni di scrittura del codice. Ci sono i CMS, che sono molto comodi, ma ancora meglio (secondo la mia opinione) ci sono i generatori dinamici di siti statici, uno tra tutti Jekyll.
Questi programmi, a differenza dei soliti CMS, sono ottimi perchè permettono di mettere le mani in pasta per quanto riguarda la creazione di template (un mix di HTML e linguaggi propri del generatore) e la scrittura degli articoli (solitamente scritti in Markdown), ma poichè permettono di usare appunto dei template (sviluppati a mano o scaricati da terzi) e di non dover scrivere righe di codice aggiuntive, permettono di raggiungere un livello di personalizzazione e risparmio di tempo senza precedenti.
Inoltre sono ottimi per la creazione di siti e blog da hostare su github per i propri progetti e per le proprie pagine! Dovete sapere che GitHub integra nel proprio motore Jekyll, permettendo quindi di "programmare" il sito sopra il loro portale ed eseguire la build per voi in totale trasparenza e autonomia (per approfondire l'hosting su github vi invito a leggere il loro sito ufficiale, la pagina di help e la documentazione ufficiale di Jekyll).
Installare Jekyll localmente
In molti, arrivati a questo punto, si chiederanno quale sia l'utilità di installare Jekyll in locale quando potremmo fare tutto su GitHub.
Le risposte sono molteplici, prima tra tutti appunto il fatto che magari una persona non voglia hostare il sito su GitHub ma da qualche altra parte, oppure che voglia creare una pagina per GitHub ma vuole personalizzare al massimo il proprio sito senza metterlo subito online.
Ecco, è proprio in questi casi che entra in gioco Jekyll installato localmente!
Inoltre c'è da dire che GitHub non supporta tutti i temi, per cui la scelta di lavorare in locale e fare il deploy a prodotto finito è sempre la scelta migliore.
Tornando a noi, installare Jekyll è questione di pochi comandi.
Sentitevi liberi di seguire la documentazione ufficiale oppure questa release. Le differenze saranno minime.
Hint: consiglio di creare una VM apposita di development, in modo da avere un ambiente di sviluppo in cui eventuali test non andranno a "rompere" o modificare in alcun modo i vostri sistemi standard. Il mio consiglio è quello di installare l'ultima versione di Debian dal sito ufficiale, ma sentitevi liberi di usare qualunque altra distribuzione.
Ciò che ci servirà è:
- Ruby 2.5.0 o maggiore più le rispettive dipendenze:
$sudo apt install ruby-full build-essential zlib1g-dev
- RubyGems (evitare di installare come root. I comandi sotto riportati permettono di creare una gem installation directory per l'utente selezionato)
Bash:echo '# Install Ruby Gems to ~/gems' >> ~/.bashrcecho 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc source ~/.bashrc apt install gem
- GCC e Make
$ sudo apt install gcc make
$ gem install jekyll bundlerCreazione del sito
Ora che abbiamo installato il programma non ci resta altro da fare che partire con la creazione del sito!
Scegliamo quindi il path in cui vogliamo salvare i files, spostiamoci al suo interno e creiamo la cartella contenente il nostro futuro blog:
Bash:
maoutis@debian:~# cd /home/Documents/Projects
maoutis@debian:~/Documents/Projects# jekyll new myblog
maoutis@debian:~/Documents/Projects# cd myblog
maoutis@debian:~/Documents/Projects/myblog# lsImmagino che vi starete ora chiedendo il significato di tutti questi file. Non temete, a breve ne spiegheremo l'utilità di ognuno.
Ora dovete però decidere se sviluppare per intero il vostro blog da zero oppure affidarvi a dei template già esistenti.
In caso voleste scrivere il vostro sito da zero sentitevi liberi di saltare questo approfondimento, altrimenti il mio consiglio è quello di sfogliare un po' di siti contenenti dei temi già pronti e di scegliere quello che più vi aggrada.
I siti più indicati per la ricerca del tema che fa per voi sono indubbiamente:
- https://jamstackthemes.dev/ssg/jekyll/
- http://jekyllthemes.org/
- https://jekyllthemes.io/
Una volta trovato il tema che più vi piace, scaricatelo, copiatelo nella cartella "myblog" (o il nome che le avete dato voi) e.. voilà, avete il vostro tema!
Warning: non tutti i temi si installano allo stesso modo! Fate sempre riferimento ai file di README o alla documentazione di ognuno di loro.
Generalmente i temi di Jekyll si dividono in due macro-categorie: i temi gem-based e i temi tradizionali. La differenza sta nel fatto che per i primi non serve installarli direttamente nella cartella del sito; essi infatti vengono presi e gestiti da gem (come succede su GitHub). Per utilizzare questi temi basta modificare la configurazione del Gemfile, scaricare il tema dentro gem tramite comando bundle e aggiornare la configurazione in _config.yml. Per maggiori dettagli vedere https://jekyllrb.com/docs/themes/
Installare un tema tradizionale invece è più o meno complesso in base al tipo di tema, ma permette comunque di getire al 100% ogni configurazione di esso. In linea di massima è sempre necessario scaricare il tema e copiarlo nella cartella contenente il sito, rimpiazzando tutti gli eventuali file duplicati
Un' ottima playlist youtube per imparare a lavorare con Jekyll è quella di Mike Dane (vedi i video qui).
Sono 19 video di durata relativamente breve in cui installa Jekyll da zero e spiega ogni sua funzionalità, sino ad arrivare alla pubblicazione del sito. Playlist assolutamente da seguire se è la prima (o anche la seconda o terza
) volta che lavorate con questo fantastico prodotto.Struttura del progetto
Come avrete notato al momento della creazione del progetto, viene creata una specifica struttura composta da diverse directory e file, ognuno con una sua utilità. In questo paragrafo andremo ad addentrarci dentro ognuna di loro, in modo da capire a cosa servano e come lavorarci.
/myblog/: è la cartella di root del nostro progetto. Conterrà tutti i file di configurazione, le pagine, i template e il sito finale. Sostanzialmente è la directory di lavoro/myblog/_config.yml: è il file contenente tutte le configurazioni del progetto, come url, links, nome dell'utente, nome del sito, ecc. Per un elenco dettagliato vedere qui/myblog/_drafts/: è la cartella contenente tutte le bozze in fase di stesura. Tutto quello contenuto all'interno di questa cartella verrà ignorato in fase di creazione e costruzione del sito, a meno che non si specifichi il parametro --drafts in fase di "compilazione". Utile per iniziare a scrivere delle bozze senza che vadano a "sporcare" il lavoro finale./myblog/_includes/: questa cartella contiene tutte quelle pagine che possono essere incluse all'interno di altre pagine, come per i footer, eventuali navigation_bar o comunque porzioni di codice ridondanti. Ogni pagina contenuta in questa directory potrà essere richiamata all'interno di altre pagine tramite la sintassi {% include pagina.html %}, che ne incorporerà il contenuto. Spesso le include vengono utilizzate nei layout, in modo da creare velocemente pagine di default senza dover ogni volta copiare e incollare il codice. Favoriscono la creazione di pagine "a mosaico"./myblog/_layouts/: questa directory permette di creare le pagine di layout per il nostro sito, cioè quelle pagine che una volta richiamate nel Front Matter (dettagliato nella prossima sezione) ci permetteranno di avere dei template in cui semplicemente inserire del testo che verrà renderizzato secondo la struttura del layout. In poche parole sono i template delle nostre pagine./myblog/_posts/: La sezione post è usata per contenere tutto ciò che è "dinamico", in modo particolare la creazione di articoli nei blog. Qua potremo creare i nostri articoli secondo un ordine cronologico dato dal nome del file (che necessariamente deve seguire il formato aaaa-mm-dd-nome.ext), in modo da avere sempre e solo un'unica sezione contenente i nostri scritti. Spesso questa sezione contiene solo file in formato markdown che verranno renderizzati dal motore jekyll./myblog/_data/: è la cartella contenente tutti i file javascript, css, json e quanto serve per far funzionare il motore di jakyll e favorire la creazione del sito./myblog/_site/: Questa directory contiene il prodotto finale, il sito trasformato da Markdown a HTML e CSS... insomma, il sito vero e proprio da caricare sul nostro sito di hosting!Per dettagli, consultare la documentazione: https://jekyllrb.com/docs/structure/
Struttura delle pagine
Come detto più volte, la forza di Jekyll sta nel poter scrivere le pagine in markdown e farle poi renderizzare in HTML dal motore interno. Per poter però lavorare correttamente, serve spiegare la struttura che una pagina debba avere per essere interpretata correttamente.
Le sezioni fondamentali sono principalmente due:
- Front Matter
Questa sezione è invisibile in fase di rendering, ma definisce le regole che dovranno essere tenute in considerazione, così come la definizione delle variabili, dei layout e dei vari altri tag.
Deve essere la prima sezione della pagina, dovrà essere scritta in YAML e si presenterà nel seguente modo:
All'interno si possono definire numerosi comportamenti e variabili. Per un elenco dettagliato, vedere quaYAML:--- layout: post title: Blogging Like a Hacker --- - Body
E' semplicemente il corpo della pagina. Può essere scritto in HTM e markdown e potrà contenere i vari tag previsti per la creazione del sito in liquid, come{{ nome_variabile }}e altri. Le info contenute nel body sono le info visibili nel risultato finale della pagina.
Build del sito finale
Fare la build del sito finale è davvero questione di un comando, dipende solo dal risultato che vogliamo ottenere!
Se vogliamo renderizzare il sito in locale, dinamicamente, per vedere il nostro lavoro in diretta, eseguiamo
bundle exec jekyll serve per eseguire su http://localhost:4000 il nostro sito e vedere le modifiche che apportiamo in diretta.Per eseguire la build finale del sito in modo da poterlo poi hostare da qualche altra parte, eseguiamo invece il comando
bundle exec jekyll build e dopo pochi secondi troveremo il nostro sito, completamente pronto, all'interno della cartella _site, pronto per essere caricato in giro per i server Per approfondimenti e dettagli vi invito a leggere per intero la documentazione di Jekyll da https://jekyllrb.com/ e cercare online eventuali problemi o curiosità
Per domande, note, appunti, correzioni e quant'altro, resto a disposizione!
Grazie a tutti per la lettura!
Download