Costruisci il tuo sito web con Jekyll
Jekyll è un generatore di siti statici open source. Puoi scrivere i tuoi contenuti in Markdown, utilizzare HTML/CSS per struttura e presentazione e Jekyll compila tutto in HTML statico.
I generatori di siti Web statici e JAMStack hanno preso piede negli ultimi anni. E con buona ragione. Non sono necessari backend complessi con solo HTML statico, CSS e Javascript da servire. Non avere backend significa migliore sicurezza, minori costi operativi e hosting più economico. Una vittoria per tutti!
In questo articolo parlerò di Jekyll. Al momento della stesura di questo articolo, il mio sito web personale utilizza Jekyll. Jekyll utilizza un motore Ruby per convertire articoli scritti in Markdown per generare HTML. Sass consente di unire regole CSS complesse in file flat. Liquid consente un certo controllo programmatico su contenuti altrimenti statici.
Installa Jekill
Il sito Web Jekyll contiene istruzioni di installazione per Linux, MacOS e Windows. Dopo l'installazione, la guida rapida imposterà un progetto Hello-World di base.
Ora visita http://localhost:4000
nel tuo browser. Dovresti vedere il tuo blog "fantastico" predefinito.
Screenshot di Ayush Sharma, CC BY-SA 4.0
Struttura delle directory
Il sito predefinito contiene i seguenti file e cartelle:
_posts
: voci del tuo blog._site
: il sito web statico compilato finale.about.markdown
: contenuto per la pagina Informazioni.index.markdown
: contenuto per la home page.404.html
: contenuto della pagina 404._config.yml
: configurazione a livello di sito per Jekyll.
Creazione di nuovi post sul blog
Creare post è semplice. Tutto quello che devi fare è creare un nuovo file in _posts
con il formato e l'estensione corretti e il gioco è fatto.
Un nome file valido è 2021-08-29-welcome-to-jekyll.markdown
. Un file post deve contenere ciò che Jekyll chiama YAML Front Matter. È una sezione speciale all'inizio del file con i metadati. Se vedi il post predefinito, vedrai quanto segue:
---
layout: post
title: "Welcome to Jekyll!"
date: 2021-08-29 11:28:12 +0530
categories: jekyll update
---
Jekyll utilizza i metadati di cui sopra e puoi anche definire coppie chiave: valore
personalizzate. Se hai bisogno di ispirazione, dai un'occhiata alla parte introduttiva del mio sito web. A parte la questione iniziale, puoi utilizzare le variabili Jekyll integrate per personalizzare il tuo sito web.
Creiamo un nuovo post. Crea 2021-08-29-ayushsharma.markdown
nella cartella _posts
. Aggiungi il seguente contenuto:
---
layout: post
title: "Check out ayushsharma.in!"
date: 2021-08-29 12:00:00 +0530
categories: mycategory
---
This is my first post.
# This is a heading.
## This is another heading.
This is a [link](http://notes.ayushsharma.in)
This is my category:
Se il comando jekyll serve
è ancora in esecuzione, aggiorna la pagina e vedrai la nuova voce di seguito.
Screenshot di Ayush Sharma, CC BY-SA 4.0
Congratulazioni per aver creato il tuo primo articolo! Il processo può sembrare semplice, ma puoi fare molto con Jekyll. Utilizzando un semplice markdown, puoi generare un archivio di post, evidenziazione della sintassi per snippet di codice e pagine separate per i post in una categoria.
bozze
Se non sei ancora pronto per pubblicare i tuoi contenuti, puoi creare una nuova cartella _drafts
. I file Markdown in questa cartella vengono visualizzati solo passando l'argomento --drafts
.
Layout e include
Prendi nota della parte introduttiva dei due articoli nella nostra cartella _posts
e vedrai layout: post
nella parte introduttiva. La cartella _layout
contiene tutti i layout. Non li troverai nel tuo codice sorgente perché Jekyll li carica per impostazione predefinita. Il codice sorgente predefinito utilizzato da Jekyll è qui. Se segui il collegamento, vedrai che il layout post
utilizza il layout default
. Il layout predefinito contiene il codice {{ content }}
che è dove viene inserito il contenuto. I file di layout conterranno anche le direttive include
. Caricano i file dalla cartella include
e consentono di comporre una pagina utilizzando diversi componenti.
Nel complesso, questo è il modo in cui funzionano i layout: li definisci nella parte iniziale e inserisci i tuoi contenuti al loro interno. Include fornire altre sezioni della pagina per comporre un'intera pagina. Questa è una tecnica standard di web design: definire gli elementi di intestazione, piè di pagina, note ed elementi di contenuto e quindi inserire contenuto al loro interno. Questo è il vero potere dei generatori di siti statici: controllo programmatico completo sull'assemblaggio del tuo sito web con compilazione finale in HTML statico.
Pagine
Non tutti i contenuti del tuo sito web saranno un articolo o un post sul blog. Avrai bisogno di pagine, pagine di contatti, pagine di progetto o pagine di portfolio. È qui che entrano in gioco le Pagine. Funzionano esattamente come i Post, nel senso che sono file di markdown con introduzione. Ma non vanno nella directory _posts
. Rimangono nella radice del progetto o in cartelle a parte. Per i layout e le inclusioni, puoi utilizzare gli stessi che usi per i tuoi post o crearne di nuovi. Jekyll è molto flessibile e puoi essere creativo quanto vuoi! Il tuo blog predefinito contiene già index.markdown
e about.markdown
. Sentiti libero di personalizzarli come desideri.
File di dati
I file di dati si trovano nella directory _data
e possono essere .yml
, .json
o .csv
. Ad esempio, un file _data/members.yml
può contenere:
- name: A
github: a@a
- name: B
github: b@b
- name: C
github: c@c
Jekyll li legge durante la generazione del sito. Puoi accedervi utilizzando site.data.members
.
<ul>
{ % for member in site.data.members %}
<li>
<a href="https://github.com/">
{ { member.name }}
</a>
</li>
{ % endfor %}
</ul>
Permalink
Il tuo file _config.yml
definisce il formato dei tuoi permalink. Puoi utilizzare una varietà di variabili predefinite per assemblare il tuo permalink personalizzato.
Costruisci il tuo sito web finale
Il comando jekyll serve
è ottimo per i test locali. Ma una volta terminati i test locali, ti consigliamo di creare l'artefatto finale da pubblicare. Il comando jekyll build --source source_dir --destination Destination_dir
crea il tuo sito web nella cartella _site
. Tieni presente che questa cartella viene ripulita prima di ogni build, quindi non inserire cose importanti lì. Una volta ottenuto il contenuto, puoi ospitarlo su un servizio di hosting statico di tua scelta.
Ora dovresti avere una buona conoscenza generale di ciò di cui è capace Jekyll e di cosa fanno i suoi frammenti principali. Se stai cercando ispirazione, il sito web ufficiale di JAMStack contiene alcuni esempi sorprendenti.
Screenshot di Ayush Sharma, CC BY-SA 4.0
Buona programmazione :)
Questo articolo è stato originariamente pubblicato sul blog personale dell'autore ed è stato adattato con il suo permesso.