Jekyll dla programistów Wordpress

W tym artykule przyjmiemy rolę programisty tworzącego stronę internetową dla fikcyjnej firmy prawniczej. WordPress to oczywisty wybór dla takiej witryny, ale czy jest to jedyne narzędzie, które powinniśmy wziąć pod uwagę? Spójrzmy na zupełnie inny sposób budowania strony internetowej za pomocą Jekyll.

Dalsze czytanie na SmashingMag:

• Zbuduj blog ze stronami Jekyll i GitHub
• Modelowanie treści za pomocą Jekyll
• Recenzja generatorów stron statycznych: Jekyll, pośrednik, korzenie, Hugo
• Dlaczego generatory stron statycznych to kolejna wielka rzecz?
  

Co to jest Jekyll?

Jekyll to statyczny generator stron internetowych. Zamiast oprogramowania i bazy danych instalowanych na naszym serwerze, strona Jekyll jest po prostu katalogiem plików na naszym komputerze. Kiedy uruchamiamy Jekyll w tym katalogu, generuje on statyczną stronę internetową, którą przesyłamy do dostawcy hostingu.

Dlaczego Jekyll?

Przy podejmowaniu decyzji, czy Jekyll jest odpowiedni dla projektu, musimy wziąć pod uwagę szereg kompromisów.

Zalety Jekylla

• Mniejsza złożoność
  Witryna Jekyll jest zasadniczo statyczną witryną internetową z językiem szablonów. Ma mniej komponentów do stworzenia i utrzymania. Na serwerze potrzebujemy tylko serwera WWW zdolnego do obsługi plików.
• Prędkość
  Gdy odwiedzający przeglądają strony w witrynach Jekyll, serwer zwraca istniejące pliki bez dodatkowego przetwarzania . Jest to znacznie szybsze niż WordPress, który generuje strony dynamicznie w czasie żądania. Uwaga: wtyczki WordPress Caching mogą wyeliminować tę lukę w wydajności.
• Stabilność
  WordPress ma więcej komponentów współpracujących ze sobą, aby generować strony dla odwiedzających. Jeśli składnik ulegnie awarii, odwiedzający mogą nie być w stanie wyświetlić witryny. Znacznie mniej może się nie udać, gdy serwer WWW obsługuje tylko pliki.
• Bezpieczeństwo
  Wordpress robi wiele, aby złagodzić zagrożenia bezpieczeństwa, takie jak ataki CSRF, XSS lub SQL injection, ale polega na tym, że zawsze masz najnowsze aktualizacje. Witryny statyczne eliminują ten problem, ponieważ nie ma dynamicznego przechowywania danych, które haker mógłby wykorzystać.
• Kontrolowane przez źródło
  Witryna Jekyll to katalog plików, dzięki czemu możemy przechowywać całą witrynę w repozytorium Git. Praca z repozytorium daje nam wiele korzyści (chociaż VersionPress jest w fazie rozwoju i umożliwia ten przepływ pracy dla WordPressa).

Wady Jekyll

• Brak GUI
  Klient może samodzielnie zarejestrować się na WordPress.com, wybrać motyw i założyć podstawową stronę internetową. Jekyll to narzędzie wiersza poleceń, które przytłacza większość nietechnicznych użytkowników. Istnieją zewnętrzne GUI dla Jekyll, w tym CloudCannon (zastrzeżenie: jestem współzałożycielem), Forestry, Jekyll Admin, Netlify CMS, Prose i Siteleaf. Jednak muszą one zostać skonfigurowane przez programistę przed przekazaniem ich klientowi.
• Czas budowy
  W naszej sytuacji nie stanowi to problemu, ponieważ strona zbuduje się w niecałą sekundę. Jednak utworzenie większej witryny z 10 000 do 100 000 postów może zająć kilka minut. Jest to frustrujące, gdy pracujemy nad programowaniem, ponieważ musimy poczekać na zbudowanie witryny przed wyświetleniem jej podglądu w przeglądarce.
• Motywy
  Jekyll ma kilka dostępnych motywów, ale to nic w porównaniu z tysiącami motywów dostępnych dla WordPressa.
• Rozciągliwość
  Jeśli potrzebujemy dodać niestandardową funkcjonalność do naszej witryny WordPress, możemy napisać własne PHP. Możemy tworzyć niestandardowe wtyczki Ruby dla Jekyll, jednak działają one w czasie kompilacji, a nie w czasie żądania.
• Wsparcie
  WordPress ma ogromną społeczność ekspertów i inne zasoby, które mogą pomóc. Jekyll ma podobne zasoby, ale na mniejszą skalę.

Jekyll to świetne narzędzie dla stron internetowych w dużej mierze informacyjnych, takich jak ten projekt. Jeśli projekt jest bardziej aplikacją, moglibyśmy dodawać elementy dynamiczne za pomocą JavaScript, ale w pewnym momencie prawdopodobnie będziemy potrzebowali back-endu, takiego jak WordPress”.

Realizacja

WordPress i Jekyll mają różne podejścia do tworzenia strony internetowej, ale mają wiele wspólnych funkcji. Zacznijmy budować naszą stronę Jekyll.

Instalowanie

Typowe środowisko programistyczne dla WordPressa wymaga instalacji Apache lub NGINX, PHP i MySQL. Następnie zainstalujemy WordPress i skonfigurujemy serwer WWW.

W przypadku Jekylla musimy upewnić się, że mamy zainstalowany Ruby (czasami jest to trudniejsze niż się wydaje). Następnie instalujemy klejnot Jekyll:

 gem install jekyll

Jeśli korzystasz z systemu macOS, najpierw upewnij się, że masz zainstalowany program Xcode Developer.

 xcode-select --install

Działanie

Prowadzenie witryny WordPress zazwyczaj polega na uruchomieniu bazy danych i serwera WWW.

W Jekyll przechodzimy do naszych plików witryny (w tym momencie jest to pusty katalog) w terminalu i uruchamiamy:

 jekyll serve

To uruchamia lokalny serwer sieciowy na porcie 4000 i odbudowuje witrynę po każdej zmianie pliku.

Strony

Czas stworzyć naszą pierwszą stronę. Zacznijmy od strony głównej. Strony są przeznaczone do samodzielnej treści bez powiązanej daty. WordPress przechowuje zawartość strony w bazie danych.

W Jekyll strony są plikami HTML. Zaczniemy od czystego HTML, a następnie dodamy funkcje Jekyll, gdy będą potrzebne. Oto index.html w obecnym stanie:

 <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>

Płyn

W WordPressie możemy napisać PHP do prawie wszystkiego. Jekyll ma inne podejście. Zamiast zapewniać pełny język programowania, używa języka szablonów o nazwie Liquid. (WordPress ma również języki szablonów, takie jak Timber.)

Stopka index.html zawiera informację o prawach autorskich z rokiem:

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

Jest mało prawdopodobne, że będziemy pamiętać o aktualizowaniu tego co roku, więc użyjmy Liquid do wyświetlenia bieżącego roku:

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

Budujemy statyczną witrynę internetową w Jekyll, więc ta data nie zmieni się, dopóki nie przebudujemy witryny. Gdybyśmy chcieli zmienić datę bez konieczności przebudowy strony, moglibyśmy użyć JavaScript.

Zawiera

Większość kodu HTML w index.html służy do konfigurowania ogólnego układu i nie zmienia się między stronami. To powtórzenie spowoduje dużo konserwacji, więc zmniejszmy to.

Dołączenia były jedną z pierwszych rzeczy, których nauczyłem się w PHP. Używając include, możemy umieścić treść nagłówka i stopki w różnych plikach, a następnie umieścić tę samą treść na wielu stronach.

Jekyll ma dokładnie tę samą funkcję. Dołączenia są przechowywane w folderze o nazwie _includes . Używamy Liquid, aby uwzględnić je w 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 %}

Układy

Obejmuje zmniejszenie niektórych powtórzeń, ale nadal mamy je na każdej stronie. WordPress rozwiązuje ten problem za pomocą plików szablonów, które oddzielają strukturę witryny od jej zawartości.

Odpowiednikiem Jekyll dla plików szablonów są układy. Układy to pliki HTML z symbolem zastępczym dla treści. Są one przechowywane w katalogu _layouts . _layouts/default.html , który będzie zawierał podstawowy układ HTML:

 <!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>

Następnie zastąp zawarte w index.html , określając układ. Układ określamy za pomocą frontu, który jest fragmentem YAML, który znajduje się między dwiema potrójnie przerywanymi liniami na górze pliku (więcej o tym wkrótce).

 --- 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>

Teraz możemy mieć ten sam układ na wszystkich naszych stronach.

Przednia sprawa

W WordPressie niestandardowe pola pozwalają nam ustawić metadane w poście. Możemy ich użyć do ustawienia tagów SEO lub do pokazywania i ukrywania sekcji strony dla konkretnego posta.

Ta koncepcja nazywana jest w Jekyll materią frontową. Wcześniej używaliśmy frontu do ustawienia układu index.html . Możemy teraz ustawić własne zmienne i uzyskać do nich dostęp za pomocą Liquid. To dodatkowo zmniejsza liczbę powtórzeń na naszej stronie internetowej.

Dodajmy wiele referencji do index.html . Moglibyśmy skopiować i wkleić kod HTML, ale po raz kolejny prowadzi to do zwiększonej konserwacji. Zamiast tego dodajmy referencje z przodu i przeprowadźmy iterację za pomocą 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>

Posty

WordPress przechowuje treść HTML, datę i inne metadane postów w bazie danych.

W Jekyll każdy post jest statycznym plikiem przechowywanym w katalogu _posts . Nazwa pliku zawiera datę publikacji i tytuł posta — na przykład _posts/2016-11-11-real-estate-flipping.md . Kod źródłowy posta na blogu ma następującą strukturę:

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

Możemy również użyć frontu do ustawienia kategorii i tagów.

Pod przednią materią znajduje się treść postu, napisana w Markdown. Markdown to prostsza alternatywa dla HTML.

Jekyll pozwala nam tworzyć układy, które dziedziczą z innych układów. Być może zauważyłeś, że ten post ma układ post . Układ post dziedziczy z domyślnego układu i dodaje datę oraz tytuł:

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

blog.html , aby przeglądać posty i tworzyć do nich linki:

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

Kolekcje

W WordPressie niestandardowe typy postów są przydatne do zarządzania grupami treści. Na przykład możesz użyć niestandardowych typów postów dla referencji, produktów lub wykazów nieruchomości.

Jekyll ma tę funkcję i nazywa ją kolekcjami.

Strona about.html pokazuje profile członków personelu. Moglibyśmy zdefiniować metadane dla personelu (imię i nazwisko, zdjęcie, numer telefonu, biografię) na początku sprawy, ale wtedy mogliśmy odnieść się do nich tylko na tej stronie. W przyszłości te same dane chcemy wykorzystywać do wyświetlania informacji o autorach w postach na blogu. Kolekcja umożliwia nam odwoływanie się do członków personelu w dowolnym miejscu na stronie internetowej.

Konfiguracja naszej strony znajduje się w _config.yml . Tutaj ustawiamy nową kolekcję:

 collections: staff_members: output: false

Teraz dodajemy naszych pracowników. Każdy członek personelu jest reprezentowany w pliku Markdown przechowywanym w folderze z nazwą kolekcji; na przykład _staff_members/jane-doe.md .

Dodajemy metadane w materii frontowej i notkę w body:

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

Podobnie jak w przypadku postów, możemy iterować po kolekcji w about.html , aby wyświetlić każdego członka personelu:

 --- 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>

Szukaj

WordPress ma potężne wbudowane wyszukiwanie i jeszcze potężniejsze wtyczki wyszukiwania.

Jekyll nie ma wbudowanej wyszukiwarki, ale istnieją rozwiązania:

• wyszukiwanie po stronie klienta za pomocą biblioteki JavaScript, takiej jak Lunr.js (Jekyll.tips zawiera samouczek, jak to skonfigurować);
• rozwiązania innych firm, takie jak Algolia do wyszukiwania o wysokiej wydajności;
• rozwiązania typu drop-in, takie jak wyszukiwarka niestandardowa Google.

Wtyczki

Wtyczki są atrakcyjną częścią WordPressa. Łatwo jest załadować funkcjonalność, aby WordPress zrobił prawie wszystko.

Na naszej stronie Jekyll wiele popularnych wtyczek WordPress nie jest potrzebnych:

• Bezpieczeństwo iThemes
  Nasza witryna Jekyll jest tak samo bezpieczna, jak serwer sieciowy, na którym działa.
• Ochrona zapasowa
  Nasza strona Jekyll będzie żyć w repozytorium, które da nam dostęp do całej historii zmian.
• WP Super Cache
  Nasza strona Jekyll jest już statyczna.

Inne wtyczki do WordPressa mają odpowiedniki firm trzecich, które możemy wrzucić na stronę:

• Wtyczki formularzy kontaktowych, takie jak Contact Form 7, można zastąpić Formspree, FormKeep lub Wufoo.
• W przypadku prostego sklepu WP eCommerce można zastąpić Snipcart, Gumroad lub Stripe.
• Zamiast komentarzy WordPress z Akismet, możesz użyć Disqus, Facebook Comments lub IntenseDebate.

Niektóre wtyczki WordPress mogą być emulowane z rdzeniem Jekyll. Oto galeria zdjęć wykorzystująca front Matter i Liquid:

 --- 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>

Wystarczy dodać własny JavaScript i CSS, aby go ukończyć.

Wtyczki Jekyll mogą emulować funkcjonalność innych wtyczek WordPress. Pamiętaj, że wtyczki Jekyll działają tylko podczas generowania strony — nie dodają funkcjonalności w czasie rzeczywistym:

• Zamiast mapy witryny One Click XML użyj wtyczki Jekyll Sitemap Generator.
• Jekyll SEO Tag udostępnia niektóre z funkcji Kreatora SEO.
• Zamiast WPGlobus dla wielojęzycznej strony internetowej, użyj wtyczki językowej Jekyll.

Kontrola wersji

Jedną z głównych zalet korzystania ze statycznego generatora witryn, takiego jak Jekyll, jest to, że cała witryna i zawartość mogą znajdować się w Git. Na podstawowym poziomie Git udostępnia historię wszystkich zmian na stronie. Dla zespołów otwiera wszelkiego rodzaju przepływy pracy i procesy zatwierdzania.

GitHub ma fantastyczny interaktywny samouczek dla początkujących, którzy uczą się Git.

Przekazanie klienta

To obejmuje wszystkie kwestie związane z tworzeniem strony internetowej. Jeśli chcesz zobaczyć, jak cała witryna Jekyll pasuje do siebie, spójrz na szablon Sprawiedliwości. Jest to darmowy szablon na licencji MIT dla Jekyll. Powyższe fragmenty są oparte na tym szablonie.

WordPress CMS jest wbudowany w platformę, więc musielibyśmy założyć konto dla klienta.

Dzięki naszej witrynie Jekyll połączylibyśmy nasze repozytorium Git z jednym ze wspomnianych wcześniej interfejsów graficznych Jekyll. Jedną z fajnych rzeczy w tym przepływie pracy jest to, że zmiany klientów są zatwierdzane z powrotem do repozytorium. Jako programiści możemy nadal korzystać z lokalnych przepływów pracy, nawet jeśli nie-programiści aktualizują witrynę.

Niektóre GUI Jekyll oferują hosting, podczas gdy inne mają sposób na wyjście do wiadra Amazon S3 lub do stron GitHub.

Streszczenie

W tym momencie nasza strona Jekyll jest aktywna i edytowalna przez klienta. Jeśli potrzebujemy dokonać jakichkolwiek zmian na stronie, po prostu wysyłamy do repozytorium, a ono automatycznie wdroży się na żywo.

<div class=“testimonials”> {% dla referencji w page.testimonials %} <blockquote class=“testimonial”> <p class=“testimonial-message”>{{ testimonial.message }}</p> <p class =„opis-autor”> <img src=„{{ testimonial.image }}” alt=„Zdjęcie {{ testimonial.name }}”> {{ testimonial.name }} </p> </blockquote> { % endfor %} </div>

Posty

WordPress przechowuje treść HTML, datę i inne metadane postów w bazie danych.

W Jekyll każdy post jest statycznym plikiem przechowywanym w katalogu _posts . Nazwa pliku zawiera datę publikacji i tytuł posta — na przykład _posts/2016-11-11-real-estate-flipping.md . Kod źródłowy posta na blogu ma następującą strukturę:

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

Możemy również użyć frontu do ustawienia kategorii i tagów.

Pod przednią materią znajduje się treść postu, napisana w Markdown. Markdown to prostsza alternatywa dla HTML.

Jekyll pozwala nam tworzyć układy, które dziedziczą z innych układów. Być może zauważyłeś, że ten post ma układ post . Układ post dziedziczy z domyślnego układu i dodaje datę oraz tytuł:

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

blog.html , aby przeglądać posty i tworzyć do nich linki:

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

Kolekcje

W WordPressie niestandardowe typy postów są przydatne do zarządzania grupami treści. Na przykład możesz użyć niestandardowych typów postów dla referencji, produktów lub wykazów nieruchomości.

Jekyll ma tę funkcję i nazywa ją kolekcjami.

Strona about.html pokazuje profile członków personelu. Moglibyśmy zdefiniować metadane dla personelu (imię i nazwisko, zdjęcie, numer telefonu, biografię) na początku sprawy, ale wtedy mogliśmy odnieść się do nich tylko na tej stronie. W przyszłości te same dane chcemy wykorzystywać do wyświetlania informacji o autorach w postach na blogu. Kolekcja umożliwia nam odwoływanie się do członków personelu w dowolnym miejscu na stronie internetowej.

Konfiguracja naszej strony znajduje się w _config.yml . Tutaj ustawiamy nową kolekcję:

 collections: staff_members: output: false

Teraz dodajemy naszych pracowników. Każdy członek personelu jest reprezentowany w pliku Markdown przechowywanym w folderze z nazwą kolekcji; na przykład _staff_members/jane-doe.md .

Dodajemy metadane w materii frontowej i notkę w body:

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

Podobnie jak w przypadku postów, możemy iterować po kolekcji w about.html , aby wyświetlić każdego członka personelu:

 --- 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>

Szukaj

WordPress ma potężne wbudowane wyszukiwanie i jeszcze potężniejsze wtyczki wyszukiwania.

Jekyll nie ma wbudowanej wyszukiwarki, ale istnieją rozwiązania:

• wyszukiwanie po stronie klienta za pomocą biblioteki JavaScript, takiej jak Lunr.js (Jekyll.tips zawiera samouczek, jak to skonfigurować);
• rozwiązania innych firm, takie jak Algolia do wyszukiwania o wysokiej wydajności;
• rozwiązania typu drop-in, takie jak wyszukiwarka niestandardowa Google.

Wtyczki

Wtyczki są atrakcyjną częścią WordPressa. Łatwo jest załadować funkcjonalność, aby WordPress zrobił prawie wszystko.

Na naszej stronie Jekyll wiele popularnych wtyczek WordPress nie jest potrzebnych:

• Bezpieczeństwo iThemes
  Nasza witryna Jekyll jest tak samo bezpieczna, jak serwer sieciowy, na którym działa.
• Ochrona zapasowa
  Nasza strona Jekyll będzie żyć w repozytorium, które da nam dostęp do całej historii zmian.
• WP Super Cache
  Nasza strona Jekyll jest już statyczna.

Inne wtyczki do WordPressa mają odpowiedniki firm trzecich, które możemy wrzucić na stronę:

• Wtyczki formularzy kontaktowych, takie jak Contact Form 7, można zastąpić Formspree, FormKeep lub Wufoo.
• W przypadku prostego sklepu WP eCommerce można zastąpić Snipcart, Gumroad lub Stripe.
• Zamiast komentarzy WordPress z Akismet, możesz użyć Disqus, Facebook Comments lub IntenseDebate.

Niektóre wtyczki WordPress mogą być emulowane z rdzeniem Jekyll. Oto galeria zdjęć wykorzystująca front Matter i Liquid:

 --- 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>

Wystarczy dodać własny JavaScript i CSS, aby go ukończyć.

Wtyczki Jekyll mogą emulować funkcjonalność innych wtyczek WordPress. Pamiętaj, że wtyczki Jekyll działają tylko podczas generowania strony — nie dodają funkcjonalności w czasie rzeczywistym:

• Zamiast mapy witryny One Click XML użyj wtyczki Jekyll Sitemap Generator.
• Jekyll SEO Tag udostępnia niektóre z funkcji Kreatora SEO.
• Zamiast WPGlobus dla wielojęzycznej strony internetowej, użyj wtyczki językowej Jekyll.

Kontrola wersji

Jedną z głównych zalet korzystania ze statycznego generatora witryn, takiego jak Jekyll, jest to, że cała witryna i zawartość mogą znajdować się w Git. Na podstawowym poziomie Git udostępnia historię wszystkich zmian na stronie. Dla zespołów otwiera wszelkiego rodzaju przepływy pracy i procesy zatwierdzania.

GitHub ma fantastyczny interaktywny samouczek dla początkujących, którzy uczą się Git.

Przekazanie klienta

To obejmuje wszystkie kwestie związane z tworzeniem strony internetowej. Jeśli chcesz zobaczyć, jak cała witryna Jekyll pasuje do siebie, spójrz na szablon Sprawiedliwości. Jest to darmowy szablon na licencji MIT dla Jekyll. Powyższe fragmenty są oparte na tym szablonie.

WordPress CMS jest wbudowany w platformę, więc musielibyśmy założyć konto dla klienta.

Dzięki naszej witrynie Jekyll połączylibyśmy nasze repozytorium Git z jednym ze wspomnianych wcześniej interfejsów graficznych Jekyll. Jedną z fajnych rzeczy w tym przepływie pracy jest to, że zmiany klientów są zatwierdzane z powrotem do repozytorium. Jako programiści możemy nadal korzystać z lokalnych przepływów pracy, nawet jeśli nie-programiści aktualizują witrynę.

Niektóre GUI Jekyll oferują hosting, podczas gdy inne mają sposób na wyjście do wiadra Amazon S3 lub do stron GitHub.

Streszczenie

W tym momencie nasza strona Jekyll jest aktywna i edytowalna przez klienta. Jeśli potrzebujemy dokonać jakichkolwiek zmian na stronie, po prostu wysyłamy do repozytorium, a ono automatycznie wdroży się na żywo.

Twoja pierwsza strona Jekyll

Teraz twoja kolej. Dostępnych jest wiele zasobów, które pomogą Ci zbudować pierwszą witrynę Jekyll:

• Oficjalna strona internetowa Jekyll to świetne miejsce na rozpoczęcie od szczegółowej dokumentacji dotyczącej wszystkich funkcji Jekylla.
• Jekyll.tips ma serię samouczków wideo obejmujących podstawowe tematy Jekyll.
• Spójrz na szablony Jekyll na GitHub, aby zobaczyć, jak są zestawione: Frisco dla witryn marketingowych, Scholar dla dokumentacji i Urban dla agencji cyfrowych.

Jeśli przeprowadzasz migrację, Jekyll ma narzędzia do importowania postów z witryn WordPress i WordPress.com. Po zaimportowaniu musisz ręcznie przenieść lub utworzyć układy, strony, CSS, JavaScript i inne zasoby witryny.

Zawijanie

Piękno Jekyll tkwi w jego prostocie. Chociaż WordPress może dopasować wiele funkcji Jekyll, często wiąże się to z kosztem złożoności dzięki dodatkowym wtyczkom lub infrastrukturze.

Ostatecznie chodzi o znalezienie narzędzia, które będzie dla Ciebie najlepsze. Uważam, że Jekyll jest szybkim i wydajnym sposobem tworzenia stron internetowych. Zachęcam do wypróbowania i zamieszczania swoich doświadczeń w komentarzach.