Meine lange Reise zu einer entkoppelten WordPress Gatsby-Website

Als professioneller Biologe war mein Spielplatz früher wissenschaftliche Labore voller Mikroskope, Petrischalen und Biologiewerkzeuge. Neugier führt viele Wissenschaftler auf ihren Weg zu Entdeckungen. Meine führte mich zum Webdesign. Ich habe versucht, HTML auf meinem Labor-Desktop zu lernen, während ich Extraktionsproben zentrifugierte oder darauf wartete, dass meine Proben auftauten oder gefroren wurden. Diese Wartezeiten sind wertvoll für das Schreiben von Experimentnotizen und das Erlernen neuer Fähigkeiten. Für mich bedeutete das, grundlegendes HTML über Editoren wie HomeSite und später Dreamweaver zu lernen, sowie viele andere Online-Ressourcen.

Nachdem ich meinen Schreibtisch im Forschungslabor vor etwa einem Jahrzehnt verlassen hatte, fand ich einen neuen Spielplatz. Ein befreundeter lokaler Webentwickler hat mich mit WordPress bekannt gemacht. Das hat den Lauf meines Lebens verändert. Webdesign zu lernen ist keine Nebenbeschäftigung mehr – es ist zur Hauptbeschäftigung meines täglichen Lebens geworden.

Mein erster Schritt: Erlernen der Theme-Entwicklung

Ich nenne mich einen WordPress-Enthusiasten und einen begeisterten WordPress-Nutzer. Ich bin in die Welt von WordPress eingestiegen, indem ich Themes gehackt habe, mein virtueller Guru„Building Themes from Scratch Using Underscores“ von Morten Rand-Hendriksen. Beim Erlernen der Theme-Entwicklung muss ich dieses Tutorial unzählige Male angesehen haben und es wurde schnell zu meiner Anlaufstelle. Bei meinen Lernprojekten habe ich oft auf Mortens GitHub-Repository verwiesen, um von seinen Themes zu lernen. Für meine persönlichen Websites habe ich meine eigenen Themes verwendet, die von Morten inspiriert sind, wie z.B. Kuhn, Popper und andere.

Ich habe auch gelernt, wie man Plugins und Widgets für meine eigene Website erstellt, aber ich bin meistens beim Theming geblieben. Ich habe Themes für meine persönlichen Websites erstellt. Meine persönlichen Websites sind wie meine drei Ringordner: einer für jedes Themengebiet. Meine Websites schrecken Suchmaschinen ab und sind für die Archivierung meiner persönlichen Lernprozesse und Notizen konzipiert. Diese Gewohnheit, jeden Aspekt meiner Projekte zu schreiben und zu dokumentieren, wurde von „Just Write“ von Sara Soueidan inspiriert.

Ein Aufruf, JavaScript tiefgehend zu lernen

Alles begann mit dem Aufruf von Matt Mullenweg an WordPress-Entwickler, „JavaScript tiefgehend zu lernen“ während der State of the Word-Ansprache 2015 und der anschließenden Ankündigung des Gutenberg Block-Editors. Bis dahin war ich ein glücklicher WordPress-Nutzer und ein aufstrebender WordPress-Entwickler. Es wurde berichtet, dass JavaScript und API-gesteuerte Schnittstellen die Zukunft von WordPress sind. Wie andere WordPress-Enthusiasten erkannte ich ebenfalls, dass JavaScript eine unverzichtbare Fähigkeit für die WordPress-Entwicklung war.

Damit begann meine eigene Reise und Roadmap zum Erlernen von JavaScript. Ich nutzte den Artikel von Zell Liew „Learning JavaScript — where should you start and what to do when you’re stuck?“

Lassen Sie mich meine Lernreise mit Ihnen teilen.

Ich begann, mich mit React- und REST-API-basierten Themes zu beschäftigen

Seit der offiziellen Integration der REST-API in den WordPress-Kern tauchten einige React-basierte Themes auf.

Foxhound: Dieses Theme wurde von einem Automattic-Ingenieur Kelly Dwan entwickelt und ist im WordPress Theme-Verzeichnis mit über 30 aktiven Installationen gelistet. Sein GitHub-Repository wurde seit drei Jahren nicht mehr aktualisiert.
Picard: Dieses Theme wurde von Automattic als experimentelles Prototyp-WordPress-Theme entwickelt, das React und die neue WP-API nutzt. Sein GitHub-Repository wurde seit fünf Jahren nicht mehr aktualisiert und seine Nutzung ist unbekannt.
Celestial: Dieses Theme wurde in einem Artikel von Smashing Magazine, „How To Build A Skin For Your Web App With React And WordPress“ von Muhammad Mohsin, behandelt. Sein GitHub-Repository zeigt, dass es vor 13 Monaten zuletzt aktualisiert wurde, aber es gibt keine Informationen über seine Nutzung.

Meiner Meinung nach schienen diese Themes experimentell zu sein. Als das Foxhound-Theme veröffentlicht wurde, wurde es auf CSS-Tricks sowie auf WordPress Tavern behandelt. Ich habe es auf meine Testseite heruntergeladen und es funktionierte gut; allerdings konnte ich es aufgrund meiner begrenzten Vertrautheit mit JavaScript und React nicht hacken und daraus lernen.

Ich begann, mich mit React zu beschäftigen

Ich nutzte den Artikel von Robin Wieruch „JavaScript fundamentals before learning React“ als meine JavaScript/React-Lern-Roadmap. Während ich mit dem Erlernen und Verstehen von React-Routing kämpfte, entdeckte ich Gatsby, das @reach/router als integrierte Funktion nutzt und das Routing zum Kinderspiel macht. In meiner kurzen explorativen Recherche erfuhr ich, dass Gatsby in der Tat ein „React-basiertes Framework ist, das Entwicklern hilft, blitzschnelle Websites und Apps zu erstellen.“ Dies führte mich dazu, Gatsby zu lernen, während ich weiterhin Fortschritte bei React machte. Nach einiger Zeit vertiefte ich mich in meine Gatsby-Projekte und kehrte nur gelegentlich zum Erlernen von grundlegendem JavaScript und React zurück.

Ich habe Gatsby kennengelernt

Da ich bereits mehrere kleine Lernprojekte in React durchgeführt hatte, war das Verständnis von Gatsby natürlich. Gatsby soll sich an Entwickler und nicht an Benutzer richten. Ich fand es nicht so schwer, meine eigenen einfachen Gatsby-Testseiten zu lernen und zu betreiben.

Gatsbys Dokumentation und Tutorials sind gut geschrieben, hilfreich und leicht zu befolgen. Ich entschied mich, Gatsby anhand seiner Tutorials zu lernen und alle acht Teile als Mittel des „Learning by Doing“ abzuschließen. Während meiner Arbeit an meinen Projekten konsultierte ich andere Anleitungen und Tutorial-Beiträge. Die folgenden beiden Anleitungen halfen mir, Build-Konzepte zu verstehen, Funktionalität hinzuzufügen und eine vernünftige Gatsby Demo-Seite zusammenzustellen

Für das Styling von React-Komponenten gibt es mehrere Optionen, die auf CSS-Tricks behandelt werden. Einige Optionen sind lokale Inline- CSS-in-JS, Styled Components und modulares CSS. Gatsby-Komponenten können auch mit Sass unter Verwendung von gatsby-plugin-sass gestylt werden, was den Code lesbarer macht. Aufgrund seiner Vertrautheit und Code-Lesbarkeit entschied ich mich für das Styling mit Sass; ich erkenne jedoch auch den Wert von CSS-Modulen.

Ressourcen für die Integration von Gatsby und WordPress

Mein Gatsby-Lernen hörte dort nicht auf. Tatsächlich war Gatsby in letzter Zeit der bedeutendste Teil meiner Lernkurve. Hier ist alles, was ich auf meiner Lernreise gefunden habe und das Ihnen hoffentlich auf Ihrer eigenen Reise von Nutzen sein wird.

Es gibt viele Websites, die bereits auf Gatsby laufen. Diejenigen, die zu Gatsby migriert sind, scheinen glücklich zu sein, insbesondere mit der blitzschnellen Geschwindigkeit und der verbesserten Sicherheit, die es bietet.

Kommentare in Gatsby

WordPress unterstützt Kommentare seit sehr langer Zeit nativ. Gatsby-Websites sind serverlos und statisch, daher ist das Posten von Kommentaren ein Problem, da sie dynamisch sind und einen clientseitigen Dienst erfordern.

Einige Gatsby- und React-Entwickler scheinen Kommentare und Interaktionen auf ihren persönlichen Websites Twitter zu überlassen. Andere greifen zu Disqus. Wenn Sie interessiert sind, dieses Tutorial von Northstack beschreibt im Detail, wie WordPress-Kommentare nach Gatsby übertragen werden.

WordPress Gatsby Themes

Ich wurde erstmals auf das von WordPress portierte Tabor für Gatsby Theme von WordPress Tavern aufmerksam. Es wurde von Rich Tabor entwickelt und ist kostenlos auf GitHub verfügbar (Demo). Von dort aus wurden zwei von WordPress inspirierte Gatsby-Themes über das Gatsby Theme Jam-Projekt verfügbar. Eines war von Alexandra Spalato namens Gatsby Theme WordPress Starter (Demo) und das andere von Andrey Shalashov namens WordPress Source Theme (Demo).

Im Jahr 2019 kündigte ein Team von Gatsby- und WPGraphQL-Entwicklern unter der Leitung von Jason Bahl, Muhammad Muhsin, Alexandra Spalato und Zac Gordon ein Projekt an, das WordPress-Themes nach Gatsby portiert. Zac, der mit WordPress Tavern sprach, sagte, das Projekt würde sowohl kostenlose als auch kostenpflichtige Premium-Themes anbieten. Zum Zeitpunkt des Schreibens waren fünf Themes aufgelistet, ohne kostenlosen Download.

Entkoppelte Gatsby WordPress Starter

Die aktuelle Gatsby Starter-Bibliothek listet zehn WordPress-kompatible Starter-Themes auf, darunter ein neueres von Henrik Wirth, das das WordPress Twenty Twenty Theme – Stylesheets und Schriftarten – nach Gatsby portiert. Obwohl das Theme noch eine Baustelle mit einigen Einschränkungen ist (z. B. keine Unterstützung für Tags, monatliche Archive und Kommentare). Dennoch ist es ein großartiges Projekt und verwendet ein neues experimentelles Gatsby Source-Plugin für WordPress.

Ein weiterer beliebter Starter ist gatsby-starter-wordpress von Gatsby Central.

Gatsby WordPress Themes von GitHub

Es gibt weitere beliebte Gatsby-Themes, die auf GitHub verfügbar sind. Das Twenty Nineteen WordPress Gatsby Theme ist ein Port des Twenty Nineteen WordPress Theme von Zac Gordon und Muhammad Muhsin.

Experimentelle Plugins

Es gibt auch zwei neue GraphQL-Plugins für WordPress, die sich noch in der Entwicklung befinden und derzeit nur auf GitHub verfügbar sind. Eines ist Gatsby Source WordPress Experimental von Tyler Barnes. Dies ist eine neu geschriebene Version des aktuellen Gatsby Source WordPress-Plugins, das WPGraphQL für die Datenbeschaffung verwendet, sowie ein benutzerdefiniertes WPGatsby-Plugin, das das WPGraphQL-Schema auf Gatsby-spezifische Weise transformiert.

Das andere ist Gatsby WordPress Gutenberg, das noch von Peter Pristas entwickelt wird. Seine Dokumentation ist auf der GatsbyWPGutenberg Docs-Seite verfügbar.

Schritt-für-Schritt-Anleitungen

Trotz der laufenden Fortschritte bei der Entwicklung von Gatsby-WordPress-Themes konnte ich keine detaillierten How-to-Anleitungen für Anfänger wie mich finden. Mohammad Mohsin hat 2018 eine ausführliche Anleitung auf Smashing Magazine verfasst, in der er erklärt, wie er sein Celestial React Theme unter Verwendung der WordPress REST API entwickelt hat. Das andere Tutorial ist ein weiteres, das er über das Porting des Twenty Nineteen WordPress Themes nach Gatsby geschrieben hat, das WPGraphQL für die WordPress-Datenbeschaffung verwendet.

In jüngerer Zeit gab es zwei zusätzliche Anleitungen, von denen ich profitiert habe

Migrate Your WordPress Site to the Jamstack von Jason Longstorf. Dies ist ein sehr nützliches Tutorial, das auf Jasons Interview mit Zac Gordon in seinem Podcast Learn With Jason basiert. Eine kürzere 30-minütige Version der Episode ist auch auf egghead.io verfügbar.
Guide to Gatsby WordPress Starter Advanced with Previews, i18n and More von Henrik Wirth. Dies ist die detaillierteste Anleitung, die ich bisher gesehen habe, aufgeteilt in eine siebenteilige Serie über das Porting einer WordPress-Website nach Gatsby unter Verwendung von WPGraphQL. Sie ist für die meisten Anfänger geeignet.

Endlich meine eigene teilweise portierte Gatsby-Seite

Alles bisher Beschriebene hat mich dazu bewogen, meine eigene WordPress Gatsby-Website zu erstellen. Obwohl es eine große technische Aufgabe war, haben die von mir referenzierten Anleitungen sowie die experimentellen Plugins und die vorhandene Dokumentation für Gatsby es so viel einfacher gemacht, als wenn ich versucht hätte, es selbst herauszufinden.

Hier ist das Ergebnis. Obwohl es noch eine Baustelle ist, ist es großartig zu sehen, wie es funktioniert. Ich habe eine vollständige Schritt-für-Schritt-Anleitung geschrieben, wie ich es gemacht habe, die nächste Woche hier auf CSS-Tricks veröffentlicht wird. Bleiben Sie also dran!

Was bringt die Zukunft für Gatsby und WordPress?

Ich behalte die beiden experimentellen WordPress-Plugins, die ich zuvor erwähnt habe, weiterhin im Auge. Ich plane, das Projekt noch einmal zu überarbeiten, sobald diese offiziell veröffentlicht werden, hoffentlich im WordPress Plugin Directory. Dieser aktuelle Tweet-Thread hebt den aktuellen Status der Übertragung von Inhalten aus dem WordPress Block-Editor auf ein entkoppeltes WordPress Gatsby-Theme hervor.

Hat jemand den Block-Editor mit einer entkoppelten #WordPress-Einrichtung erfolgreich genutzt? Ich habe es nicht versucht, aber ich habe einige Gerüchte gehört, dass es nicht funktioniert oder nicht gut funktioniert. Bin neugierig, von Leuten zu hören.
— Rachel Cherry (@bamadesigner) 14. Mai 2020

In einer kürzlichen WordCamp Spain 2020-Sitzung sagte Matt Mullenweg, dass die Nachfrage nach entkoppelten WordPress-Websites wächst

Aber für Leute, die fortschrittlichere Anwendungen entwickeln oder Einschränkungen auf ihrer Website haben, bei denen sie das React-Frontend benötigen, ist der entkoppelte Anwendungsfall von WordPress stärker denn je.

Dan Abramov stimmt zu

Das trifft den Nagel auf den Kopf. Und entspricht zu 100 % unserem langfristigen Denken. Nur clientseitig ist nicht nachhaltig. Wir müssen mehr Dinge auf den Server verschieben, aber ohne die nahtlose Komposition interaktiver Teile zu opfern. https://#/O4LX8JacRo
— Dan Abramov (@dan_abramov) 10. Mai 2020

Im Gespräch mit Sarah Gooding von WPTavern gestanden Gatsby WP Themes Projektmitglieder Zac Gordon und Jason Bahl ebenfalls, dass die „aktuellsten Gatsby WordPress Themes für Unternehmen und Entwickler bestimmt sind, sie sind nicht für Anfänger geeignet.“ Hoffen wir, dass die Zukunft das behebt!

Meine persönliche Meinung

Basierend auf meiner sehr begrenzten Erfahrung denke ich, dass die derzeit verfügbaren Gatsby WordPress Themes noch nicht für den produktiven Einsatz für Benutzer wie mich bereit sind. Ja, es ist aufregend, etwas an der Grenze des Machbaren auszuprobieren, das klar in den Köpfen vieler WordPress-Benutzer und Entwickler ist. Gleichzeitig macht die sich ständig weiterentwickelnde Arbeit am WordPress Block-Editor, an WPGraphQL und an den Gatsby Source WordPress-Plugins es schwierig vorherzusagen, wohin die Reise geht und wann sie sich in einem Zustand stabilisieren wird, in dem sie in anderen Kontexten sicher verwendet werden kann. Bis dahin ist es eine frustrierende Erfahrung, an etwas zu arbeiten, nur um dann festzustellen, dass sich die API oder die Benutzeroberfläche ändert.

Für meine eigenen persönlichen Zwecke ist eine normale Gatsby-Website ausreichend, ich konnte Inhalte mit Markdown-Dateien ohne die mit der Entkopplung von WordPress verbundenen Probleme abrufen. Für größere Agentur-Websites... kann ich verstehen, warum eine entkoppelte Lösung für sie und ihre Kunden sinnvoll wäre.

Denken Sie daran, ich werde mein Tutorial nächste Woche teilen – bis dahin!