Cum de a construi un blog cu Jekyll

Acest tutorial este pentru persoanele care au auzit de generatoare de site-uri statice și au decis că doresc să meargă la construirea propriului site folosind unul. Iată vă vom arăta Cum să începeți un blog folosind Jekyll.

O cunoaștere de bază a terminalului este bună, deși ar trebui să puteți urma, deoarece comenzile sunt destul de simple. Site-urile de pe paginile Github sunt alimentate de Jekyll în spatele scenei, așa că, atunci când sunt utilizate împreună cu paginile GitHub, creează o modalitate de a găzdui și de a gestiona site-ul dvs. gratuit (consultați lista noastră de cele mai bune web hosting Servicii pentru alte opțiuni sau vedeți lista noastră dacă doriți un alt tip de Builder de site-uri web ).

Acest tutorial presupune că sunteți pe un Mac; Așa cum Jekyll este un program Ruby, este posibil să o executați pe ferestre, dar nu este acceptată oficial. Dacă urmați pe Windows, Hop peste aici Pentru a ajuta la înființarea Ruby.

După finalizarea acestui tutorial, veți fi creat un blog Jekyll și ați învățat cum caracteristicile și limbajul său de templare pot construi un blog personal. Acesta este un punct de plecare excelent pentru a vă dezvolta propriul site. Și amintiți-vă, dacă aveți multe idei de design sau fișiere media, asigurați-vă că le păstrați în siguranță în cele mai bune Stocare in cloud .

Găsiți fișierele pentru acest tutorial Aici .

• 10 cele mai bune generatoare de site-uri statice

01. Obținerea configurației

Pe un Mac ar trebui să aveți Ruby instalat în mod implicit, dar să verificăm prin tastare RUBY -V. în terminalul dvs.

Acum, putem obține de fapt Jekyll rulând în site, asigurați-vă că vă aflați în directorul în care doriți să vă construiți site-ul și pur și simplu tastați Gem Instalați Jekyll Bundler ; Computerul dvs. va merge apoi și va apuca toate dependențele necesare pentru a rula un site.

02. Serviți la nivel local sau construiți

Există două comenzi principale pe care le veți folosi cu Jekyll - servi și construi . Pentru a rula site-ul dvs. de tip local Jekyll servește în linia de comandă. Aceasta va rula o versiune pe http://127.0.0.1:4000 pe care o puteți previzualiza modificările. Dacă aveți deja GEM și alte dependențe instalate pe aparatul dvs., această comandă poate eșua din cauza unei nepotriviri în versiunile de dependență; În acest caz, încercați Bundle Exec Jekyll in schimb. Alergând la fel, dar cu cuvântul construi doar compilați site-ul.

03. Obțineți fișierele de pornire

Copiați fișierele furnizate împreună cu acest tutorial în acest moment pentru a vă oferi o bază pentru a lucra de la. Acest lucru ne va oferi o pagină de pornire, o listă de bloguri, o pagină detaliată și structura activelor pentru site. Reîmprospătați pagina dvs. la http://127.0.0.1:4000 și veți vedea că acum avem câteva pagini de bază pentru a construi de la. Să avem o imagine de ansamblu rapidă a modului în care funcționează un site Jekyll.

Un site Jekyll este structurat într-un mod ușor de urmărit. Orice colecții (tipuri de posturi) sunt organizate în dosarul propriu, la fel ca și layout-urile și include. Veți observa un dosar "_SITE" - acesta este dosarul pe care îl utilizează Jekyll când executați a Jekyll construiește comanda.

04. Configurare

Deschideți _config.yml în editorul de text și adăugați propriile detalii; O zonă cheie pentru a verifica este să setați adresa URL de bază. Acesta este dosarul pe care site-ul dvs. îl încarcă. Fișierul de configurare este similar cu utilizarea opțiunilor globale combinate cu fișierul dvs. WP-config dacă ați construit o temă WordPress.

Puteți controla informațiile de bază, cum ar fi titlurile și datele metalice, e-mailurile și conturile sociale și apoi toate informațiile pe care site-ul trebuie să le compileze, cum ar fi colecțiile și orice pluginuri utilizate. Puteți utiliza un amestec de HTML și Markdown pentru pagini, în funcție de ceea ce doriți să obțineți. Cu toate acestea, paginile personalizate, cum ar fi paginile dvs. de pornire și listă, vor fi, în general, HTML, în timp ce postările și alte pagini generale care utilizează un șablon setat vor fi markdown.

05. din față

Materia din față este un fragment de yaml în partea de sus a unui fișier. Jekyll îl folosește pentru a ține variabilele. Uită-te în fișierul de aproximativ.md și puteți vedea că setați titlul, care aspect de utilizat, autorul și orice imagini conexe.

06. Tag-uri lichide

Jekyll utilizează lichid - un limbaj templamant care utilizează obiecte, etichete și filtre. Noi folosim obiect Etichetă înconjurată de bretele duble {{}} Pentru a ieși variabilele din partea din față și un semn de bretele și un procent pentru logică {%%} .

07. Construiți-vă navigația

Mai degrabă decât o navigație statică, folosim puterea fișierelor de configurare pentru a separa conținutul din șablon. Vom deține produse de navigație în dosarul "Data" ca fișier de configurare și apoi vom bucura prin ele în navigație.html. Putem doar să introducem toate paginile și legăturile pe care le dorim înainte fără să vă întoarcem la șablon. Asigurați-vă că sunteți cu adevărat atenți cu spațiul albici atunci când editați fișierele de configurare, cum ar fi navigarea.yml sau materia din față la începutul unui post, deoarece un spațiu rătăcitor va provoca o eroare.

Fișierul de configurare este deja setat astfel încât să introduceți codul următor în "Navigation.html" include fișierul:

 {% pentru articol în site.data.navigation%}
     & lt; un href = "{{sit.baseurl}} {{{it.LINK}}" {% dacă pagina.url == item.Link%} clasa = "curent" {% ENDIF%} & gt; {{element .name}} lt; / a & gt;
   {% Endfor%} 

Folosim etichete logice lichide pentru a privi în fișierul de configurare de navigare și pentru a circula un link și un nume pentru fiecare intrare, practic doar un standard pentru buclă.

08. Creați pagina de pornire

Pe pagina noastră de pornire vom lista ultimul nostru post de blog ca un erou și apoi aveți un fragment de la pagina noastră cu o legătură prin. Să începem cu blocul de erou. Deschideți index.html și apoi adăugați următorul cod:

 {% Atribuire post = site.posts.first%}
& Lt; div Clasa = "C-erou" stil = "fundal: URL ({post.thumbnail_image.Large | relativ_url}})) centru de fund / acoperire fără repetare;" & GT;
   & lt; h1 clasa = "c-hero__title" & gt; {{post.title}} & lt; / h1 & gt;
   {{post.intro | markdowny}}
   & lt; un href = "{{post.url}}" Clasa = "BTN - Hero" & GT; Citiți postul complet & lt; / A & GT;
& lt; / div & gt; 

Veți vedea că primim mai întâi cea mai recentă postare și apoi referindu-se la imaginea thumbnail stabilită în materia din față a postului. Postarea intro utilizează un filtru lichid Markdowny. pentru a converti marcajul la HTML.

Cu asta în loc, să adăugăm și o teaser de la pagina. Adăugați următoarele:

 & Clasa Div = "C-caracteristică" & GT;
   {% pentru pagina în site.pages%}
       {% dacă pagina.url == '//about.html'%}
           & lt; img src = "{pagina.profile_image.small}}" Alt = "Profie imagine" clasa = "C-caracteristici__Image" / & gt;
           & lt; div clasa = "C-caracteristici__text" & gt;
               {{{Page.url}} & gt; {{{{page.url}} "/ h2 & gt; / lt; / h2 & gt;
               & lt; p & gt; {{pagina.intro}} & lt; / p & gt;
           & lt; / div & gt;
          
       {% ENDIF%}
   {% End pentru%}
& lt; / div & gt; 

De data aceasta folosim a pentru buclă pentru a verifica paginile din site. Folosim Page.url. Pentru a filtra pagina despre pagina și apoi folosim un stil templator similar pentru erou pentru a emite informațiile paginilor.

09. Lista de blog

Cu pagina de pornire creată putem trece pe pagina listei de blog. Pentru a crea pagina de listă, folosim din nou etichete lichide pentru a ne oferi logica pentru a circula prin toate fișierele din dosarul "Posts".

Eroul este făcut pentru dvs. pentru că urmărește același proces ca și pagina de pornire. Sub eroul în "blog.html", adăugați următoarele:

& lt; div clasa = "constrângere" & gt;
   & lt; h1 & gt; cele mai bune din restul & lt; / h1 & gt;
   & lt; secțiunea Class = "lista cardului" & GT;
           {% pentru post în site.posts offset: 1%}
           & lt; div clasa = "card" & gt;
                   & lt; img src = "{{post.thumbnail_Image.small}}" / & GT;
                   & lt; div clasa = "detalii card" & gt;
                   & lt; h3 & gt; {{post.date | Data: "% d% b"} - {{post.title}} & Lt; / H3 & GT;
               & lt; un href = "{{post.url}}" Clasa = "BTN" & GT; Citiți mai mult> / A & GT;
                   & lt; / div & gt;
               & lt; / div & gt;
           {% End pentru%}
          
   & lt; / secțiune & gt;
& lt; / div & gt; 

Din nou, folosim a pentru buclă pentru a trece prin colecția posturilor. Dar, deoarece deja am depășit cele mai recente în erou, oferim această buclă pentru a începe pe post două. Un filtru lichid este utilizat pentru a converti data la un format al alegerii noastre.

10. Pagina detaliată a blogului

Nu doresc acum: aproape că avem toate elementele de bază împreună. Un aspect important lăsat la adresa este navigarea. Când citiți un post de blog, aveți nevoie de o modalitate de a trece prin și să citiți mai mult. Putem adăuga o paginare frumoasă la site-ul nostru folosind o variabilă de pagină. Deschideți post.html în dosarul Layouts și adăugați următoarele:

 Div clasa = "C-paginare" & GT;
   {% dacă pagina.previous%}
   & Lt; div & gt;
       & lt; h3 & gt; anterior & lt; / h3 & gt;
       & lt; p & gt; {{pagina.previous.title}} & lt; / p & gt;
       și o clasa = "btn" href = "{{site.baseurl}}}" & gt; citiți post & lt; / p & gt;
   & lt; / div & gt;
   {% ENDIF%}
   {% dacă pagina.next%}
   & Lt; div & gt;
       & lt; h3 & gt; Up Next & Lt; / H3 & GT;
       & lt; p & gt; {{pagina.next.title}}} & lt; / p & gt;
       și o clasa = "btn" href = "{{sit.next.url}}" & gt; / lt; / a & gt;
   & lt; / div & gt;
   {% ENDIF%}
& lt; / div & gt; 

Noi folosim Pagina .previous și Pagina.next. Variabile pentru a verifica dacă există un post pentru a face clic pe. Dacă există atunci putem emite un bloc și putem include titlul și legătura postului.

11. Construiți și publicați

Paginile GitHub face fișierele de sass pentru noi, așa că atunci când alergi Jekyll construiește Fișierele compilate sunt create în dosarul _SITE. Nu există fișiere Gulp sau webpack aici, doar stiluri slabe frumoase! Puteți chiar să recitificați ieșirea SAS ca o setare în fișierul principal config.yml pentru site. Conținutul acestui director poate fi transferat la găzduirea aleasă. Un lucru care trebuie conștient de faptul că paginile Github acceptă de fapt Jekyll, astfel încât să puteți construi și găzdui un site folosind filiala dvs. de masterat ca sursă. Puteți găsi mai multe informații despre acest lucru Aici .

Acest articol a fost publicat inițial în numărul 320 de net , cea mai bună revistă din lume pentru designeri și dezvoltatori web. Cumpăra problema 320 aici sau Abonați-vă aici .

Articole similare:

• Construiți un blog cu grilă și Flexbox
• Cele mai bune platforme gratuite de blogging
• Cum de a construi un site de blogging cu Gatsby