Headless WordPress mit Gatsby Cloud einführen (Live-Vorschau, inkrementelle Builds und mehr!)

Avatar of Geoff Graham
Geoff Graham am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Das Gatsby-Team hat ein Update für sein Quell-Plugin für WordPress veröffentlicht und es in die Beta-Phase überführt. Die neue Version bringt eine Reihe neuer Funktionen für Gatsbys Headless-WordPress-Konfiguration, die WPGraphQL und WPGatsby kombiniert, um ein Gatsby-Frontend zu betreiben, das Daten aus WordPress abruft.

Wenn Sie diese Plugins noch nicht kennen, liegt das wahrscheinlich daran, dass sie nur auf GitHub und nicht im WordPress Plugin Verzeichnis verfügbar sind.

Und wenn Sie sich fragen, was daran so besonders ist, dann werden Sie überrascht sein, denn dies ist möglicherweise der einfachste Weg, React mit WordPress zu nutzen. WPGraphQL verwandelt WordPress in einen GraphQL API-Server und stellt einen Endpunkt für den Zugriff auf WordPress-Daten bereit. WPGatsby optimiert WordPress-Daten, um sie an das Gatsby-Schema anzupassen. Jetzt, mit der neuesten Version von gatsby-source-wordpress@v4, wird nicht nur das GraphQL-Schema mit dem Gatsby-Schema zusammengeführt, sondern auch Gatsby Cloud in die Mischung geworfen.

Dieser letzte Punkt ist die Magie. Da das Plugin Daten im Gatsby-Node-Cache zwischenspeichern kann, bietet es einige ziemlich beeindruckende Funktionen, die das Schreiben von Inhalten und das Bereitstellen von Änderungen über Gatsby Cloud so wunderbar machen. Ich werde die Funktionsliste einfach aus der Ankündigung übernehmen

  • Vorschau von Inhalten während der Erstellung mit Gatsby Preview
  • Aktualisieren oder veröffentlichen Sie neue Inhalte fast sofort mit inkrementellen Builds, nur auf Gatsby Cloud verfügbar
  • Links und Bilder im HTML von Inhalten können mit gatsby-image und gatsby-link verwendet werden. Dies behebt eine häufige Beschwerde über das ursprüngliche Quell-Plugin für WordPress.
  • Beschränken Sie die Anzahl der während der Entwicklung abgerufenen Nodes, damit Sie Ihre Website schnell ändern können, während Sie neue Seiten und Funktionen erstellen
  • Nur Bilder, die in veröffentlichten Inhalten referenziert werden, werden von Gatsby verarbeitet, sodass eine große Mediathek Ihre Build-Zeiten nicht verlangsamt 
  • Jede WPGraphQL-Erweiterung macht ihre Daten automatisch für Ihr Gatsby-Projekt verfügbar. Das bedeutet, dass Ihre Website beliebte WordPress SEO-, Content-Modellierungs-Übersetzungs- und E-Commerce- Plugins über ein einziges Gatsby-Quell-Plugin nutzen kann.

Live-Vorschauen sind super nett. Aber hey, schauen Sie sich die Einführung von inkrementellen Builds an. Das bedeutet keine vollständigen Website-Neuerstellungen mehr beim Schreiben von Inhalten. Stattdessen werden nur die aktualisierten Dateien hochgeladen. Und das bedeutet super schnelle Builds mit weniger Fehlern.

Oh, und hey, wenn Sie daran interessiert sind, eine React-Website mit WordPress als CMS einzurichten, hat Ganesh Dahal gerade heute hier auf CSS-Tricks eine zweiteilige Serie begonnen, die eine Schritt-für-Schritt-Anleitung bietet.

Direkter Link →