Configurazione di Jekyll per GitHub Pages in 60 secondi

Jekyll può essere utilizzato con GitHub Pages per creare siti Web statici semplici, attenti ai blog. Questo video ti mostrerà come configurare la struttura dei file flat di Jekyll barebones in 60 secondi!

Una volta che ti sei impostato e hai bisogno di ispirazione, dai un'occhiata a ciò che è disponibile tra i temi di Jekyll su Envato Market.

 

Se preferisci una spiegazione scritta, ecco l'intero processo descritto in passaggi chiari:

Nuovo progetto

Per prima cosa, crea una cartella sul tuo sistema per un nuovo repository. Fai questo usando il terminale per navigare dove vuoi che sia la tua nuova cartella, quindi inserendo: mkdir mysite. La nostra nuova cartella si chiama "mysite", ma puoi chiamarla come preferisci.  

Cambia directory in questa nuova cartella inserendo cd mysite-una volta creato un file di configurazione, immettendo il comando vim _config.yml. La tua finestra di terminale ti mostrerà il contenuto di questo file, quindi premi io per entrare inserire la modalità, quindi aggiungere il seguente contenuto:

titolo: Il mio sito

Colpire Esc lasciare inserire la modalità, quindi entra :X per salvare le modifiche che hai apportato.

Crea Indice

Quindi dobbiamo creare il documento indice, quindi inserire vim index.md e molto come hai fatto prima, aggiungi il seguente contenuto:

--- titolo: Ciao layout: predefinito --- Ciao!

Aggiungi cartella dei layout

Ora crea una nuova cartella inserendo mkdir _layouts e passare a quella directory con cd _layouts. Dagli un documento modello predefinito vim default.html e aggiungi il seguente contenuto:

content

Inizializza nuovo riscatto

Ora abbiamo bisogno di inizializzare la cartella come un nuovo repository e confermare le modifiche. Quindi inizia con la navigazione verso la radice del nostro progetto con CD… . Quindi entra git init, seguito da git add --all && git commit --all

Spingendo su GitHub

Passa a GitHub tramite il browser e crea un nuovo repository. 

A questo punto ti verranno date alcune opzioni, quindi prendi i comandi dove vedi spingere un repository esistente dalla riga di comando. I comandi leggeranno qualcosa come:

git remote add origin [email protected]: your_username / mysite.git git push -u origine master

Incolla questi comandi nel terminale per inviare il repository locale a GitHub.

Impostazioni GitHub

Infine, nel repository GitHub impostazioni, scegliere di utilizzare il ramo principale per Pagine GitHub, poi colpisci Salvare.

Jekyll è tutto pronto e il tuo sito Web è pronto per essere costruito!

Struttura del file Jekyll, spiegata

  • _config.yml funziona come il file di configurazione di Jekyll. Questo è ciò che GitHub Pages legge per le impostazioni del sito come le variabili globali e altro ancora.
  • index.md è il documento indice root del sito Web GitHub Pages.
  • _layouts / default.html è il file di modello predefinito su cui sarà basato index.md.

Risorse utili

Per ulteriori informazioni sulla creazione di siti Web statici usando Jekyll, consulta le seguenti risorse su Envato Tuts+!

  • Come installare un tema di Jekyll

    In questo tutorial vedremo come impostare un tema di Jekyll fin dall'inizio, iniziando con alcuni consigli di installazione di base, approfondendo come ...
    Kezz Bracey
    Jekyll
  • Nuovo corso: costruzione di siti Web statici con Jekyll

    Nel nostro nuovo corso imparerai tutto sul generatore di siti statici di Jekyll e costruisci un intero sito web da zero in meno di due ore. Unisciti a Guy Routledge ...
    Andrew Blackman
    Jekyll
  • La linea di comando per il web design: cogliere le basi

    In questo tutorial imparerai tutto il necessario per lavorare con un terminale o un prompt dei comandi incluso come aprirlo, come eseguire i comandi, come ripetere ...
    Kezz Bracey
    terminale