Come costruire un blog con Jekyll

Questo tutorial è per le persone che hanno sentito parlare dei generatori di siti statici e hanno deciso di voler andare a costruire il proprio sito usando uno. Ecco che ti mostreremo Come iniziare un blog usando jekyll.

Una conoscenza di base del terminale è buona, anche se dovresti essere in grado di seguire come i comandi sono tutti abbastanza semplici. I siti sulle pagine GitHub sono alimentate da Jekyll dietro le quinte, quindi se usato insieme alle pagine GitHub, crea un modo per ospitare e gestire il tuo sito web gratuitamente (consulta il nostro elenco dei migliori web hosting Servizi per altre opzioni o vedere la nostra lista se desideri un diverso tipo di Builder del sito web ).

Questo tutorial presuppone che tu sia su un Mac; Come Jekyll è un programma Rubino, è possibile eseguirlo su Windows ma non è ufficialmente supportato. Se stai seguendo insieme alle finestre, Salta qui per aiutare a ottenere il set di rubino.

Dopo aver completato questo tutorial, avrete creato un blog jekyll e ha imparato come le sue caratteristiche e la lingua di modelli possono costruire un blog personale. Questo è un ottimo punto di partenza per sviluppare il tuo sito. E ricorda, se hai un sacco di idee di progettazione o file multimediali, assicurati di tenerli saldamente al meglio deposito cloud. .

Trova i file per questo tutorial Qui .

• 10 migliori generatori di siti statici

01. Stai configurati

Su un Mac dovresti avere Ruby installato per impostazione predefinita, ma controlliamo digitando rubino -v. nel tuo terminale.

Ora possiamo effettivamente ottenere Jekyll in esecuzione nel sito, assicurati di essere nella directory che desideri costruire il tuo sito e digita semplicemente Gem Installa Jekyll Bundler ; Il tuo computer andrà quindi a prendere tutte le dipendenze necessarie per eseguire un sito.

02. Servire localmente o costruire

Ci sono due comandi principali che userai con Jekyll - servire e costruire . Per eseguire il tuo sito a livello locale Jekyll serve. nella tua riga di comando. Questo eseguirà una versione su http://127.0.0.1:4000 che è possibile visualizzare in anteprima le modifiche. Se hai già gemma e altre dipendenze installate sulla macchina, questo comando potrebbe fallire a causa di una mancata corrispondenza nelle versioni di dipendenza; In questo caso, prova Bundle Exec Jekyll Serve anziché. Correndo lo stesso ma con la parola costruire Compila solo il sito.

03. Ottieni i file di avviamento

Copia i file forniti con questo tutorial a questo punto per offrirti una base da lavorare. Questo ci darà una homepage, un elenco di blog, una pagina dei dettagli e la struttura delle risorse per il sito. Aggiorna la tua pagina su http://127.0.0.1:4000 E vedrai ora abbiamo alcune pagine di base da costruire. Facciamo una rapida panoramica di come funziona un sito Jekyll.

Un sito Jekyll è strutturato in modo facile da seguire. Qualsiasi raccolta (tipi di post) si svolge nella propria cartella, come sono i layout e include. Noterai una cartella '_site' - Questa è la cartella che Jekyll utilizza quando si esegue A Jekyll Build. comando.

04. Configurazione

Apri _config.yml nel tuo editor di testo e aggiungi i tuoi dettagli; Un'area chiave da controllare è impostare il tuo URL di base. Questa è la cartella in cui il tuo sito è in corso. Il file di configurazione è simile all'utilizzo delle opzioni globali combinate con il file WP-config se stavi costruendo un tema Wordpress.

È possibile controllare le informazioni chiave come titoli e meta descrizioni, e-mail e account sociali e quindi tutte le informazioni che il sito deve compilare come collezioni e qualsiasi plugin utilizzato. È possibile utilizzare una miscela di HTML e Markdown per pagine, a seconda di cosa si desidera ottenere. Tuttavia, le pagine personalizzate come la homepage e le pagine di elenco saranno generalmente HTML, mentre i messaggi e altre pagine generali che utilizzano un modello impostato saranno Markdown.

05. Prima parte

La materia anteriore è uno snippet di yaml nella parte superiore di un file. Jekyll lo usa per tenere le variabili. Guarda nel file about.md e puoi vedere il titolo, quale layout utilizzare, autore e qualsiasi immagine correlata.

06. Tag liquidi

Jekyll utilizza il liquido - un linguaggio templating che utilizza oggetti, tag e filtri. Noi usiamo il oggetto Tag circondato da doppie parentesi {{}} per inuscitare le variabili della materia anteriore e un segno di parentesi e percentuali per la logica {%%} .

07. Costruisci la tua navigazione

Piuttosto che una navigazione statica, utilizziamo la potenza dei file di configurazione per separare il contenuto dal modello. Teneremo gli elementi di navigazione nella cartella "Data" come file di configurazione e quindi loop attraverso di esse in navigazione.html. Possiamo semplicemente entrare in qualsiasi pagina e collegamenti che vogliamo andare avanti senza tornare al modello. Assicurati di essere molto attento con lo spazio bianco quando si modifica i file di configurazione come navigazione.yml o antistatica all'inizio di un post perché uno spazio randagio causerà un errore.

Il file di configurazione è già impostato in modo che inserisci il seguente codice nel file 'navigation.html' include il file:

 {% per articolo in sito.data.navigation%}
     & lt; a href = "{{sito.baseurl}} / {{item.link}}" {% se pagina.url == Item.link%} class = "corrente" {% endif%} & gt; {{elemento .name}} & lt; / A & GT;
   {% Endfor%} 

Stiamo usando i tag logici liquidi per cercare nel file di configurazione di navigazione e loop fuori un collegamento e un nome per ogni voce, fondamentalmente solo uno standard per loop.

08. Creare la home page

Sulla nostra homepage, elencheremo il nostro ultimo post di blog come eroe e poi abbiamo uno snippet dalla nostra pagina con un collegamento attraverso. Iniziamo con il blocco dell'eroe. Apri Index.html e quindi aggiungi il seguente codice:

 {% Assegna post = sito.posts.first%}
& lt; div class = "c-hero" style = "background: url ({{post.thumbnail_image.large | relativo_url}}) centrale / coperchio no-ripetere;" & gt;
   & lt; h1 class = "c-hero__title" & gt; {{post.title}} & lt; / h1 & gt;
   {{post.intro | markdownify}}
   & lt; un href = "{{post.url}}" class = "btn - hero" & gt; Leggi il post completo & lt; / A & GT;
& lt; / div & gt; 

Vedrai che prima assegniamo l'ultimo post e quindi fare riferimento all'immagine miniatura impostata nella materia anteriore del post. L'INTRO POST utilizza un filtro liquido Markdownify. per convertire il markdown in HTML.

Con quello in atto, aggiunci anche un teaser dalla pagina About. Aggiungi quanto segue:

 & lt; div class = "c-feature" & gt;
   {% per pagina in siti.pages%}
       {% se Page.url == '/bout.html'%}
           & lt; img src = "{{page.profile_image.small}}" ALT = "PROFIE Picture" Class = "C-feature__Immagine" / & GT;
           & lt; div class = "c-feature__text" & gt;
               & lt; h2 & gt; & lt; a href = "{{page.url}}" & gt; {{page.title}} & lt; / a & gt; & lt; / h2 & gt;
               & lt; p & gt; {{page.intro}} & lt; / P & GT;
           & lt; / div & gt;
          
       {% finisci se %}
   {% Endfor%}
& lt; / div & gt; 

Questa volta stiamo usando a per Loop per controllare le pagine nel sito. Stiamo usando Page.url. Per filtrare la pagina About e quindi utilizziamo uno stile di modelli simile all'eroe per emettere le informazioni sulle pagine.

09. Blog List.

Con la homepage creata possiamo spostarci sulla pagina dell'elenco dei blog. Per creare la pagina dell'elenco, usiamo di nuovo i tag liquidi per darci la logica da loop attraverso tutti i file nella cartella 'Posts'.

L'eroe è fatto per te perché segue lo stesso processo della homepage. Sotto l'eroe in "Blog.html", aggiungi quanto segue:

 & lt; div class = "vincolante" e gt;
   & lt; h1 & gt; il meglio del resto & lt; / h1 & gt;
   & lt; sezione class = "scheda scheda" e GT;
           {% per posta in site.posts offset: 1%}
           & lt; div class = "card" & gt;
                   & lt; img src = "{{post.thumbnail_image.small}}" / & gt;
                   & lt; div class = "carta-dettagli" e gt;
                   & lt; h3 & gt; {{post.date | Data: "% d% B"}} - {{post.title}} & lt; / h3 & gt;
               & lt; a href = "{{post.url}}" class = "btn" & gt; Leggi di più & lt; / A & GT;
                   & lt; / div & gt;
               & lt; / div & gt;
           {% Endfor%}
          
   & lt; / sezione e GT;
& lt; / div & gt; 

Di nuovo usiamo a per Loop per passare attraverso la raccolta dei post. Ma come abbiamo già battuto l'ultimo dell'eroe, abbiamo compensato questo ciclo per iniziare il post due. Un filtro liquido viene utilizzato per convertire la data in un formato della nostra scelta.

10. Pagina dei dettagli del blog

Non molto tempo per andare ora: abbiamo quasi tutti gli elementi di base insieme. Un aspetto importante a sinistra per l'indirizzo è la navigazione. Quando stai leggendo un post del blog hai bisogno di un modo per pedalare e leggere di più. Possiamo aggiungere un bel paginazione al nostro sito utilizzando una variabile di pagina. Apri Post.html nella cartella Layouts e aggiungi quanto segue:

 & lt; div class = "c-pagination" & gt;
   {% se pagina.previous%}
   & lt; div & gt;
       & lt; h3 & gt; precedente & lt; / h3 & gt;
       & lt; p & gt; {{page.previous.title}} & lt; / p & gt;
       & lt; p & gt; & lt; a class = "btn" href = "{{sito.baseurl}} {{page.previous.url}}" & gt; Leggi post & lt; / A & GT; & lt; / P & GT;
   & lt; / div & gt;
   {% finisci se %}
   {% se pagina.Next%}
   & lt; div & gt;
       & lt; h3 & gt; su next & lt; / h3 & gt;
       & lt; p & gt; {{page.next.title}} & lt; / P & GT;
       & lt; p & gt; & lt; a class = "btn" href = "{{sito.baseurl}} {{page.next.url}}" & gt; Leggi post & lt; / A & GT; & lt; / P & GT;
   & lt; / div & gt;
   {% finisci se %}
& lt; / div & gt; 

Noi usiamo il Page.previous. e Pagina.Nestato. Variabili per verificare se c'è un post da fare clic su. Se c'è quindi possiamo emettere un blocco e includere il titolo e il collegamento del post.

11. Costruisci e pubblica

GitHub Pages rende i file Sass per noi, quindi quando corri Jekyll Build. I file compilati vengono creati nella cartella _site. NESSUN FILES GURP o WELPAIN qui, solo simpatici stili magri! È anche possibile minificare l'output del sass come impostazione nel file Config.yml principale per il sito. I contenuti di questa directory possono essere trasferiti al tuo hosting scelto. Una cosa da consapevole è che le pagine GitHub supportano effettivamente Jekyll in modo da poter costruire e ospitare un sito utilizzando il tuo ramo principale come sorgente. Puoi trovare maggiori informazioni su questo Qui .

Questo articolo è stato originariamente pubblicato in emissione 320 di netto , la rivista best-seller del mondo per web designer e sviluppatori. Acquista il problema 320 qui o Iscriviti qui .

Articoli Correlati:

• Costruisci un blog con griglia e flexbox
• Le migliori piattaforme di blogging gratuite
• Come costruire un sito di blog con Gatsby