Tutorial: Erstellen Sie Ihre Website mit WordPress und Gatsby

Das Erstellen einer statischen Website mit WordPress ist mit Headless WordPress möglich. Diese Arten von Websites werden schneller geladen, da statische Dateien auf Ihrem Server gespeichert werden. Die Frage ist, wie baut man mit WordPress eine Headless-Website?

Hier kommt ein Static-Site-Generator wie Gatsby ins Spiel. Diese Generatoren helfen Ihnen, funktionsreiche statische Websites in WordPress zu erstellen. Sie müssen sie jedoch korrekt in Ihre WordPress-Installation integrieren, um sie optimal nutzen zu können. Diese Integration umfasst das Installieren, Generieren und Konfigurieren von WordPress Gatsby.

In diesem Artikel sehen wir uns an, was Gatsby ist und warum Sie es vielleicht mit WordPress verwenden möchten. Wir werden dann detailliert beschreiben, wie Sie Gatsby verwenden und ob Sie dies tun sollten. Lass uns anfangen!

Was ist Gatsby?

Einfach ausgedrückt, Gatsby ist ein statischer Site-Generator. Das bedeutet, dass Gatsby die statischen HTML-Dateien generiert, die auf den Server Ihrer Website hochgeladen werden. Wenn ein Besucher auf Ihrer Website landet, werden diese statischen Dateien an seinen Browser geliefert, anstelle der dynamischen Inhalte, die WordPress im Allgemeinen anbietet.

Um diese Dateien zu generieren, ruft Gatsby Daten für Ihre Website aus einer Reihe von Quellen ab. Dazu gehören vorhandene Websites, API-Aufrufe und Flatfiles über GraphQL. Ihre statische Website wird dann basierend auf den von Ihnen festgelegten Konfigurationen erstellt.

Im Vergleich zu anderen Static-Site-Generatoren ist Gatsby relativ neu. Dies hat jedoch viele Unternehmen nicht davon abgehalten, es auszuprobieren. Eines der größten Beispiele ist der Airbnb-Blog Engineering & Data Science, der von Gatsby betrieben wird.

Warum Gatsby mit WordPress verwenden?

Da es möglich ist, mit WordPress eine statische Website zu erstellen, fragen Sie sich vielleicht, warum Sie WordPress und Gatsby zusammen verwenden sollten. Während WordPress allein schon leistungsfähig ist, bietet Gatsby einige Vorteile, die Sie sich für Ihre Website wünschen könnten, darunter höhere Geschwindigkeiten und niedrigere Serverkosten. Das Verständnis der Vor- und Nachteile von Gatsby kann Ihnen helfen, eine fundierte Entscheidung zu treffen.

Vorteile der Verwendung von Gatsby

Gatsby bietet eine Reihe von Vorteilen, die jede Website nutzen kann, darunter:

• Schnellere Ladegeschwindigkeiten. Statische Websites werden schneller geladen als dynamische, was sich auf Ihre Suchmaschinenoptimierung (SEO) auswirken kann. Seitenladegeschwindigkeiten sind ein von Suchmaschinen verwendetes Signal und wirken sich auf die Absprungraten Ihrer Website aus.
• Reduzierte Serverkosten. Dynamische Websites erfordern kompatible Technologie-Stacks und Server. Statische Websites tun dies nicht, und Sie können sie auf jedem Server hosten. Dies kann Ihre Serverkosten reduzieren.
• Verbesserte Sicherheit. Statische Websites bieten verbesserte Sicherheit. Die bereitgestellten statischen HTML-Dateien bieten Hackern nicht viel, mit dem sie arbeiten können. Wenn diese Dateien aus irgendeinem Grund verloren gehen, können Sie sie auch mit Gatsby wiederherstellen.

Von all diesen Vorteilen kann Ihre Website profitieren. Sie sollten sie jedoch gegen die Nachteile der Verwendung von Gatsby abwägen.

Nachteile der Verwendung von Gatsby

Kein Softwaresystem ist perfekt, und Gatsby hat einige Nachteile, die Sie kennen sollten:

• Technisches Wissen erforderlich. Gatsby basiert auf ReactJS und verwendet GraphQL. Um es zu verwenden, ist ein gewisses Verständnis von JavaScript erforderlich. Sie benötigen außerdem Grundkenntnisse in GraphQL, um eine Website zu erstellen.
• Keine dynamischen Inhalte. Gatsby generiert nur statische Webseiten. Wenn Sie dynamische Inhalte wie Kontaktformulare wünschen, müssen diese über einen Drittanbieter umgeleitet werden.

Während viele Entwickler der Meinung sind, dass die Vorteile von Gatsby die Nachteile überwiegen, ist es wichtig, beide im Voraus zu verstehen.

Wie verwende ich Gatsby mit WordPress?

Das Einrichten von Gatsby kann einige Zeit dauern, und es gibt bestimmte Schritte, die Sie ausführen müssen. Sie müssen Gatsby installieren, bevor Sie mit der Generierung und Konfiguration Ihrer Website beginnen können. Außerdem sind erste Überlegungen anzustellen.

Schritt 1: Überprüfen Sie die Voraussetzungen

Bevor Sie Gatsby installieren können, müssen Sie NodeJS und npm in Ihrer Website-Umgebung installieren. Git wird auch für die Codeverwaltung benötigt. Die Schritte zum Installieren der Voraussetzungen variieren je nach ausgeführtem Betriebssystem.

Wenn Sie Windows haben, können Sie NodeJS und Git über das Installationsprogramm auf der Download-Seite installieren. Das gleiche ist mit Mac möglich. Wenn Sie jedoch Linux ausführen, ist ein Paketinstallationsprogramm wie apt erforderlich.

Schritt 2: Installieren Sie Gatsby

Nach der Installation von NodeJS und Git können Sie mit der Installation von Gatsby beginnen. Die einfachste Methode, dies zu tun, ist die Verwendung des folgenden Befehls in Ihrem Software-Terminal:

 npm install -g gatsby-cli

Dieser Befehl führt das Installationsprogramm automatisch aus. Es wird zuerst alle Abhängigkeiten herunterladen und installieren, bevor Gatsby installiert wird. Sobald dies abgeschlossen ist, können Sie mit der Erstellung Ihrer ersten Gatsby-Website beginnen.

Schritt 3: Erstellen Sie eine Gatsby-Site

Um Ihre Gatsby-Website zu erstellen, müssen Sie den folgenden Befehl ausführen:

 gatsby new gatsby-site

Dieser Befehl klont das Gatsby-Starter-Template und legt es im Verzeichnis /gatsby-wordpress ab. Sobald das Klonen und die Installation abgeschlossen sind, können Sie die Entwicklungsversion der Website öffnen. Dies geschieht mit dem folgenden Befehl:

 gatsby develop

Während die Entwicklungsumgebung läuft, können Sie Ihre neue Website lokal besuchen. Geben Sie in Ihrem Webbrowser http://localhost:8000 ein und Ihre Standardvorlage sollte sich öffnen.

Wenn Sie diese Seite sehen, können Sie mit dem Aufbau Ihrer Website beginnen. Dies bedeutet, dass die statischen Dateien im öffentlichen Verzeichnis dieser Website erstellt werden. Der folgende Befehl startet automatisch die Produktion dieser statischen Dateien:

 gatsby build

Dieser Befehl generiert auch die Pre-Route-JavaScript-Codepakete für Ihre Website. Anschließend können Sie mit dem serve-Befehl Ihre neue Website lokal anzeigen lassen:

 gatsby serve

Dieser Befehl funktioniert nur, wenn Sie den Build-Befehl bereits ausgeführt haben.

Schritt 4: Verbinden Sie Gatsby mit WordPress

Sie haben jetzt eine einfache statische Website, aber Sie müssen sie in WordPress integrieren. Dadurch wird Ihre Gatsby-Site auf die Adresse Ihres WordPress-Blogs verwiesen, sodass sie die neuesten Daten abrufen kann, wenn Sie den Entwicklungsserver ausführen. Sobald die Verbindung hergestellt ist, erstellt Gatsby eine statische Website basierend auf Ihrer aktuellen WordPress-Vorlage.

Um die beiden zu verbinden, müssen Sie das Gatsby-Plugin für WordPress installieren. Dafür sorgt folgender Befehl:

 npm install gatsby-source-wordpress

Nach der Installation des Plugins können Sie mit der Konfiguration von Gatsby beginnen.

Schritt 5: Konfigurieren Sie Gatsby

Um Gatsby zu konfigurieren, müssen Sie mit der Datei gatsby-config.js arbeiten. Fügen Sie in dieser Datei den folgenden Code hinzu:

 module.exports = { ... plugins: [ ..., { resolve: `gatsby-source-wordpress`, options: { // your WordPress source baseUrl: `wpexample.com`, protocol: `https`, // is it hosted on wordpress.com, or self-hosted? hostingWPCOM: false, // does your site use the Advanced Custom Fields Plugin? useACF: false } }, ] }

Aktualisieren Sie diesen Code so, dass er auf Ihre WordPress-Website verweist. Wenn Ihre Website lokal gehostet wird, können Sie nach baseUrl localhost:8888/wordpress anstelle der URL Ihrer Website verwenden. Nachdem Sie die Datei gespeichert haben, müssen Sie Ihre Seitenvorlagen erstellen.

Schritt 6: Erstellen Sie Seitenvorlagen

Das Erstellen von Seitenvorlagen ermöglicht es Gatsby, einen Beitrag für jede Seite auf Ihrer WordPress-Website zu generieren. Das Quell-Plugin zieht die Daten, die Sie für diese Seiten aus WordPress benötigen, aber Sie müssen die Designvorlage erstellen.

Fügen Sie in Ihrer Datei gatsby-node.js den folgenden Code hinzu:

 const path = require(`path`) const { slash } = require(`gatsby-core-utils`) exports.createPages = async ({ graphql, actions }) => { const { createPage } = actions // query content for WordPress posts const result = await graphql(` query { allWordpressPost { edges { node { id slug } } } } `) const postTemplate = path.resolve(`./src/templates/post.js`) result.data.allWordpressPost.edges.forEach(edge => { createPage({ // will be the url for the page path: edge.node.slug, // specify the component template of your choice component: slash(postTemplate), // In the ^template's GraphQL query, 'id' will be available // as a GraphQL variable to query for this posts's data. context: { id: edge.node.id, }, }) }) }

Nach dem Aufruf aller Daten aus WordPress generiert Gatsby für jeden Beitrag eine Seite. Mit dem Befehl „develop“ können Sie mithilfe der generierten URL zu jeder neuen Seite navigieren.

Sollte ich Gatsby für WordPress verwenden?

Obwohl Gatsby die Geschwindigkeit und Sicherheit Ihrer Website verbessern kann, ist es nicht für jeden die richtige Wahl. Wenn Ihre Website über statische Inhalte verfügt, die sich nicht oft ändern, kann Gatsby von Vorteil sein. Wenn Sie jedoch dynamische Inhalte auf Ihrer Website benötigen, ist traditionelles WordPress möglicherweise die bessere Wahl.

Machen Sie das Beste aus Ihrer Website auf WP Engine

Gatsby ist ein effektiver statischer Website-Generator, den Sie einfach in WordPress integrieren können. Es gibt Schritte, die Sie befolgen müssen, um das System zu installieren und zu konfigurieren. Sie müssen auch einige Kenntnisse über Gatsby und GraphQL haben, bevor Sie beginnen.

Statische Inhalte können die Geschwindigkeit und Sicherheit Ihrer Website verbessern, aber Sie brauchen auch den richtigen Host. WP Engine bietet die besten Ressourcen für Ihre Website, um ein hervorragendes digitales Erlebnis zu schaffen. So bleibt Ihnen mehr Zeit, sich auf die Entwicklung zu konzentrieren!