Jekyll für WordPress-Entwickler

In diesem Artikel übernehmen wir die Rolle eines Webentwicklers, der eine Website für eine fiktive Anwaltskanzlei erstellt. WordPress ist eine offensichtliche Wahl für eine Website wie diese, aber ist es das einzige Tool, das wir in Betracht ziehen sollten? Sehen wir uns mit Jekyll eine ganz andere Art des Erstellens einer Website an.

Weiterführende Literatur zu SmashingMag:

• Erstellen Sie einen Blog mit Jekyll- und GitHub-Seiten
• Inhaltsmodellierung mit Jekyll
• Überprüfte Static-Site-Generatoren: Jekyll, Middleman, Roots, Hugo
• Warum Static Site Generators das nächste große Ding sind
  

Was ist Jekyll?

Jekyll ist ein statischer Website-Generator. Anstatt dass Software und eine Datenbank auf unserem Server installiert werden, ist eine Jekyll-Website einfach ein Verzeichnis von Dateien auf unserem Computer. Wenn wir Jekyll auf diesem Verzeichnis ausführen, generiert es eine statische Website, die wir zu einem Hosting-Provider hochladen.

Warum Jekyll?

Wir müssen eine Reihe von Kompromissen berücksichtigen, wenn wir entscheiden, ob Jekyll für ein Projekt geeignet ist.

Vorteile von Jekyll

• Weniger Komplexität
  Eine Jekyll-Website ist im Wesentlichen eine statische Website mit einer Vorlagensprache. Es müssen weniger Komponenten erstellt und gewartet werden. Auf dem Server benötigen wir nur einen Webserver, der Dateien bereitstellen kann.
• Geschwindigkeit
  Wenn Besucher Seiten auf Jekyll-Sites anzeigen, gibt der Server vorhandene Dateien ohne zusätzliche Verarbeitung zurück . Dies ist viel schneller als WordPress, das Seiten dynamisch zum Zeitpunkt der Anfrage generiert. Hinweis: WordPress-Caching-Plugins können diese Leistungslücke beseitigen.
• Stabilität
  WordPress hat mehr Komponenten, die zusammenarbeiten, um Seiten für Besucher zu generieren. Wenn eine Komponente ausfällt, können Besucher die Website möglicherweise nicht anzeigen. Es kann viel weniger schief gehen, wenn ein Webserver nur Dateien bereitstellt.
• Sicherheit
  Wordpress unternimmt viel, um Sicherheitsrisiken wie CSRF-, XSS- oder SQL-Injection-Angriffe zu mindern, ist jedoch darauf angewiesen, dass Sie immer über die neuesten Updates verfügen. Statische Websites beseitigen dieses Problem, da es keine dynamische Datenspeicherung gibt, die ein Hacker ausnutzen könnte.
• Quellengesteuert
  Eine Jekyll-Website ist ein Dateiverzeichnis, sodass wir die gesamte Website in einem Git-Repository speichern können. Die Arbeit mit einem Repository bietet uns viele Vorteile (obwohl sich VersionPress in der Entwicklung befindet und diesen Workflow für WordPress ermöglicht).

Nachteile von Jekyll

• Keine GUI
  Ein Kunde kann sich bei WordPress.com anmelden, ein Design auswählen und selbst eine einfache Website einrichten. Jekyll ist ein Befehlszeilentool, das die meisten nicht-technischen Benutzer überfordert. Es gibt GUIs von Drittanbietern für Jekyll, darunter CloudCannon (Haftungsausschluss: Ich bin der Mitbegründer), Forestry, Jekyll Admin, Netlify CMS, Prose und Siteleaf. Diese müssen jedoch vom Entwickler eingerichtet werden, bevor sie an den Client übergeben werden.
• Bauzeit
  In unserer Situation ist dies kein Problem, da die Website in weniger als einer Sekunde aufgebaut wird. Der Aufbau einer größeren Website mit 10.000 bis 100.000 Posts kann jedoch Minuten dauern. Das ist frustrierend, wenn wir entwickeln, weil wir warten müssen, bis die Website erstellt ist, bevor wir sie im Browser in der Vorschau anzeigen können.
• Themen
  Jekyll hat einige Themen zur Verfügung, aber es ist nichts im Vergleich zu den Tausenden von Themen, die für WordPress verfügbar sind.
• Erweiterbarkeit
  Wenn wir unserer WordPress-Website benutzerdefinierte Funktionen hinzufügen müssen, können wir unser eigenes PHP schreiben. Wir können benutzerdefinierte Ruby-Plug-ins für Jekyll erstellen, diese werden jedoch zur Erstellungszeit und nicht zur Anforderungszeit ausgeführt.
• Unterstützung
  WordPress verfügt über eine riesige Community von Experten und anderen Ressourcen, die Ihnen helfen können. Jekyll verfügt über ähnliche Ressourcen, jedoch in kleinerem Maßstab.

Jekyll ist ein großartiges Tool für weitgehend informative Websites, wie dieses Projekt. Wenn das Projekt eher eine Anwendung ist, könnten wir dynamische Elemente mit JavaScript hinzufügen, aber irgendwann bräuchten wir wahrscheinlich ein Backend wie WordPress.

Implementierung

WordPress und Jekyll verfolgen unterschiedliche Ansätze zum Erstellen einer Website, teilen sich jedoch viele Funktionen. Beginnen wir mit dem Aufbau unserer Jekyll-Website.

Installieren

Eine typische Entwicklungsumgebung für WordPress erfordert die Installation von Apache oder NGINX, PHP und MySQL. Dann würden wir WordPress installieren und den Webserver konfigurieren.

Für Jekyll müssen wir sicherstellen, dass Ruby installiert ist (manchmal ist das schwieriger als es klingt). Dann installieren wir das Jekyll-Juwel:

 gem install jekyll

Wenn Sie unter macOS arbeiten, stellen Sie sicher, dass Sie zuerst Xcode Developer installiert haben.

 xcode-select --install

Laufen

Das Betreiben einer WordPress-Site besteht normalerweise aus dem Starten der Datenbank und des Webservers.

In Jekyll navigieren wir zu unseren Site-Dateien (zu diesem Zeitpunkt ein leeres Verzeichnis) im Terminal und führen Folgendes aus:

 jekyll serve

Dadurch wird ein lokaler Webserver auf Port 4000 gestartet und die Site neu erstellt, wenn sich eine Datei ändert.

Seiten

Es ist Zeit, unsere erste Seite zu erstellen. Beginnen wir mit der Startseite. Seiten sind für eigenständige Inhalte ohne zugehöriges Datum. WordPress speichert Seiteninhalte in der Datenbank.

In Jekyll sind Seiten HTML-Dateien. Wir beginnen mit reinem HTML und fügen dann je nach Bedarf Jekyll-Funktionen hinzu. Hier ist index.html in seinem aktuellen Zustand:

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

Flüssigkeit

In WordPress können wir PHP schreiben, um fast alles zu tun. Jekyll verfolgt einen anderen Ansatz. Anstatt eine vollständige Programmiersprache bereitzustellen, verwendet es eine Vorlagensprache namens Liquid. (WordPress hat auch Templating-Sprachen wie Timber.)

Die Fußzeile von index.html enthält einen Copyright-Hinweis mit einer Jahreszahl:

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

Es ist unwahrscheinlich, dass wir daran denken, dies jedes Jahr zu aktualisieren, also verwenden wir Liquid, um das aktuelle Jahr auszugeben:

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

Wir erstellen eine statische Website in Jekyll, daher ändert sich dieses Datum nicht, bis wir die Website neu erstellen. Wenn wir wollten, dass sich das Datum ändert, ohne die Website neu erstellen zu müssen, könnten wir JavaScript verwenden.

Beinhaltet

Der Großteil des HTML in index.html dient zum Einrichten des Gesamtlayouts und ändert sich nicht zwischen den Seiten. Diese Wiederholung wird zu einer Menge Wartung führen, also reduzieren wir sie.

Includes waren eines der ersten Dinge, die ich in PHP gelernt habe. Mithilfe von Includes können wir den Kopf- und Fußzeileninhalt in verschiedene Dateien einfügen und dann denselben Inhalt auf mehreren Seiten einfügen.

Jekyll hat genau die gleiche Funktion. Includes werden in einem Ordner namens _includes gespeichert. Wir verwenden Liquid, um sie in 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 %}

Grundrisse

Enthält einige der Wiederholungen, aber wir haben sie immer noch auf jeder Seite. WordPress löst dieses Problem mit Vorlagendateien, die die Struktur einer Website von ihrem Inhalt trennen.

Das Jekyll-Äquivalent zu Vorlagendateien sind Layouts. Layouts sind HTML-Dateien mit Platzhaltern für Inhalte. Sie werden im Verzeichnis _layouts gespeichert. Wir erstellen _layouts/default.html , um ein grundlegendes HTML-Layout zu enthalten:

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

Ersetzen Sie dann die Includes in index.html durch Angabe des Layouts. Wir spezifizieren das Layout mithilfe der Titelseite, einem YAML-Snippet, das sich zwischen zwei dreifach gestrichelten Linien oben in einer Datei befindet (mehr dazu in Kürze).

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

Jetzt können wir auf allen unseren Seiten das gleiche Layout haben.

Vordere Angelegenheit

In WordPress ermöglichen uns benutzerdefinierte Felder, Metadaten für einen Beitrag festzulegen. Wir können sie verwenden, um SEO-Tags zu setzen oder Teile einer Seite für einen bestimmten Beitrag ein- und auszublenden.

Dieses Konzept wird in Jekyll Front Matter genannt. Früher haben wir Titel verwendet, um das Layout für index.html . Wir können jetzt unsere eigenen Variablen setzen und mit Liquid darauf zugreifen. Dadurch werden Wiederholungen auf unserer Website weiter reduziert.

Lassen Sie uns mehrere Testimonials zu index.html hinzufügen. Wir könnten den HTML-Code kopieren und einfügen, aber das führt wiederum zu erhöhtem Wartungsaufwand. Lassen Sie uns stattdessen die Testimonials in der Titelsache hinzufügen und sie mit Liquid wiederholen:

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

Beiträge

WordPress speichert den HTML-Inhalt, das Datum und andere Metadaten für Beiträge in der Datenbank.

In Jekyll ist jeder Beitrag eine statische Datei, die in einem _posts Verzeichnis gespeichert ist. Der Dateiname enthält das Veröffentlichungsdatum und den Titel des Beitrags – zum Beispiel _posts/2016-11-11-real-estate-flipping.md . Der Quellcode für einen Blogbeitrag hat diese Struktur:

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

Wir können Titel auch verwenden, um Kategorien und Tags festzulegen.

Unter der Titelseite befindet sich der Hauptteil des Beitrags, geschrieben in Markdown. Markdown ist eine einfachere Alternative zu HTML.

Mit Jekyll können wir Layouts erstellen, die von anderen Layouts erben. Sie haben vielleicht bemerkt, dass dieser Beitrag ein Layout von post hat. Das post erbt vom Standardlayout und fügt ein Datum und einen Titel hinzu:

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

Lassen Sie uns blog.html erstellen, um die Posts zu durchlaufen und auf sie zu verlinken:

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

Sammlungen

In WordPress sind benutzerdefinierte Beitragstypen nützlich, um Inhaltsgruppen zu verwalten. Beispielsweise können Sie benutzerdefinierte Beitragstypen für Testimonials, Produkte oder Immobilienangebote verwenden.

Jekyll hat diese Funktion und nennt sie Sammlungen.

Die Seite about.html zeigt Profile von Mitarbeitern. Wir könnten die Metadaten für die Mitarbeiter (Name, Bild, Telefonnummer, Bio) in der Titelei definieren, aber dann könnten wir nur auf dieser Seite darauf verweisen. In Zukunft wollen wir dieselben Daten verwenden, um Informationen über Autoren in Blogbeiträgen anzuzeigen. Eine Sammlung ermöglicht es uns, überall auf der Website auf Mitarbeiter zu verweisen.

Die Konfiguration unserer Website befindet sich in _config.yml . Hier legen wir eine neue Kollektion fest:

 collections: staff_members: output: false

Jetzt fügen wir unsere Mitarbeiter hinzu. Jeder Mitarbeiter wird in einer Markdown-Datei dargestellt, die in einem Ordner mit dem Sammlungsnamen gespeichert ist; zum Beispiel _staff_members/jane-doe.md .

Wir fügen die Metadaten in der Titelei und den Klappentext im Textkörper hinzu:

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

Ähnlich wie bei Posts können wir die Sammlung in about.html , um jeden Mitarbeiter anzuzeigen:

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

Suche

WordPress verfügt über eine leistungsstarke integrierte Suche und noch leistungsfähigere Such-Plugins.

Jekyll hat keine Suche eingebaut, aber es gibt Lösungen:

• clientseitige Suche mit einer JavaScript-Bibliothek wie Lunr.js (Jekyll.tips hat ein Tutorial, wie man dies einrichtet);
• Lösungen von Drittanbietern wie Algolia für die Hochleistungssuche;
• Drop-in-Lösungen wie Google Custom Search.

Plugins

Plugins sind ein attraktiver Teil von WordPress. Es ist einfach, Funktionen zu laden, um WordPress dazu zu bringen, fast alles zu tun.

Auf unserer Jekyll-Website sind viele beliebte WordPress-Plugins nicht erforderlich:

• iThemes-Sicherheit
  Unsere Jekyll-Website ist so sicher wie der Webserver, auf dem sie läuft.
• Backup-Wache
  Unsere Jekyll-Website wird in einem Repository leben, das uns Zugriff auf den gesamten Änderungsverlauf gibt.
• WP-Super-Cache
  Unsere Jekyll-Website ist bereits statisch.

Andere WordPress-Plugins haben Entsprechungen von Drittanbietern, die wir in die Website einfügen können:

• Kontaktformular-Plugins wie Contact Form 7 können durch Formspree, FormKeep oder Wufoo ersetzt werden.
• Für einen einfachen Shop kann WP eCommerce durch Snipcart, Gumroad oder Stripe ersetzt werden.
• Anstelle von WordPress-Kommentaren mit Akismet könnten Sie Disqus, Facebook Comments oder IntenseDebate verwenden.

Einige WordPress-Plugins können mit Core Jekyll emuliert werden. Hier ist eine Fotogalerie mit Front Matter und 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>

Wir müssen nur unser eigenes JavaScript und CSS hinzufügen, um es zu vervollständigen.

Jekyll-Plugins können die Funktionalität anderer WordPress-Plugins emulieren. Denken Sie daran, dass Jekyll-Plugins nur ausgeführt werden, während die Website generiert wird – sie fügen keine Echtzeitfunktionalität hinzu:

• Verwenden Sie anstelle der One-Click-XML-Sitemap das Jekyll-Sitemap-Generator-Plugin.
• Jekyll SEO Tag bietet Ihnen einige der Funktionen des SEO-Assistenten.
• Verwenden Sie anstelle von WPGlobus für eine mehrsprachige Website das Jekyll Language Plugin.

Versionskontrolle

Einer der Hauptvorteile der Verwendung eines statischen Site-Generators wie Jekyll besteht darin, dass die gesamte Site und der gesamte Inhalt in Git gespeichert werden können. Auf einer grundlegenden Ebene gibt Ihnen Git einen Verlauf aller Änderungen auf der Website. Für Teams eröffnet es alle möglichen Workflows und Genehmigungsprozesse.

GitHub hat ein fantastisches interaktives Tutorial für Anfänger, die Git lernen.

Kundenübergabe

Das deckt die Grundlagen der Erstellung der Website ab. Wenn Sie neugierig sind, wie eine ganze Jekyll-Website zusammenpasst, werfen Sie einen Blick auf die Justice-Vorlage. Es ist eine kostenlose MIT-lizenzierte Vorlage für Jekyll. Die obigen Snippets basieren auf dieser Vorlage.

Das WordPress-CMS ist in die Plattform integriert, daher müssten wir ein Konto für den Kunden einrichten.

Bei unserer Jekyll-Website würden wir unser Git-Repository mit einer der zuvor erwähnten Jekyll-GUIs verknüpfen. Eines der netten Dinge an diesem Workflow ist, dass Client-Änderungen zurück in das Repository geschrieben werden. Als Entwickler können wir weiterhin lokale Workflows verwenden, auch wenn Nicht-Entwickler die Website aktualisieren.

Einige Jekyll-GUIs bieten Hosting an, während andere eine Möglichkeit bieten, an einen Amazon S3-Bucket oder an GitHub-Seiten auszugeben.

Zusammenfassung

Zu diesem Zeitpunkt ist unsere Jekyll-Website live und kann vom Kunden bearbeitet werden. Wenn wir Änderungen an der Website vornehmen müssen, pushen wir sie einfach in das Repository und es wird automatisch live bereitgestellt.

<div class=“testimonials“> {% für testimonial in page.testimonials %} <blockquote class=“testimonial“> <p class=“testimonial-message“>{{ testimonial.message }}</p> <p class ="testimonial-author"> <img src="{{ testimonial.image }}" alt="Foto von {{ testimonial.name }}"> {{ testimonial.name }} </p> </blockquote> { % endfor %} </div>

Beiträge

WordPress speichert den HTML-Inhalt, das Datum und andere Metadaten für Beiträge in der Datenbank.

In Jekyll ist jeder Beitrag eine statische Datei, die in einem _posts Verzeichnis gespeichert ist. Der Dateiname enthält das Veröffentlichungsdatum und den Titel des Beitrags – zum Beispiel _posts/2016-11-11-real-estate-flipping.md . Der Quellcode für einen Blogbeitrag hat diese Struktur:

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

Wir können Titel auch verwenden, um Kategorien und Tags festzulegen.

Unter der Titelseite befindet sich der Hauptteil des Beitrags, geschrieben in Markdown. Markdown ist eine einfachere Alternative zu HTML.

Mit Jekyll können wir Layouts erstellen, die von anderen Layouts erben. Sie haben vielleicht bemerkt, dass dieser Beitrag ein Layout von post hat. Das post erbt vom Standardlayout und fügt ein Datum und einen Titel hinzu:

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

Lassen Sie uns blog.html erstellen, um die Posts zu durchlaufen und auf sie zu verlinken:

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

Sammlungen

In WordPress sind benutzerdefinierte Beitragstypen nützlich, um Inhaltsgruppen zu verwalten. Beispielsweise können Sie benutzerdefinierte Beitragstypen für Testimonials, Produkte oder Immobilienangebote verwenden.

Jekyll hat diese Funktion und nennt sie Sammlungen.

Die Seite about.html zeigt Profile von Mitarbeitern. Wir könnten die Metadaten für die Mitarbeiter (Name, Bild, Telefonnummer, Bio) in der Titelei definieren, aber dann könnten wir nur auf dieser Seite darauf verweisen. In Zukunft wollen wir dieselben Daten verwenden, um Informationen über Autoren in Blogbeiträgen anzuzeigen. Eine Sammlung ermöglicht es uns, überall auf der Website auf Mitarbeiter zu verweisen.

Die Konfiguration unserer Website befindet sich in _config.yml . Hier legen wir eine neue Kollektion fest:

 collections: staff_members: output: false

Jetzt fügen wir unsere Mitarbeiter hinzu. Jeder Mitarbeiter wird in einer Markdown-Datei dargestellt, die in einem Ordner mit dem Sammlungsnamen gespeichert ist; zum Beispiel _staff_members/jane-doe.md .

Wir fügen die Metadaten in der Titelei und den Klappentext im Textkörper hinzu:

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

Ähnlich wie bei Posts können wir die Sammlung in about.html , um jeden Mitarbeiter anzuzeigen:

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

Suche

WordPress verfügt über eine leistungsstarke integrierte Suche und noch leistungsfähigere Such-Plugins.

Jekyll hat keine Suche eingebaut, aber es gibt Lösungen:

• clientseitige Suche mit einer JavaScript-Bibliothek wie Lunr.js (Jekyll.tips hat ein Tutorial, wie man dies einrichtet);
• Lösungen von Drittanbietern wie Algolia für die Hochleistungssuche;
• Drop-in-Lösungen wie Google Custom Search.

Plugins

Plugins sind ein attraktiver Teil von WordPress. Es ist einfach, Funktionen zu laden, um WordPress dazu zu bringen, fast alles zu tun.

Auf unserer Jekyll-Website sind viele beliebte WordPress-Plugins nicht erforderlich:

• iThemes-Sicherheit
  Unsere Jekyll-Website ist so sicher wie der Webserver, auf dem sie läuft.
• Backup-Wache
  Unsere Jekyll-Website wird in einem Repository leben, das uns Zugriff auf den gesamten Änderungsverlauf gibt.
• WP-Super-Cache
  Unsere Jekyll-Website ist bereits statisch.

Andere WordPress-Plugins haben Entsprechungen von Drittanbietern, die wir in die Website einfügen können:

• Kontaktformular-Plugins wie Contact Form 7 können durch Formspree, FormKeep oder Wufoo ersetzt werden.
• Für einen einfachen Shop kann WP eCommerce durch Snipcart, Gumroad oder Stripe ersetzt werden.
• Anstelle von WordPress-Kommentaren mit Akismet könnten Sie Disqus, Facebook Comments oder IntenseDebate verwenden.

Einige WordPress-Plugins können mit Core Jekyll emuliert werden. Hier ist eine Fotogalerie mit Front Matter und 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>

Wir müssen nur unser eigenes JavaScript und CSS hinzufügen, um es zu vervollständigen.

Jekyll-Plugins können die Funktionalität anderer WordPress-Plugins emulieren. Denken Sie daran, dass Jekyll-Plugins nur ausgeführt werden, während die Website generiert wird – sie fügen keine Echtzeitfunktionalität hinzu:

• Verwenden Sie anstelle der One-Click-XML-Sitemap das Jekyll-Sitemap-Generator-Plugin.
• Jekyll SEO Tag bietet Ihnen einige der Funktionen des SEO-Assistenten.
• Verwenden Sie anstelle von WPGlobus für eine mehrsprachige Website das Jekyll Language Plugin.

Versionskontrolle

Einer der Hauptvorteile der Verwendung eines statischen Site-Generators wie Jekyll besteht darin, dass die gesamte Site und der gesamte Inhalt in Git gespeichert werden können. Auf einer grundlegenden Ebene gibt Ihnen Git einen Verlauf aller Änderungen auf der Website. Für Teams eröffnet es alle möglichen Workflows und Genehmigungsprozesse.

GitHub hat ein fantastisches interaktives Tutorial für Anfänger, die Git lernen.

Kundenübergabe

Das deckt die Grundlagen der Erstellung der Website ab. Wenn Sie neugierig sind, wie eine ganze Jekyll-Website zusammenpasst, werfen Sie einen Blick auf die Justice-Vorlage. Es ist eine kostenlose MIT-lizenzierte Vorlage für Jekyll. Die obigen Snippets basieren auf dieser Vorlage.

Das WordPress-CMS ist in die Plattform integriert, daher müssten wir ein Konto für den Kunden einrichten.

Bei unserer Jekyll-Website würden wir unser Git-Repository mit einer der zuvor erwähnten Jekyll-GUIs verknüpfen. Eines der netten Dinge an diesem Workflow ist, dass Client-Änderungen zurück in das Repository geschrieben werden. Als Entwickler können wir weiterhin lokale Workflows verwenden, auch wenn Nicht-Entwickler die Website aktualisieren.

Einige Jekyll-GUIs bieten Hosting an, während andere eine Möglichkeit bieten, an einen Amazon S3-Bucket oder an GitHub-Seiten auszugeben.

Zusammenfassung

Zu diesem Zeitpunkt ist unsere Jekyll-Website live und kann vom Kunden bearbeitet werden. Wenn wir Änderungen an der Website vornehmen müssen, pushen wir sie einfach in das Repository und es wird automatisch live bereitgestellt.

Ihre erste Jekyll-Website

Jetzt sind Sie dran. Es stehen zahlreiche Ressourcen zur Verfügung, die Ihnen beim Erstellen Ihrer ersten Jekyll-Website helfen:

• Die offizielle Jekyll-Website ist ein großartiger Ort, um mit einer ausführlichen Dokumentation zu allen Funktionen von Jekyll zu beginnen.
• Jekyll.tips hat eine Video-Tutorial-Reihe, die Kernthemen von Jekyll abdeckt.
• Sehen Sie sich die Jekyll-Vorlagen auf GitHub an, um zu sehen, wie sie zusammengesetzt sind: Frisco für Marketing-Websites, Scholar für Dokumentation und Urban für digitale Agenturen.

Wenn Sie migrieren, verfügt Jekyll über Tools zum Importieren von Beiträgen von WordPress- und WordPress.com-Websites. Nach dem Import müssen Sie die Layouts, Seiten, CSS, JavaScript und andere Elemente für die Website manuell migrieren oder erstellen.

Einpacken

Die Schönheit von Jekyll liegt in seiner Einfachheit. Während WordPress mit vielen Funktionen von Jekyll mithalten kann, geht dies oft auf Kosten der Komplexität durch zusätzliche Plugins oder Infrastruktur.

Letztendlich geht es darum, das Tool zu finden, das für Sie am besten funktioniert. Ich habe festgestellt, dass Jekyll eine schnelle und effiziente Methode zum Erstellen von Websites ist. Ich ermutige Sie, es auszuprobieren und Ihre Erfahrungen in den Kommentaren zu posten.