Categorie
strumenti

Come creare un Digital Garden con Jekyll

Il giardino digitale (o digital garden che dir si voglia)

Molto probabilmente ne hai già sentito parlare. Il digital garden è una forma intermedia tra i vecchi blog e il microblogging di alcuni social network come Twitter e Tumblr. Alla base c’è l’idea di non considerare i post come unità indipendenti che vanno a perdersi nel mare magnum delle bacheche social, ma come delle annotazioni (in gergo note), dei pezzetti di esperienze e pensieri da conservare e comporre fino a produrre un percorso di scoperta o crescita personale. Ci sono digital gardens che parlano di arte, di sviluppo software, di libri, di tutte le cose insieme o nulla di tutto ciò. Questo per esempio è il mio.

In Italia, i giardini digitali sono molto meno diffusi che altrove. Questo, a mio avviso, anche a causa dell’accessibilità degli strumenti. Infatti, sebbene si possa usare praticamente qualsiasi piattaforma per creare un digital garden, è sufficiente fare una prova per rendersi conto dei limiti dei principali CMS (WordPress, Drupal, Ghost…). Sono nati nuovi strumenti, e atri sono stati riadattati per andare incontro alle necessità dei “gardeners”. I tool più usati sono Gatsby.js, basato su React, e Jekyll; entrambi strumenti utilissimi e completamente gratuiti, ma nessuno dei due ha la documentazione tradotta in italiano.

Per questo ho deciso di spiegarti passo per passo come creare un digital garden con Jekyll.

Prerequisiti

Jekyll è un Ruby Gem, questo significa che per poterlo installare devi avere precedentemente installato quattro tools:

Verifica dei prerequisiti

Se non li hai mai sentiti nominare, non preoccuparti. C’è un modo semplice per verificare se sono già installati. Prima di tutto devi trovare e aprire il Terminale del tuo computer (se usi Windows basta premere su Start e digitare “Prompt dei comandi” nella barra di ricerca, lo stesso vale per Linux, dove si chiama semplicemente “Terminale”, se invece usi MacOS lo trovi nella cartella “Altro” del Launchpad).

Si aprirà una finestra, solitamente nera, che a seconda del tuo sistema operativo ti darà delle informazioni. Nell’ultima riga che vedi, scriverai i comandi che ti permettono di installare i tools.

Per controllare se hai già i prerequisiti dovrai digitare:

ruby -v

e poi premere invio. Sotto dovrebbe apparire la scritta “ruby” seguita da un numero che indica la versione installata. Se la versione presente nel tuo pc è precedente alla 2.4.0, occorrerà aggiornarlo. Ripeti la stessa cosa con:

gem -v
gcc -v
make -v

In tutti i casi sarà il Terminale a dirti se i tools sono già installati e in quale versione. Se sono già tutti presenti puoi saltare avanti all’installazione di Jekyll, se invece uno o più dei quattro mancano, procediamo ad aggiornarli o installarli

Installazione dei prerequisiti

Qui dipende tutto dal sistema operativo che stai adoperando.

Windows

Se usi Windows, probabilmente dovrai installare Ruby da zero. Per farlo puoi usare questo Ruby Installer. Facendo click su “Download” vedrai una lista delle versioni di Ruby. Puoi scegliere la più recente o quella raccomandata, l’importante è che sia successiva alla 2.4.0. Inoltre scegli quella adatta al tuo sistema operativo, quindi 32 bit (86x) o 64 bit (64x), se non sei sicurə ti rimando un momento ad Aranzulla. Facendo doppio click sulla versione scaricherai un file .exe: aprilo e procedi all’installazione come consigliata.

Al termine del processo ti verrà chiesto di spuntare una casella che dice “Run ‘rikd install’…”, lasciala spuntata e finisci. Dopodiché si aprirà il terminale con questa richiesta:

installare ruby su windows

Premi invio e aspetta. Alla fine comparirà la stessa scritta, puoi premere invio un’altra volta e il processo terminerà.

A questo punto possiamo passare all’installazione di Jekyll.

Linux

Se usi Linux sarai felice di sapere che è tutto molto semplice: l’installazione consiste nello scrivere una sola riga nel Terminale. Per tutti i sistemi Linux diversi da Ubuntu e derivati (tipo Mint), trovi qui i comandi da scrivere.

Per Ubuntu invece, oltre all’installazione, c’è da operare una modifica, sempre da Terminale. I comandi precisi sono quelli che trovi nei primi due box neri a questo link.

Passiamo subito all’installazione di Jekyll.

MacOS

Se utilizzi MacOS, per installare Ruby è necessario usare Homebrew.

/bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)”

E in seguito installerai Ruby con:

brew install ruby

A questo punto ci occorre sapere quale tipo di Terminale stai usando:

echo $SHELL

Se la risposta è “Zsh”, digita:

echo ‘export PATH=”/usr/local/opt/ruby/bin:$PATH”‘ >> ~/.zshrc

Se invece è “Bash”, digita:

echo ‘export PATH=”/usr/local/opt/ruby/bin:$PATH”‘ >> ~/.bash_profile

Per quanto riguarda Jekyll, è utile sapere quale versione del sistema operativo utilizzi, quindi clicca sulla mela nella barra superiore, poi su “Informazioni su questo Mac”, per trovare il nome e la versione del sistema operativo.

Installazione di Jekyll

jekyll

Siamo finalmente arrivati al momento di installare Jekyll e Bundler. Anche in questo caso ci serviamo del Terminale dove, nel caso di Windows e Linux digitiamo semplicemente:

gem install jekyll bundler

Per MacOS occorre invece specificare che vogliamo procedere all’installazione globale (per tutti gli utenti del Mac), semplicemente aggiungendo “sudo”, quindi:

sudo gem install jekyll bundler

Se tuttavia stai usando una versione di MacOS pari o successiva alla Mojave 10.14, occorre poi aggiungere:

sudo gem install -n /usr/local/bin/ jekyll

E così abbiamo finito il pre-setting e puoi finalmente cominciare a usare Jekyll.

Installare il template

Nel caso dei giardini digitali, il template non è una componente così importante. Da un lato, infatti, i gardeners tendono a prediligere una certa essenzialità estetica. In secondo luogo, gradualmente ma necessariamente subentrerà la personalizzazione. In poche parole, succederà che comincerai a mettere le mani sul codice e non riuscirai a smettere fino a quando l’ambiente non rispecchierà esattamente i tuoi desideri.

Per partire puoi usare Simply Jekyll o scegliere un’estetica più moderna tra questi temi e molti altri, gratuiti o a pagamento. Se invece preferisci un template appositamente pensato per digital gardens, ti consiglio Digital Garden di Maxime Vaillancourt, o in alternativa Lilium Digital Garden (ma solo perché l’ho creato io, non potevo fare finta di niente!).Lilium Digital Garden template for JekyllPer iniziare a usare il digital garden localmente sul tuo pc ci sono pochi passaggi da seguire. Innanzitutto rintraccia la sorgente del template sul GitHub (si chiama “repository“), qui c’è quella di Lilium. Se hai già un account GitHub puoi cliccare su “Use this template” per creare una repository gemella. Se non ce l’hai non occorre crearne uno, è sufficiente aprire questa tendina:

Dal terminale del tuo pc puoi copiare localmente il template digitando:

git clone https://github.com/crixer18/lilium-digital-garden-jekyll.git my-digital-garden

il link puoi copiarlo semplicemente dalla casella nell’immagine qui sopra, mentre “my-digital-garden” è il nome della cartella locale in cui verrà copiato il template (potrebbe essere anche il nome del tuo digital garden, se ne hai già scelto uno, o quello che preferisci).

A questo punto hai creato la cartella che contiene il tuo sito. Entraci col comando:

cd my-digital-garden

(o qualsiasi sia il nome che hai scelto), e testala in locale:

bundle

e poi

bundle exec jekyll serve

a questo punto apri il browser e naviga a localhost:4000 e vedrai il tuo sito creato.

Per modificarlo, aggiungere note, personalizzare i contenuti, il titolo ecc. ti occorre un editor di testo come Atom o Visual Studio, ma basta anche un semplicissimo blocco note. Quello che dovrai fare sarà andare a modificare i file di testo all’interno della cartella. La maggior parte dei file sono scritti in Markdown, un linguaggio di markup con una sintassi molto semplice, che imparerai in fretta. Ogni nota che aggiungerai avrà la forma di un foglio di testo con l’estensione “.md”, in genere andrà creata all’interno della sottocartella “_note” o “_posts”, ma ti consiglio di leggere la documentazione del tuo template per essere sicurə di dove posizionarla, oppure andare a spulciare tra le note demo che sono già contenute nel template.

Pubblicare il tuo giardino digitale

Siamo quasi alla fine. Dopo aver apportato tutte le modifiche e aver cominciato a prendere confidenza con il linguaggio, puoi pensare di rendere pubblico il tuo digital garden (ovviamente in seguito potrai sempre aggiungere note e modificarle).

Ci sono tanti servizi che permettono di pubblicare (gratis o a pagamento) un sito Jekyll. Qui ce n’è una lista completa tra cui scegliere, ma nessuno di questi ha una documentazione tradotta in italiano. Perciò ti spigherò brevemente come usare Vercel, perché è veloce e gratuito.

Prima di tutto, per accedere a Vercel ti occorre un account GitHub (è gratuito). Una volta creato e aperta la tua pagina personale, puoi creare una nuova repository pubblica nella quale caricare il tuo sito (cioè il contenuto della cartella my-digital-garden).

Dopodiché puoi creare un account su Vercel accedendo con GitHub. Iniziando un nuovo progetto, Vercel ti chiederà subito quale repository vuoi importare da GitHub e, accanto a quella del tuo digital garden, dovrebbe apparire già il logo della provetta di Jekyll.

jekyll on vercel

Ti basta seguire l’installazione consigliata e aspettare che Vercell “costruisca” il tuo sito. Alla fine ti fornirà un link. Ogni volta che caricherai una nuova nota all’interno della tua repository su GitHub o modificherai un file, Vercel aggiornerà automaticamente il sito nel giro di cinque minuti.


È fatta! Adesso puoi cominciare a scrivere note e a distribuire a tutti il link al tuo digital garden. Buon divertimento! 🌱

Di Stefano Zuliani

Ho studiato storytelling alla Scuola Holden di Torino. Mi occupo della gestione editoriale e pubblicitaria di pagine social, della creazione di siti web e della scrittura di contenuti in ottica social o SEO. Sono appassionato di letteratura, ma anche di tecnologie. Guardo continuamente al futuro. Sono un attivista LGBTQ+.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *