Jekyll pentru dezvoltatori Wordpress

Publicat: 2022-03-10
Rezumat rapid ↬ Jekyll câștigă popularitate ca alternativă ușoară la WordPress. Adesea este încadrat ca instrument pe care dezvoltatorii îl folosesc pentru a-și construi blogul personal. Acesta este doar vârful aisbergului - este capabil de mult mai mult! În acest articol, ne vom asuma rolul unui dezvoltator web care construiește un site web pentru o firmă de avocatură fictivă. WordPress este o alegere evidentă pentru un site web ca acesta, dar este singurul instrument pe care ar trebui să-l luăm în considerare? Să ne uităm la un mod complet diferit de a construi un site web, folosind Jekyll.

În acest articol, ne vom asuma rolul unui dezvoltator web care construiește un site web pentru o firmă de avocatură fictivă. WordPress este o alegere evidentă pentru un site web ca acesta, dar este singurul instrument pe care ar trebui să-l luăm în considerare? Să ne uităm la un mod complet diferit de a construi un site web, folosind Jekyll.

Jekyll pentru dezvoltatori Wordpress

Citiți suplimentare despre SmashingMag:

  • Creați un blog cu pagini Jekyll și GitHub
  • Modelarea conținutului cu Jekyll
  • Generatoare statice de site revizuite: Jekyll, Middleman, Roots, Hugo
  • De ce generatoarele statice de site sunt următorul lucru important
Mai multe după săritură! Continuați să citiți mai jos ↓

Ce este Jekyll?

Jekyll este un generator de site-uri web static. În loc să fie instalate software și o bază de date pe serverul nostru, un site web Jekyll este pur și simplu un director de fișiere de pe computerul nostru. Când rulăm Jekyll în acel director, generează un site web static, pe care îl încărcăm la un furnizor de găzduire.

De ce Jekyll?

Trebuie să luăm în considerare o serie de compromisuri atunci când decidem dacă Jekyll este potrivit pentru un proiect.

Avantajele lui Jekyll

  • Mai puțină complexitate
    Un site web Jekyll este în esență un site web static cu un limbaj de șablon. Are mai puține componente de creat și întreținut. Pe server avem nevoie doar de un server web capabil să servească fișiere.
  • Viteză
    Când vizitatorii vizualizează pagini de pe site-urile Jekyll, serverul returnează fișierele existente fără nicio prelucrare suplimentară . Acesta este mult mai rapid decât WordPress, care generează pagini dinamic la momentul solicitării. Notă: pluginurile WordPress Caching pot elimina acest decalaj de performanță.
  • Stabilitate
    WordPress are mai multe componente care lucrează împreună pentru a genera pagini pentru vizitatori. Dacă o componentă eșuează, este posibil ca vizitatorii să nu poată vizualiza site-ul web. Mult mai puține pot merge prost atunci când un server web servește numai fișiere.
  • Securitate
    Wordpress face mult pentru a atenua riscurile de securitate, cum ar fi atacurile CSRF, XSS sau injectare SQL, totuși se bazează pe faptul că aveți întotdeauna cele mai recente actualizări. Site-urile de statică elimină această problemă, deoarece nu există stocare dinamică de date pe care un hacker poate exploata.
  • Controlat de la sursă
    Un site web Jekyll este un director de fișiere, așa că putem stoca întregul site într-un depozit Git. Lucrul cu un depozit ne oferă multe beneficii (deși VersionPress este în dezvoltare și permite acest flux de lucru pentru WordPress).

Dezavantajele lui Jekyll

  • Fără GUI
    Un client se poate înscrie la WordPress.com, alege o temă și poate configura singur un site web de bază. Jekyll este un instrument de linie de comandă, care copleșește majoritatea utilizatorilor non-tehnici. Există interfețe grafice terță parte pentru Jekyll, inclusiv CloudCannon (exonerare de responsabilitate: sunt cofondatorul), Forestry, Jekyll Admin, Netlify CMS, Prose și Siteleaf. Cu toate acestea, acestea trebuie să fie configurate de dezvoltator înainte de a fi predate clientului.
  • Construiește timp
    În situația noastră, aceasta nu este o problemă, deoarece site-ul web se va construi în mai puțin de o secundă. Cu toate acestea, un site web mai mare, cu 10.000 până la 100.000 de postări, ar putea dura câteva minute. Acest lucru este frustrant atunci când dezvoltăm, deoarece trebuie să așteptăm ca site-ul web să se creeze înainte de a-l previzualiza în browser.
  • Teme
    Jekyll are câteva teme disponibile, dar nu este nimic în comparație cu miile de teme disponibile pentru WordPress.
  • Extensibilitate
    Dacă trebuie să adăugăm funcționalități personalizate site-ului nostru WordPress, putem scrie propriul nostru PHP. Putem crea pluginuri Ruby personalizate pentru Jekyll, cu toate acestea, acestea rulează la momentul construirii, mai degrabă decât la momentul solicitării.
  • A sustine
    WordPress are o comunitate imensă de experți și alte resurse pentru a vă ajuta. Jekyll are resurse similare, dar la o scară mai mică.

Jekyll este un instrument grozav pentru site-uri web în mare măsură informaționale, cum ar fi acest proiect. Dacă proiectul este mai mult o aplicație, am putea adăuga elemente dinamice folosind JavaScript, dar la un moment dat probabil că vom avea nevoie de un back end precum WordPress'.

Implementarea

WordPress și Jekyll adoptă abordări diferite pentru construirea unui site web, dar au o mulțime de funcționalități. Să începem să construim site-ul nostru Jekyll.

Instalare

Un mediu de dezvoltare tipic pentru WordPress necesită instalarea Apache sau NGINX, PHP și MySQL. Apoi, vom instala WordPress și vom configura serverul web.

Pentru Jekyll, trebuie să ne asigurăm că avem Ruby instalat (uneori este mai greu decât pare). Apoi instalăm bijuteria Jekyll:

 gem install jekyll

Dacă sunteți pe macOS, asigurați-vă că aveți instalat mai întâi dezvoltatorul Xcode.

 xcode-select --install

Alergare

Rularea unui site WordPress constă de obicei în pornirea bazei de date și a serverului web.

În Jekyll, navigăm la fișierele site-ului nostru (un director gol în acest moment) în terminal și rulăm:

 jekyll serve

Aceasta pornește un server web local pe portul 4000 și reconstruiește site-ul ori de câte ori se modifică un fișier.

Pagini

Este timpul să ne creăm prima pagină. Să începem cu pagina de start. Paginile sunt pentru conținut autonom fără o dată asociată. WordPress stochează conținutul paginii în baza de date.

În Jekyll, paginile sunt fișiere HTML. Vom începe cu HTML pur și apoi vom adăuga caracteristici Jekyll după cum sunt necesare. Iată index.html în starea sa actuală:

 <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="container"> <h1><a href="/">Justice</a></h1> <nav> <ul> <li><a href="/about/">About</a></li> <li><a href="/services/">Services</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/advice/">Advice</a></li> </ul> </nav> </div> <section class="main"> <div class="container"> <p>Justice Law is professional representation. Practicing for over 50 years, our team have the knowledge and skills to get you results.</p> <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote> </div> </section> <footer> <p class="copyright"> &copy; 2016 </p> </footer> </body> </html>

Lichid

În WordPress, putem scrie PHP pentru a face aproape orice. Jekyll adoptă o abordare diferită. În loc să ofere un limbaj de programare complet, folosește un limbaj de șablon numit Liquid. (WordPress are și limbi de șabloane, cum ar fi Timber.)

Subsolul index.html conține o notificare privind drepturile de autor cu un an:

 <p class="copyright"> &copy; 2016 </p>

Este puțin probabil să ne amintim să actualizăm acest lucru în fiecare an, așa că să folosim Liquid pentru a scoate anul curent:

 <p class="copyright"> &copy; {{ site.time | date: "%Y" }} </p>

Construim un site web static în Jekyll, așa că această dată nu se va schimba până când vom reconstrui site-ul. Dacă dorim ca data să se schimbe fără a fi nevoie să reconstruim site-ul web, am putea folosi JavaScript.

Include

Cea mai mare parte a HTML-ului din index.html este pentru configurarea aspectului general și nu se va schimba între pagini. Această repetare va duce la multă întreținere, așa că haideți să o reducem.

Includes a fost unul dintre primele lucruri pe care le-am învățat în PHP. Folosind include, putem pune conținutul antetului și subsolului în fișiere diferite, apoi includem același conținut pe mai multe pagini.

Jekyll are exact aceeași caracteristică. Include sunt stocate într-un folder numit _includes . Folosim Liquid pentru a le include în index.html :

 {% include header.html %} <p>Justice Law is professional representation. Practicing for over 50 years, our team have the knowledge and skills to get you results.</p> <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote> {% include footer.html %}

Aspecte

Include reduce o parte din repetare, dar încă le avem pe fiecare pagină. WordPress rezolvă această problemă cu fișiere șablon care separă structura unui site web de conținutul acestuia.

Echivalentul Jekyll cu fișierele șablon este machetele. Aspectele sunt fișiere HTML cu un substituent pentru conținut. Sunt stocate în directorul _layouts . Vom crea _layouts/default.html pentru a conține un aspect HTML de bază:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="container"> <h1><a href="/">Justice</a></h1> <nav> <ul> <li><a href="/about/">About</a></li> <li><a href="/services/">Services</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/advice/">Advice</a></li> </ul> </nav> </div> <section class="main"> <div class="container"> {{ content }} </div> </section> <footer> <p class="copyright"> &copy; {{ site.time | date: "%Y-%m-%d" }} </p> </footer> </body> </html>

Apoi, înlocuiți includerile din index.html specificând aspectul. Specificăm aspectul utilizând materialul frontal, care este un fragment de YAML care se află între două linii cu trei puncte în partea de sus a unui fișier (mai multe despre asta în curând).

 --- layout: default --- <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote>

Acum putem avea același aspect pe toate paginile noastre.

Materia frontală

În WordPress, câmpurile personalizate ne permit să setăm metadate pe o postare. Le putem folosi pentru a seta etichete SEO sau pentru a afișa și a ascunde secțiuni ale unei pagini pentru o anumită postare.

Acest concept se numește materie frontală în Jekyll. Anterior, am folosit front matter pentru a seta aspectul pentru index.html . Acum ne putem seta propriile variabile și le putem accesa folosind Liquid. Acest lucru reduce și mai mult repetarea pe site-ul nostru.

Să adăugăm mai multe mărturii la index.html . Am putea copia și lipi codul HTML, dar încă o dată, asta duce la o întreținere sporită. În schimb, să adăugăm mărturiile în prima pagină și să repetăm ​​peste ele cu Liquid:

 --- layout: default testimonials: - message: We use Justice Law in all our endeavours. They offer an unparalleled service when it comes to running a business. image: "/images/joice.jpeg" name: Joice Carmold - message: Justice Law are the best of the best. Being local, they care about people and have strong ties to the community. image: "/images/peter.jpeg" name: Peter Rottenburg - message: Justice Law were everything we could have hoped for when buying our first home. Highly recommended to all. image: "/images/gibblesto.jpeg" name: D. and G. Gibbleston --- <div class="testimonials"> {% for testimonial in page.testimonials %} <blockquote class="testimonial"> <p class="testimonial-message">{{ testimonial.message }}</p> <p class="testimonial-author"> <img src="{{ testimonial.image }}" alt="Photo of {{ testimonial.name }}"> {{ testimonial.name }} </p> </blockquote> {% endfor %} </div>

Postări

WordPress stochează conținutul HTML, data și alte metadate pentru postările din baza de date.

În Jekyll, fiecare postare este un fișier static stocat într-un director _posts . Numele fișierului are data publicării și titlul postării — de exemplu, _posts/2016-11-11-real-estate-flipping.md . Codul sursă pentru o postare de blog are această structură:

 --- layout: post categories: - Property --- ![House](/images/house.jpeg)

De asemenea, putem folosi materialul frontal pentru a seta categorii și etichete.

Sub materialul din față se află corpul postării, scris în Markdown. Markdown este o alternativă mai simplă la HTML.

Jekyll ne permite să creăm layout-uri care moștenesc de la alte layout-uri. S-ar putea să fi observat că această postare are un aspect al post . Aspectul post moștenește din aspectul implicit și adaugă o dată și un titlu:

 --- layout: default --- <h3>{{ page.title }}</h3> <p>{{ page.date | date: '%B %d, %Y' }}</p> {{ content }}

Să creăm blog.html pentru a repeta postările și a le face linkuri:

 --- layout: default --- <ul> {% for post in site.posts %} <li><a href="{{ post.url }}">{{ post.title }}</a></li> {% endfor %} </ul>

Colecții

În WordPress, tipurile de postări personalizate sunt utile pentru gestionarea grupurilor de conținut. De exemplu, puteți utiliza tipuri de postări personalizate pentru mărturii, produse sau înregistrări imobiliare.

Jekyll are această caracteristică și o numește colecții.

Pagina about.html afișează profilurile membrilor personalului. Am putea defini metadatele pentru personal (nume, imagine, număr de telefon, bio) în prima pagină, dar apoi le-am putea referi doar pe pagina respectivă. În viitor, dorim să folosim aceleași date pentru a afișa informații despre autori în postările de blog. O colecție ne permite să ne referim la membrii personalului oriunde pe site.

Configurația site-ului nostru se află în _config.yml . Aici, am stabilit o nouă colecție:

 collections: staff_members: output: false

Acum adăugăm membrii personalului nostru. Fiecare membru al personalului este reprezentat într-un fișier Markdown stocat într-un folder cu numele colecției; de exemplu, _staff_members/jane-doe.md .

Adăugăm metadatele în partea din față și blurb-ul în corp:

 --- name: Jane Doe image: "/images/jane.jpeg" phone: "1234567" --- Jane has 19 years of experience in law, and specialises in property and business.

Similar postărilor, putem itera colecția în about.html pentru a afișa fiecare membru al personalului:

 --- layout: default --- <ul> {% for member in site.staff_members %} <li> <div><img src="{{ member.image }}" alt="Staff photo for {{ member.name }}"></div> <p>{{ member.name }} - {{ member.phone }}</p> <p>{{ member.content | markdownify }}</p> </li> {% endfor %} </ul>

Căutare

WordPress are o căutare puternică încorporată și pluginuri de căutare chiar mai puternice.

Jekyll nu are căutare încorporată, dar există soluții:

  • căutare pe partea clientului folosind o bibliotecă JavaScript, cum ar fi Lunr.js (Jekyll.tips are un tutorial despre cum să configurați acest lucru);
  • soluții de la terți, cum ar fi Algolia pentru căutare de înaltă performanță;
  • soluții integrate, cum ar fi Google Custom Search.

Pluginuri

Pluginurile sunt o parte atrăgătoare a WordPress. Este ușor să încărcați funcționalitatea pentru a face WordPress să facă aproape orice.

Pe site-ul nostru Jekyll, multe plugin-uri populare WordPress nu sunt necesare:

  • iThemes Security
    Site-ul nostru web Jekyll este la fel de sigur ca și serverul web pe care rulează.
  • Garda de rezervă
    Site-ul nostru Jekyll va locui într-un depozit care ne oferă acces la întregul istoric al modificărilor.
  • WP Super Cache
    Site-ul nostru Jekyll este deja static.

Alte plugin-uri WordPress au echivalente terțe pe care le putem introduce pe site:

  • Pluginurile de formulare de contact, cum ar fi Formularul de contact 7, pot fi înlocuite cu Formspree, FormKeep sau Wufoo.
  • Pentru un magazin simplu, WP eCommerce poate fi înlocuit cu Snipcart, Gumroad sau Stripe.
  • În loc de comentarii WordPress cu Akismet, puteți folosi Disqus, Facebook Comments sau IntenseDebate.

Unele pluginuri WordPress pot fi emulate cu Jekyll de bază. Iată o galerie foto care utilizează materia frontală și lichid:

 --- layout: default images: - image_path: /images/bill.jpg title: Bill - image_path: /images/burt.jpg title: Burt - image_path: /images/gary.jpg title: Gary - image_path: /images/tina.jpg title: Tina - image_path: /images/suzy.jpg title: Suzy --- <ul class="photo-gallery"> {% for image in page.images %} <li><img src="{{ image.image_path }}" alt="{{ image.title }}"/></li> {% endfor %} </ul>

Trebuie doar să adăugăm propriul JavaScript și CSS pentru a-l completa.

Pluginurile Jekyll pot emula funcționalitatea altor plugin-uri WordPress. Rețineți că pluginurile Jekyll rulează numai în timp ce site-ul web este generat - nu adaugă funcționalitate în timp real:

  • În loc de Sitemap XML cu un clic, utilizați pluginul Jekyll Sitemap Generator.
  • Jekyll SEO Tag vă oferă câteva dintre funcționalitățile SEO Wizard.
  • În loc de WPGlobus pentru un site web multilingv, utilizați Jekyll Language Plugin.

Controlul versiunii

Unul dintre avantajele majore ale utilizării unui generator de site static precum Jekyll este întregul site și conținutul poate trăi în Git. La un nivel de bază, Git vă oferă un istoric al tuturor modificărilor de pe site. Pentru echipe, deschide tot felul de fluxuri de lucru și procese de aprobare.

GitHub are un tutorial interactiv fantastic pentru începătorii care învață Git.

Predarea clientului

Aceasta acoperă piulițele și șuruburile creării site-ului web. Dacă sunteți curios să vedeți cum se potrivește un întreg site web Jekyll, aruncați o privire la șablonul Justiție. Este un șablon gratuit cu licență MIT pentru Jekyll. Fragmentele de mai sus se bazează pe acest șablon.

CMS-ul WordPress este încorporat în platformă, așa că ar trebui să creăm un cont pentru client.

Cu site-ul nostru Jekyll, ne-am conecta depozitul Git la una dintre interfața grafică Jekyll menționată mai devreme. Unul dintre lucrurile frumoase despre acest flux de lucru este că modificările clienților sunt trimise înapoi în depozit. În calitate de dezvoltatori, putem continua să folosim fluxurile de lucru locale chiar și în cazul în care utilizatorii care nu sunt dezvoltatori actualizează site-ul web.

Unele interfețe grafice Jekyll oferă găzduire, în timp ce altele au o modalitate de a trimite către o găleată Amazon S3 sau către Pagini GitHub.

rezumat

În acest moment, site-ul nostru Jekyll este live și poate fi editat de către client. Dacă trebuie să facem modificări site-ului web, pur și simplu împingem în depozit și acesta se va implementa automat în direct.

<div class=“testimonials”> {% for testimonial in page.testimonials %} <blockquote class=“testimonial”> <p class=“testimonial-message”>{{ testimonial.message }}</p> <p class =“testimonial-author”> <img src=“{{ testimonial.image }}” alt=„Fotografie cu {{ testimonial.name }}”> {{ testimonial.name }} </p> </blockquote> { % endfor %} </div>

Postări

WordPress stochează conținutul HTML, data și alte metadate pentru postările din baza de date.

În Jekyll, fiecare postare este un fișier static stocat într-un director _posts . Numele fișierului are data publicării și titlul postării — de exemplu, _posts/2016-11-11-real-estate-flipping.md . Codul sursă pentru o postare de blog are această structură:

 --- layout: post categories: - Property --- ![House](/images/house.jpeg)

De asemenea, putem folosi materialul frontal pentru a seta categorii și etichete.

Sub materialul din față se află corpul postării, scris în Markdown. Markdown este o alternativă mai simplă la HTML.

Jekyll ne permite să creăm layout-uri care moștenesc de la alte layout-uri. S-ar putea să fi observat că această postare are un aspect al post . Aspectul post moștenește din aspectul implicit și adaugă o dată și un titlu:

 --- layout: default --- <h3>{{ page.title }}</h3> <p>{{ page.date | date: '%B %d, %Y' }}</p> {{ content }}

Să creăm blog.html pentru a repeta postările și a le face linkuri:

 --- layout: default --- <ul> {% for post in site.posts %} <li><a href="{{ post.url }}">{{ post.title }}</a></li> {% endfor %} </ul>

Colecții

În WordPress, tipurile de postări personalizate sunt utile pentru gestionarea grupurilor de conținut. De exemplu, puteți utiliza tipuri de postări personalizate pentru mărturii, produse sau înregistrări imobiliare.

Jekyll are această caracteristică și o numește colecții.

Pagina about.html afișează profilurile membrilor personalului. Am putea defini metadatele pentru personal (nume, imagine, număr de telefon, bio) în prima pagină, dar apoi le-am putea referi doar pe pagina respectivă. În viitor, dorim să folosim aceleași date pentru a afișa informații despre autori în postările de blog. O colecție ne permite să ne referim la membrii personalului oriunde pe site.

Configurația site-ului nostru se află în _config.yml . Aici, am stabilit o nouă colecție:

 collections: staff_members: output: false

Acum adăugăm membrii personalului nostru. Fiecare membru al personalului este reprezentat într-un fișier Markdown stocat într-un folder cu numele colecției; de exemplu, _staff_members/jane-doe.md .

Adăugăm metadatele în partea din față și blurb-ul în corp:

 --- name: Jane Doe image: "/images/jane.jpeg" phone: "1234567" --- Jane has 19 years of experience in law, and specialises in property and business.

Similar postărilor, putem itera colecția în about.html pentru a afișa fiecare membru al personalului:

 --- layout: default --- <ul> {% for member in site.staff_members %} <li> <div><img src="{{ member.image }}" alt="Staff photo for {{ member.name }}"></div> <p>{{ member.name }} - {{ member.phone }}</p> <p>{{ member.content | markdownify }}</p> </li> {% endfor %} </ul>

Căutare

WordPress are o căutare puternică încorporată și pluginuri de căutare chiar mai puternice.

Jekyll nu are căutare încorporată, dar există soluții:

  • căutare pe partea clientului folosind o bibliotecă JavaScript, cum ar fi Lunr.js (Jekyll.tips are un tutorial despre cum să configurați acest lucru);
  • soluții de la terți, cum ar fi Algolia pentru căutare de înaltă performanță;
  • soluții integrate, cum ar fi Google Custom Search.

Pluginuri

Pluginurile sunt o parte atrăgătoare a WordPress. Este ușor să încărcați funcționalitatea pentru a face WordPress să facă aproape orice.

Pe site-ul nostru Jekyll, multe plugin-uri populare WordPress nu sunt necesare:

  • iThemes Security
    Site-ul nostru web Jekyll este la fel de sigur ca și serverul web pe care rulează.
  • Garda de rezervă
    Site-ul nostru Jekyll va locui într-un depozit care ne oferă acces la întregul istoric al modificărilor.
  • WP Super Cache
    Site-ul nostru Jekyll este deja static.

Alte plugin-uri WordPress au echivalente terțe pe care le putem introduce pe site:

  • Pluginurile de formulare de contact, cum ar fi Formularul de contact 7, pot fi înlocuite cu Formspree, FormKeep sau Wufoo.
  • Pentru un magazin simplu, WP eCommerce poate fi înlocuit cu Snipcart, Gumroad sau Stripe.
  • În loc de comentarii WordPress cu Akismet, puteți folosi Disqus, Facebook Comments sau IntenseDebate.

Unele pluginuri WordPress pot fi emulate cu Jekyll de bază. Iată o galerie foto care utilizează materia frontală și lichid:

 --- layout: default images: - image_path: /images/bill.jpg title: Bill - image_path: /images/burt.jpg title: Burt - image_path: /images/gary.jpg title: Gary - image_path: /images/tina.jpg title: Tina - image_path: /images/suzy.jpg title: Suzy --- <ul class="photo-gallery"> {% for image in page.images %} <li><img src="{{ image.image_path }}" alt="{{ image.title }}"/></li> {% endfor %} </ul>

Trebuie doar să adăugăm propriul JavaScript și CSS pentru a-l completa.

Pluginurile Jekyll pot emula funcționalitatea altor plugin-uri WordPress. Rețineți că pluginurile Jekyll rulează numai în timp ce site-ul web este generat - nu adaugă funcționalitate în timp real:

  • În loc de Sitemap XML cu un clic, utilizați pluginul Jekyll Sitemap Generator.
  • Jekyll SEO Tag vă oferă câteva dintre funcționalitățile SEO Wizard.
  • În loc de WPGlobus pentru un site web multilingv, utilizați Jekyll Language Plugin.

Controlul versiunii

Unul dintre avantajele majore ale utilizării unui generator de site static precum Jekyll este întregul site și conținutul poate trăi în Git. La un nivel de bază, Git vă oferă un istoric al tuturor modificărilor de pe site. Pentru echipe, deschide tot felul de fluxuri de lucru și procese de aprobare.

GitHub are un tutorial interactiv fantastic pentru începătorii care învață Git.

Predarea clientului

Aceasta acoperă piulițele și șuruburile creării site-ului web. Dacă sunteți curios să vedeți cum se potrivește un întreg site web Jekyll, aruncați o privire la șablonul Justiție. Este un șablon gratuit cu licență MIT pentru Jekyll. Fragmentele de mai sus se bazează pe acest șablon.

CMS-ul WordPress este încorporat în platformă, așa că ar trebui să creăm un cont pentru client.

Cu site-ul nostru Jekyll, ne-am conecta depozitul Git la una dintre interfața grafică Jekyll menționată mai devreme. Unul dintre lucrurile frumoase despre acest flux de lucru este că modificările clienților sunt trimise înapoi în depozit. În calitate de dezvoltatori, putem continua să folosim fluxurile de lucru locale chiar și în cazul în care utilizatorii care nu sunt dezvoltatori actualizează site-ul web.

Unele interfețe grafice Jekyll oferă găzduire, în timp ce altele au o modalitate de a trimite către o găleată Amazon S3 sau către Pagini GitHub.

rezumat

În acest moment, site-ul nostru Jekyll este live și poate fi editat de către client. Dacă trebuie să facem modificări site-ului web, pur și simplu împingem în depozit și acesta se va implementa automat în direct.

Primul tău site web Jekyll

Acum e rândul tău. Sunt disponibile o mulțime de resurse pentru a vă ajuta să vă construiți primul site web Jekyll:

  • Site-ul web oficial Jekyll este un loc minunat pentru a începe cu o documentație aprofundată despre toate funcțiile Jekyll.
  • Jekyll.tips are o serie de tutoriale video care acoperă subiectele principale despre Jekyll.
  • Aruncă o privire la șabloanele Jekyll de pe GitHub pentru a vedea cum sunt asamblate: Frisco pentru site-uri web de marketing, Scholar pentru documentare și Urban pentru agenții digitale.

Dacă migrați, Jekyll are instrumente pentru a importa postări de pe site-urile WordPress și WordPress.com. După importare, va trebui să migrați sau să creați manual machetele, paginile, CSS, JavaScript și alte elemente pentru site-ul web.

Încheierea

Frumusețea lui Jekyll constă în simplitatea sa. În timp ce WordPress se poate potrivi cu multe dintre caracteristicile Jekyll, adesea vine cu prețul complexității prin pluginuri sau infrastructură suplimentare.

În cele din urmă, este vorba despre găsirea instrumentului care funcționează cel mai bine pentru tine. Am descoperit că Jekyll este o modalitate rapidă și eficientă de a construi site-uri web. Te încurajez să-l încerci și să postezi experiența ta în comentarii.