Share
În postul anterior, am vorbit despre paginile GitHub și despre cum să le configurați în depozitul dvs. GitHub. Am folosit generatorul site-ului pentru a începe și am menționat că GitHub Pages sprijină, de asemenea, Jekyll.
În acest post, voi vorbi despre Jekyll și vă voi arăta cum să îl configurați cu proiectul dvs. Am creat un exemplu de proiect pe care îl trageți și urmați împreună.
Ce este exact Jekyll? Iată descrierea lor pe site-ul lor:
Jekyll este un generator de site-uri simplu, blog-constient, static.
Este complet condus de conținut și sprijină, de asemenea, Markdown. Utilizeaza lichide pentru layouts sale, astfel încât să aveți unele reutilizare a lucrurilor cum ar fi capul, antet și subsol. Acesta va genera pagini statice pe baza conținutului dvs. și a layout-urilor pe care le specificați.
Este, de asemenea, blog-ul conștient, astfel încât ar putea fi un înlocuitor potențial pentru WordPress sau un alt CMS.
Poate că cel mai important lucru pe care trebuie să-l observăm este că, în Jekyll, permalinks, categorii, pagini, postări și layout-uri personalizate sunt toți cetățenii de primă clasă.
De asemenea, puteți genera și vizualiza site-ul dvs. local, de asemenea.
Jekyll se bazează pe Ruby, astfel încât cea mai ușoară cale de a instala este RubyGems. Dacă sunteți pe Mac sau Linux, aveți posibilitatea să instalați Jekyll prin linia de comandă prin executarea gem install jekyll. Dacă întâmpinați probleme în timpul instalării, vă sugerăm să verificați ghidul de instalare.
Dacă sunteți pe Windows, atunci există o pagină de documente specifică Windows pe care va trebui să o urmați.
Primul lucru pe care va trebui să îl configurați este fișierul de configurare. Veți dori să adăugați o _config.yml fișier la rădăcina proiectului. Există o serie de opțiuni de configurare pe care le puteți adăuga, pentru acest exemplu voi folosi un subset al acestora. Mergeți mai departe și adăugați următoarele la dvs. _config.yml fişier:
# Dependencies markdown: pseudoane rdiscount: true # Permalinks permalink: destul de # Server destinație: _gh_pages host: 0.0.0.0 port: 9001 baseurl: / encoding: UTF-8
Acum, când am adăugat fișierul nostru de configurare, să continuăm configurarea structurii proiectului.
Există o structură specifică pe care trebuie să o urmați atunci când creați un site bazat pe Jekyll. Este important să urmăriți structura pentru ca site-ul dvs. să fie generat corect. Iată cum arată,
Aici veti avea layouts diferite pentru paginile dvs. Vă puteți gândi la acestea pentru a fi ca șabloanele de pagini WordPress. Poate doriți ca aspectul dvs. implicit să aibă o bara laterală și să aveți un alt aspect care nu are o bara laterală. Veți referi aceste aspecte în conținutul dvs. în funcție de numele fișierului.
Mergeți și creați o _layouts din rădăcina proiectului. Apoi, să spunem că doriți să creați aspectul implicit. Veți dori să creați o default.html în interiorul _layouts pliant. Veți putea apoi să vă referiți la aspectul implicit din paginile dvs. diferite.
Există câteva lucruri pe care probabil că doriți să le adăugați la fiecare dintre fișierele de aspect, titlul și conținutul paginii. Dacă doriți să apară titlul paginii dvs., atunci veți dori să o adăugați la aspectul dvs. utilizând următoarea sintaxă:
titlul paginii
De asemenea, doriți să specificați locul în care doriți ca conținutul fiecărei pagini să fie populat în acel aspect. Pentru a face acest lucru, va trebui să utilizați următoarea sintaxă:
content
Acestea sunt utilizate în default.html în proiectul exemplu.
Veți dori probabil să includeți și alte lucruri care vor fi reutilizate în fiecare pagină, cum ar fi antetul, subsolul, navigația și altele. Veți dori să adăugați acestea în dvs. _includes pliant.
Include vor fi lucruri pe care doriți să le reutilizați pe pagini diferite, cum am menționat mai sus. Veți dori să le adăugați în _includes pliant. Mergeți și creați o _includes din rădăcina proiectului.
Să presupunem că doriți ca documentul să fie inclus ca un element de includere. Mai întâi trebuie să adăugați o head.html fișier în _includes pliant. Apoi, adăugați tot ce aveți nevoie pentru capul documentului, cum ar fi doctype, meta date, scripturi, etc.
În continuare, veți dori să menționați acest lucru head.html fișier în dvs. default.html layout file. Veți face acest lucru utilizând următoarea sintaxă:
% include head.html%
Puteți vedea acest lucru fiind utilizat în default.html în proiectul de exemplu.
Ați face același lucru pentru orice altceva pe care doriți să îl refolosiți între pagini precum antetul și subsolul. De asemenea, puteți crea subfoldere în interiorul _includes și trimiteți-le și la acestea. Îmi place să fac acest lucru pentru a organiza secțiunile diferențiale ale fiecărei pagini dacă au mult conținut.
Acum, că avem un aspect prestabilit, să facem prima pagină. Mergeți și creați un index.html fișier în dosarul rădăcină al proiectului dvs. Nu vă faceți griji, nu va suprascrie tema index.php dacă utilizați acest document pentru a documenta tema WordPress.
În partea de sus a fiecărui fișier, va trebui să specificați câteva lucruri despre pagină. Aceasta este ceea ce se va referi la construirea fiecărei pagini. Există o serie de lucruri pe care le puteți seta, dar mă voi concentra asupra câtorva dintre ele:
Iată un exemplu de adăugat în partea de sus a paginii dvs. index.html fişier:
--- layout: titlu implicit: Tuts + GitHub Pages slug: tuts-github-pages ---
Acum că avem pagina de configurare, tot ce trebuie să facem acum este să adăugăm conținutul nostru. Pur și simplu adăugați toate codurile HTML pe care doriți să le afișați în pagina dvs..
Construirea și difuzarea paginilor dvs. se face prin linia de comandă. Continuați și deschideți instrumentul pentru linia de comandă de la alegere, introduceți-l sexyll servi și apăsați Enter. Ar trebui să vedeți următoarea ieșire:
Dacă vedeți ieșirea corectă, paginile dvs. sunt construite și sunt gata de vizualizare. Acum vă puteți vizualiza paginile vizitând http: // localhost: 9001, sau orice port specificat în dumneavoastră _config.yml fișier, în browser-ul dvs. de alegere.
Am acoperit elementele de bază pentru a începe să folosiți Jekyll pentru proiectul dvs. Am trecut prin modul de configurare a fișierului de configurare și a structurii proiectului. De asemenea, am vorbit despre cum vă puteți construi și servi paginile. Dacă doriți să vedeți totul împreună, puteți să aruncați o privire la acest exemplu de proiect.
În următorul post, voi vorbi despre cum să vă difuzați paginile pe paginile GitHub și să le distribuiți în tema sau pluginul dvs. WordPress.
Accentsconagua