Share
Nel post precedente, ho parlato di GitHub Pages e di come configurarlo nel tuo repository GitHub. Abbiamo utilizzato il generatore di siti per iniziare e ho detto che GitHub Pages supporta anche Jekyll.
In questo post parlerò di Jekyll e vi mostrerò come farlo configurare con il vostro progetto. Ho creato un progetto di esempio che abbassi e segui pure.
Che cosa è esattamente Jekyll? Ecco la loro descrizione sul loro sito:
Jekyll è un generatore di siti statico semplice, sensibile al blog.
È completamente guidato dai contenuti e supporta anche Markdown. Usa Liquid per i suoi layout in modo da avere un po 'di riutilizzo di cose come testa, intestazione e piè di pagina. Genererà pagine statiche in base al contenuto e ai layout specificati.
È anche consapevole del blog, quindi potrebbe essere un potenziale sostituto di WordPress o di un altro CMS.
Forse la cosa più importante da notare è che, in Jekyll, i permalink, le categorie, le pagine, i post e i layout personalizzati sono tutti cittadini di prima classe.
Puoi anche generare e visualizzare il tuo sito a livello locale.
Jekyll è basato su Ruby, quindi il modo più semplice per installare è utilizzare RubyGems. Se si utilizza Mac o Linux, è possibile installare Jekyll tramite la riga di comando eseguendo gem install jekyll. Se riscontri problemi durante l'installazione, ti suggerisco di consultare la guida all'installazione.
Se sei su Windows, c'è una pagina di documenti specifici per Windows che dovrai seguire.
La prima cosa che dovrai configurare è il file di configurazione. Vorrete aggiungere un _config.yml file alla radice del tuo progetto. Ci sono un certo numero di opzioni di configurazione che puoi aggiungere, ne userò un sottoinsieme per questo esempio. Vai avanti e aggiungi il seguente al tuo _config.yml file:
# Dependencies markdown: rdiscount pygments: true # Permalink permalink: pretty # Destinazione server: _gh_pages host: 0.0.0.0 porta: 9001 baseurl: / encoding: UTF-8
Ora che abbiamo aggiunto il nostro file di configurazione, continuiamo a configurare la struttura del progetto.
C'è una struttura specifica che devi seguire quando crei un sito basato su Jekyll. È importante seguire la struttura per generare correttamente il tuo sito. Ecco come appare,
Questo è dove avrai i tuoi diversi layout per le tue pagine. Puoi pensare che questi siano come i modelli di pagina di WordPress. Potresti desiderare che il layout predefinito abbia una barra laterale e un altro layout che non ha una barra laterale. Farai riferimento a questi layout nei tuoi contenuti in base al nome del file.
Vai avanti e crea un _layouts cartella nella radice del tuo progetto. Diciamo che vuoi creare il layout predefinito. Vorresti creare un default.html dentro il _layouts cartella. Potrai quindi fare riferimento al layout predefinito nelle tue diverse pagine.
Ci sono un paio di cose che probabilmente vorrai aggiungere ad ogni file di layout, titolo della pagina e contenuto. Se si desidera visualizzare il titolo della pagina, è necessario aggiungerlo al layout utilizzando la seguente sintassi:
titolo della pagina
Dovrai anche specificare dove vuoi che il contenuto di ogni pagina venga popolato in quel layout. Per fare ciò, è necessario utilizzare la seguente sintassi:
content
Questi sono usati nel file default.html nel progetto di esempio.
Probabilmente vorrai includere alcune altre cose che saranno riutilizzate in ogni pagina come l'intestazione, il piè di pagina, la navigazione e altri. Vorrete aggiungerli al vostro _includes cartella.
Gli include saranno cose che vorrete riutilizzare su pagine diverse come ho detto sopra. Dovrai aggiungerli nel _includes cartella. Vai avanti e crea un _includes cartella nella radice del tuo progetto.
Diciamo che vuoi avere la testa del documento come inclusione. Prima dovresti aggiungere un head.html file nel _includes cartella. Dovresti quindi aggiungere tutto il necessario per la testa del documento come doctype, metadati, script, ecc.
Quindi vorrai fare riferimento a questo head.html file nel tuo default.html file di layout. Lo farai usando la seguente sintassi:
% include head.html%
Puoi vederlo usato nel default.html nel progetto di esempio.
Faresti lo stesso per qualsiasi altra cosa tu voglia riutilizzare tra le pagine come la tua intestazione e il piè di pagina. È inoltre possibile creare sottocartelle all'interno di _includes cartella e fare riferimento anche a loro. Mi piace farlo per organizzare le sezioni di differenza di ogni pagina se hanno un sacco di contenuti.
Ora che abbiamo un layout predefinito, facciamo la nostra prima pagina. Vai avanti e crea un index.html file nella cartella principale del tuo progetto. Non preoccuparti, non sovrascriverà il tuo tema index.php file se si utilizza questo per documentare il tema di WordPress.
Nella parte superiore di ciascun file sarà necessario specificare alcune cose sulla pagina. Questo è ciò che jekyll farà riferimento quando si costruisce ogni pagina. Ci sono un certo numero di cose che puoi impostare, ma mi concentrerò su alcune di esse:
Ecco un esempio da aggiungere alla parte superiore del tuo index.html file:
--- layout: titolo predefinito: Tuts + GitHub Pages slug: tuts-github-pages ---
Ora che abbiamo impostato la nostra pagina, tutto ciò che dobbiamo fare ora è aggiungere il nostro contenuto. Aggiungi semplicemente tutto l'HTML che vuoi mostrare nella tua pagina.
La costruzione e la pubblicazione delle tue pagine avviene tramite la riga di comando. Vai avanti e apri il tuo strumento a riga di comando, scrivi jekyll serve e premi Invio. Dovresti vedere il seguente output:
Se vedi l'output corretto, le tue pagine sono costruite e pronte per essere visualizzate. Ora puoi visualizzare le tue pagine andando su http: // localhost: 9001, o su qualsiasi porta specificata nel tuo _config.yml file, nel browser di scelta.
Ho spiegato le basi su come iniziare a usare Jekyll con il tuo progetto. Ho illustrato come configurare il file di configurazione e la struttura del progetto. Ho anche parlato di come puoi costruire e servire le tue pagine. Se vuoi vedere tutto messo insieme, allora puoi dare un'occhiata a questo esempio di progetto.
Nel prossimo post parlerò di come servire le tue pagine su GitHub Pages e di distribuirle nel tuo tema o plugin di WordPress.
Accentsconagua