Wie man eine Website mit Gatsby und WordPress erstellt

Im modernen Webentwicklungszeitalter sind Geschwindigkeit und Performance keine bloßen Extras, sondern absolute Notwendigkeiten. Entwickler und Content-Ersteller suchen ständig nach Möglichkeiten, die Benutzerfreundlichkeit eines traditionellen Content-Management-Systems (CMS) mit der hohen Performance moderner Frontend-Technologien zu kombinieren. Hier kommt die leistungsstarke Kombination aus Gatsby und WordPress ins Spiel.

Durch die entkoppelte Architektur können Sie eine WordPress-Website als Headless-CMS zur Inhaltsverwaltung nutzen, während Gatsby die Präsentationsschicht übernimmt. Dieser Ansatz ermöglicht Ihnen die Entwicklung einer Gatsby-Website, die blitzschnell, hochsicher und suchmaschinenoptimiert ist.

Diese Anleitung führt Sie durch den Aufbau einer leistungsstarken Gatsby- und WordPress-Website. Wir behandeln alle Schritte von der Einrichtung Ihrer WordPress-Installation bis hin zur Bereitstellung statischer HTML-Dateien über ein globales Content Delivery Network (CDN).

Kurz gesagt: So erstellen Sie eine leistungsstarke Gatsby- und WordPress-Website

• Nutzen Sie WordPress als Headless-CMS und Gatsby als Generator für statische Seiten, um die Flexibilität der Inhaltsverwaltung mit blitzschnellen Seitenladezeiten zu kombinieren.

• Mit Gatsby lassen sich Seiten aus WordPress-Daten über GraphQL vorab erstellen, um eine nahezu sofortige Darstellung, eine verbesserte Suchmaschinenoptimierung und höhere Lighthouse-Werte zu erzielen.

• Optimieren Sie Ihre Website mit SEO-Best Practices , responsiven Bildern und Metadaten aus Plugins wie Yoast SEO mithilfe von WPGraphQL.

• Die Bereitstellung erfolgt auf statischen Hosting-Plattformen wie Netlify, Vercel oder Gatsby Cloud mit Continuous Deployment, um die Inhalte automatisch zu aktualisieren.

Warum sollten Sie Gatsby mit WordPress für Ihre Website wählen?

Die Verschmelzung von Gatsby und WordPress bietet das „Beste aus beiden Welten“. Man erhält die umfangreichen Bearbeitungsmöglichkeiten des weltweit beliebtesten CMS und die Geschwindigkeit eines auf React basierenden Generators für statische Websites.

Website-Geschwindigkeit und -Leistung mit Gatsby verbessern

Eine typische WordPress-Website generiert Seiten dynamisch, sobald ein Nutzer sie anfordert. Dazu muss der Server die Datenbank abfragen, PHP-Skripte verarbeiten und HTML dynamisch rendern. Caching hohem Besucheraufkommen oft zu längeren Ladezeiten .

Im Gegensatz dazu werden bei einer Gatsby-Website die Seiten bereits zur Kompilierzeit in statische HTML-Dateien vorab erstellt. Besucht ein Nutzer Ihre Website, werden diese statischen Dateien sofort und ohne Backend-Verarbeitung ausgeliefert. Dadurch laden die Seiten nahezu verzögerungsfrei.

Die meisten Gatsby-Websites erzielen deutlich höhere Lighthouse-Werte als herkömmliche dynamische Websites . Durch die Bereitstellung vorgerenderter Inhalte gewährleisten Sie Ihren Besuchern ein optimales Nutzererlebnis.

Nutzen Sie WordPress als flexibles Headless-CMS

Für Marketingteams und Blogger ist das WordPress-Backend ein vertrautes und leistungsstarkes Werkzeug. Es bietet eine intuitive Benutzeroberfläche zur Verwaltung von WordPress-Blogbeiträgen, Seiten und Medien. Durch die Nutzung von WordPress als flexibles Headless-CMS trennen Sie die Inhaltserstellung vom Code.

In dieser Architektur ruft Gatsby Daten von der WordPress-API (speziell über GraphQL) ab und erstellt die Website.

Redakteure können weiterhin das ihnen vertraute WordPress-Dashboard nutzen und WordPress-Plugins für SEO und Content-Management einsetzen, ohne sich Gedanken über die Frontend-Infrastruktur machen zu müssen.

Durch diese Trennung wird sichergestellt, dass sich die Entwickler auf die Benutzeroberfläche konzentrieren können, während sich die Ersteller der Inhalte auf die Inhalte der Beiträge konzentrieren.

Verbessern Sie Skalierbarkeit und Sicherheit mit statischen Websites

Statische Websites sind von Natur aus sicherer als herkömmliche dynamische Websites. Da auf der öffentlich zugänglichen Website weder eine Datenbank noch serverseitiger Code ausgeführt wird, gibt es keine Angriffsfläche für SQL-Injection oder die Ausführung von bösartigem PHP-Code.

Ihre WordPress-Installation kann auf einem privaten Server oder hinter einer Firewall betrieben werden und ist somit vollständig vor der Öffentlichkeit verborgen.

Darüber hinaus lassen sich statische Seiten problemlos skalieren. Da die Ausgabe aus einfachem HTML, CSS und JavaScript besteht, kann sie auf einem CDN gehostet werden.

Das bedeutet, dass Ihre Gatsby- und WordPress-Website auch massive Traffic-Spitzen bewältigen kann, ohne abzustürzen, da die statischen Dateien auf Servern weltweit verteilt sind.

Voraussetzungen für den Aufbau einer Gatsby- und WordPress-Website

Bevor Sie sich mit dem Code beschäftigen, stellen Sie sicher, dass Sie die notwendigen Tools installiert haben. Sie benötigen Grundkenntnisse in React und der Kommandozeile.

• Node.js und npm: Gatsby benötigt Node.js. Laden Sie die neueste LTS-Version von der offiziellen Node.js-Website herunter und installieren Sie sie.

• Gatsby CLI: Dieses Tool automatisiert die Erstellung einer neuen Gatsby-Website. Installieren Sie es global über das Terminal: `npm install -g gatsby-cli`

• WordPress-Installation: Sie benötigen eine laufende WordPress-Installation. Diese kann lokal (mit Tools wie Local by Flywheel) oder auf einem Webhost gehostet werden.

• WPGraphQL-Plugin: Um Gatsby den effizienten Datenabruf zu ermöglichen, installieren Sie das WPGraphQL-Plugin auf Ihrer WordPress-Website. Dieses Plugin verwandelt Ihre WordPress-Website in eine GraphQL-API, die von Gatsby verwendete Abfragesprache.

• WPGatsby-Plugin: Dieses Plugin arbeitet mit WPGraphQL zusammen, um das Gatsby-Quellschema von WordPress synchron zu halten und Funktionen wie Inhaltsvorschauen zu ermöglichen.

Schritte zum Erstellen einer Website mit Gatsby und WordPress

Nachdem die Voraussetzungen nun erfüllt sind, schauen wir uns die Schritt-für-Schritt-Anleitung zur Erstellung Ihrer Gatsby-Website an.

Schritt 1: Ihr Gatsby-Projekt mit WordPress einrichten

Der erste Schritt besteht darin, das Projekt zu initialisieren und es mit Ihrer Datenquelle zu verbinden.

Erstellen einer neuen Gatsby-Website mithilfe von WordPress-Startervorlagen

Die Gatsby CLI vereinfacht das Erstellen neuer Projekte. Sie können entweder von Grund auf neu beginnen oder eine Vorlage verwenden. In dieser Anleitung erstellen wir eine Standardwebsite und konfigurieren das Plugin manuell, um den Prozess besser zu verstehen.

Öffnen Sie Ihr Terminal und führen Sie folgenden Befehl aus:

gatsby new my-wordpress-gatsby-site cd my-wordpress-gatsby-site

Dieser Befehl erstellt ein Verzeichnis mit allen notwendigen Konfigurationsdateien. Installieren Sie anschließend die Gatsby -Quell-Plugins, um eine Verbindung zu WordPress herzustellen:

npm install gatsby-source-wordpress

Konfigurieren Sie gatsby-config.js so, dass Daten von WordPress bezogen werden

Öffnen Sie die Datei gatsby-config.js in Ihrem Code-Editor. Dies ist der Kern Ihrer Gatsby-Konfiguration. Sie müssen das Plugin gatsby-source-wordpress zum Plugin-Array hinzufügen.

Dieses Quell-Plugin verbindet Ihr Gatsby-Projekt mit der WordPress-Quellcode-Basis-URL.

module.exports = { plugins: [ { resolve: `gatsby-source-wordpress`, options: { url: `https://your-wordpress-site.com/graphql`, }, }, `gatsby-plugin-image`, `gatsby-plugin-sharp`, `gatsby-transformer-sharp`, ], }

Ersetzen Sie die URL durch Ihren tatsächlichen WordPress-API-Endpunkt . Diese Konfiguration teilt Gatsby mit, wo es nach WordPress-Daten suchen soll.

Starten Sie den Entwicklungsserver und erkunden Sie die GraphQL-Daten

Starten Sie nun den Entwicklungsserver, um die Verbindung zu überprüfen.

Gatsby entwickeln

Sobald der Server gestartet ist, können Sie auf den GraphiQL-Explorer zugreifen (üblicherweise unter http://localhost:8000/___graphql). Mit diesem Tool können Sie alle Daten untersuchen, die von Ihrem WordPress-Backend abgerufen werden.

Sie können eine GraphQL-Abfrage schreiben, um Ihre WordPress-Beiträge, -Seiten und -Autoren anzuzeigen. Dies überprüft, ob Gatsby die Daten korrekt abruft.

Schritt 2: Dynamische Seiten aus WordPress-Inhalten erstellen

Nachdem die Daten verbunden sind, besteht der nächste Schritt darin, Seiten programmatisch zu erstellen . Dadurch werden Ihre WordPress-Blogbeiträge in statische Seiten umgewandelt.

Effiziente Abfrage von WordPress-Inhalten mithilfe von GraphQL

Um Seiten zu generieren, müssen Sie zunächst die Daten abfragen. Wir verwenden die Datei gatsby-node.js, um zu steuern, wie Gatsby Seiten generiert.

Sie werden eine Abfrage schreiben, um alle für Ihre Seiten benötigten Daten auszuwählen, wie z. B. die ID, den Slug und die URI.

// gatsby-node.js exports.createPages = async ({ actions, graphql, reporter }) => { const { createPage } = actions const result = await graphql(` { allWpPost { nodes { id uri } } } `) if (result.errors) { reporter.panicOnBuild("Fehler beim Laden von Inhalten von WordPress", result.errors) return } const posts = result.data.allWpPost.nodes // ... Logik zur Seitenerstellung folgt }

Erstellen Sie wiederverwendbare Vorlagen für Angebote und Einzelbeiträge

Ohne Vorlage kann keine Beitragsseite erstellt werden. Erstellen Sie eine Datei unter src/templates/blog-post.js. Diese Komponente rendert den einzelnen Blogbeitrag.

In der Datei src/templates/blog-post.js importieren Sie Layout-Komponenten und exportieren eine Abfrage, die den spezifischen Beitragsinhalt anhand der von gatsby-node.js übergebenen ID abruft.

import React from "react" import { graphql } from "gatsby" import Layout from "../components/layout" const BlogPost = ({ data }) => { const post = data.wpPost return (<Layout><h1> {post.title}</h1><div dangerouslySetInnerHTML={{ __html: post.content }} /></Layout> ) } export const query = graphql` query($id: String!) { wpPost(id: { eq: $id }) { title content } } ` export default BlogPost

Zurück in gatsby-node.js durchlaufen Sie die Beiträge und verwenden die Aktion `createPage`. Geben Sie den Komponentenpfad zu Ihrer Datei `src/templates/blog-post.js` an.

Navigation zwischen Seiten mithilfe der Gatsby-Link-Komponente

Um zwischen Ihren neuen Seiten zu navigieren, ohne den Browser neu zu laden, verwenden Sie die Link-Komponente. Ersetzen Sie in Ihren Indexseiten- oder Archivvorlagen, in denen Sie WordPress-Blogbeiträge nach Datum sortiert auflisten, die Standard-Anker-Tags durch Gatsby-Links.

import { Link } from "gatsby" // Innerhalb Ihrer Komponente, die Beiträge durchleitet<Link to={post.uri}><h2> {post.title}</h2></Link>

Dadurch wird sichergestellt, dass sich Ihre Gatsby- und WordPress-Website wie eine Single Page Application (SPA) verhält und Inhalte sofort lädt, sobald der Benutzer darauf klickt.

Schritt 3: SEO-Optimierung für Ihre Gatsby- und WordPress-Website

Einer der Hauptvorteile eines statischen Seitengenerators sind seine SEO-Vorteile . Allerdings muss er aktiv konfiguriert werden.

Implementieren Sie die wichtigsten SEO-Best Practices in Gatsby

Sie sollten eine wiederverwendbare SEO-Komponente erstellen. Diese Komponente kümmert sich um die Meta-Tags in die statischen HTML-Dateien einzufügen.

SEO-Komponenten in jede Seitenvorlage importieren.

export const Head = ({ data }) =><SEO title="{data.wpPost.title}" />

Metadaten mithilfe von WPGraphQL SEO-Plugins verbessern

Wenn Sie AIOSEO oder RankMath auf Ihrem WordPress-Blog verwenden, können Sie diese Metadaten in Gatsby importieren. Installieren Sie dazu das Plugin wp-graphql-rankmath-seo auf Ihrem WordPress-Blog.

Dadurch wird ein SEO-Feld in Ihrer GraphQL-Abfrage freigeschaltet. Sie können nun auf die im WordPress-Dashboard festgelegten benutzerdefinierten Meta-Beschreibungen und -Titel zugreifen. Dies stellt sicher, dass Ihre Content-Strategie im CMS perfekt auf die Gatsby-Website übertragen wird.

Optimieren Sie Bilder und Medien für eine verbesserte Sichtbarkeit in den Suchergebnissen

Große Bilder können Ihre Core Web Vitals . Gatsby ist hervorragend in der Bildoptimierung. Mit dem Plugin gatsby-plugin-image können Sie automatisch responsive, verzögert geladene Bilder generieren.

Wenn Sie WordPress-Beiträge abfragen, verwenden Sie das Feld „gatsbyImage“ für Ihre Beitragsbilder. Gatsby verarbeitet die Medien von der WordPress-Quell-URL und erstellt während des Build-Prozesses optimierte Versionen im öffentlichen Ordner.

Schritt 4: Bereitstellung und Hosting Ihrer Gatsby-Website

Ihr Gatsby-Projekt ist fertiggestellt; jetzt muss es live gehen.

Erstellen Sie eine produktionsreife Gatsby-Website

Um Ihre Website für die Bereitstellung vorzubereiten, führen Sie den Befehl „gatsby build“

Dieser Befehl startet den Gatsby-Build-Prozess. Er kompiliert Ihre React-Komponenten, ruft Daten von WordPress ab und speichert die statischen Dateien (HTML, CSS, JS) im öffentlichen Verzeichnis. Sie können dies lokal mit `Gatsby serve` testen.

Wählen Sie die beste Hosting-Plattform und das beste CDN für eine schnelle Lieferung

WordPress lässt sich überall hosten, Ihre Gatsby-Website hingegen sollte auf einem spezialisierten statischen Webserver laufen. Beliebte Optionen sind beispielsweise Netlify, Vercel oder Gatsby Cloud.

Diese Plattformen sind für statische Websites optimiert. Sie verbinden einfach Ihr GitHub-Repository. Jedes Mal, wenn Sie Code hochladen, führt die Plattform einen Gatsby-Build durch und stellt die neuen statischen Seiten auf einem globalen CDN bereit.

Kontinuierliche Bereitstellung mit WordPress-Webhooks einrichten

Sie möchten, dass Ihre Website sich automatisch aktualisiert, sobald Sie einen neuen Blogbeitrag auf WordPress veröffentlichen. Sie möchten nicht jedes Mal einen manuellen Build durchführen.

Um dies zu automatisieren, konfigurieren Sie WordPress-Webhooks.

• Gehen Sie zu Ihrem Hosting-Anbieter (z. B. Netlify) und erstellen Sie eine „Build Hook“-URL.
• Installieren Sie in WordPress das WPGatsby-Plugin oder ein Webhook-Plugin.
• Fügen Sie die Build Hook-URL in die Einstellungen ein.

Wenn Sie jetzt bei einem WordPress-Beitrag auf „Aktualisieren“ oder „Veröffentlichen“ klicken, wird automatisch ein Build auf Ihrem Webserver ausgelöst. Ihre Gatsby- und WordPress-Website bleiben so stets synchronisiert.

Schritt 5: Pflege und Aktualisierung Ihrer Gatsby- und WordPress-Website

Die richtige Pflege ist entscheidend für die langfristige Gesundheit.

• Halten Sie WordPress- und Gatsby-Abhängigkeiten aktuell : Aktualisieren Sie Ihre WordPress-Installation und -Plugins regelmäßig, um Sicherheitslücken . Halten Sie auch die Abhängigkeiten Ihres Gatsby-Projekts auf dem neuesten Stand. Verwenden Sie `npm outdated`, um nach älteren Paketen zu suchen. Die Aktualisierung des Gatsby-Quellcode-WordPress-Plugins ist unerlässlich, um die Kompatibilität mit den neuesten Änderungen der WordPress-API zu gewährleisten.

• Überwachen Sie regelmäßig die Website-Performance und SEO-Kennzahlen : Nutzen Sie Tools wie die Google Search Console und PageSpeed ​​Insights. Da Sie statische Dateien ausliefern, sollten Ihre Server-Antwortzeiten niedrig sein. Falls Sie Leistungseinbrüche feststellen, prüfen Sie, ob Sie zu viele große Drittanbieter-Skripte oder nicht optimierte Ressourcen in Ihrer CSS-Datei laden.

• Inhaltsaktualisierungen verwalten und Gatsby-Neustarts auslösen : Redakteure ändern mitunter benutzerdefinierte Felder oder Menüstrukturen. Stellen Sie sicher, dass Ihr Team versteht, dass Änderungen im WordPress-Backend aufgrund der Build-Zeit einige Minuten benötigen, um auf der Live-Gatsby-Website sichtbar zu werden. Die Verwendung von Gatsby Cloud oder Hosting-Anbietern mit inkrementellen Builds kann diese Wartezeit deutlich verkürzen.

Häufige Herausforderungen beim Erstellen mit Gatsby und WordPress

Die Kombination aus Gatsby und WordPress ist zwar leistungsstark, bringt aber auch Herausforderungen mit sich.

• Build-Zeiten: Bei bestehenden Websites mit Tausenden von WordPress-Beiträgen kann der Gatsby-Build-Prozess langsam sein. Das Abrufen aller Daten und das Generieren Tausender statischer Seiten benötigt Zeit. Inkrementelle Builds können dieses Problem lösen.

• Inhaltsvorschau: In einem herkömmlichen WordPress-Theme können Sie einen Entwurf sofort in der Vorschau anzeigen. Bei einer Headless-Installation müssen Sie die Vorschaulogik mithilfe des WPGatsby-Plugins konfigurieren, damit Redakteure den Inhalt ihres Beitrags vor der Veröffentlichung sehen können.

• Plugin-Kompatibilität: Nicht alle WordPress-Plugins funktionieren mit einer Headless-Umgebung. Visuelle Editoren (wie Elementor) oder Frontend-spezifische Plugins sind in der Regel nicht kompatibel, da Gatsby das Frontend steuert. Sie greifen auf die WordPress-Daten zu, nicht auf deren visuelle Darstellung.

Fazit: Vorteile von Gatsby und WordPress für moderne Websites

Mit einer Website, die auf Gatsby und WordPress basiert, nutzen Sie die Stärken der beiden führenden Webtechnologien. Ihr Content-Team arbeitet mit dem vertrauten WordPress-Backend, während Sie mit einem Gatsby-Frontend ein hochmodernes Nutzererlebnis bieten.

Das Ergebnis ist eine Gatsby-Website, die sicher, skalierbar und unglaublich schnell ist. Durch die Entkopplung des Content-Management-Systems von der Darstellungsschicht sichern Sie Ihre digitale Präsenz für die Zukunft.

Egal ob Sie bestehende Websites migrieren oder eine neue Gatsby-Seite erstellen, diese Architektur bietet eine solide Grundlage für SEO-Erfolg und Kundenzufriedenheit.

Mit den oben beschriebenen Grundideen und Schritten sind Sie bestens gerüstet, Ihren Webentwicklungs- Workflow zu modernisieren. Nutzen Sie die Vorteile statischer Websites und die Flexibilität von WordPress, um etwas wirklich Außergewöhnliches zu schaffen.

Häufig gestellte Fragen zur Erstellung einer Website mit Gatsby und WordPress