Einführung in die Erstellung von Webseiten mit Gatsby und WordPress (Schnell und Statisch)

Wie funktioniert eine typische dynamische Webseite, die auf WordPress basiert? Wenn ein Besucher die URL in einem Browser eingibt oder deine Webseite über einen Link besucht, wird eine Anfrage an deinen Webserver gesendet.

Der Server sammelt die erforderlichen Daten durch notwendige Datenbankabfragen und generiert eine HTML-Datei, die von deinem Browser angezeigt wird. Statische Seiten hingegen speichern diese Antworten in Flat Files auf dem Server, die dem Besucher sofort zugestellt werden.

Statische Site-Generatoren gibt es schon lange, aber sie sind in letzter Zeit immer beliebter geworden. In dieser Schritt-für-Schritt-Anleitung sehen wir uns die Integration von WordPress mit Gatsby, einem statischen Website-Generator, an.

Was ist Gatsby?

WordPress erstellt dynamische Webseiten, die einen Stack aus PHP, MySQL und Apache oder Nginx auf dem Server benötigen, um zu laufen. Es ist möglich, eine statische Version von WordPress zu erstellen, indem man eine Liste von HTML-Seiten für alle Inhalte auf deiner Seite generiert.

Diese statische Version von WordPress wird Headless WordPress oder Serverless WordPress genannt. Dieser Konvertierungsprozess wird nur einmal durchgeführt, so dass dieselbe Seite den Besuchern mehrfach angezeigt werden kann. Wie konvertiert man seine WordPress-Seite in eine statische Version? Hier kommt Gatsby ins Spiel.

Gatsby, oder GatsbyJS, ist ein statischer Webseiten-Generator, der mit ReactJS gebaut wurde und von GraphQL unterstützt wird. Mit Gatsby kann jeder funktionsreiche, ansprechende Webseiten und Anwendungen erstellen. Gatsby holt Daten für deine Seite aus einer Vielzahl von Quellen, einschließlich existierender Seiten, API-Aufrufe und Flatfiles über GraphQL und erstellt die statische Seite basierend auf den von dir angegebenen Konfigurationseinstellungen.

Gatsby wurde erst vor einem Jahr entwickelt, aber eine große Anzahl von Benutzern hat Gatsby bereits ausprobiert. Gatsby hat in einer Vielzahl von Einstellungen Akzeptanz gefunden. Die Homepage von Airbnb’s Data Science and Engineering Blog wird von Gatsby betrieben, obwohl die eigentlichen Blogeinträge auf Medium gehostet werden.

Braun ist eine Marke des Konsumgüterherstellers P&G. Die kanadische Webseite wird bei Gatsby gehostet, während die Suchfunktion auf der Seite von React betrieben wird.

Darüber hinaus hat Gatsby auch das Interesse von freiberuflichen Entwicklern für ihre Portfolios geweckt. Portfolios wie das von Jacob Castro haben in erster Linie statischen Inhalt mit Links zu Werken und Kontakt über E-Mail, so dass eine statische Seite perfekt zu seinen Bedürfnissen passt.

Warum Gatsby Wählen?

Schnelle Webseiten: Der Hauptvorteil bei der Erstellung einer statischen Webseite mit Gatsby ist die Geschwindigkeit, die die Webmaster seit Googles Ankündigung, die Geschwindigkeit der Webseite im Web-Such-Ranking zu nutzen, zu optimieren versuchen. Die Ladezeiten wirken sich auch auf Seitenaufrufe und Conversions aus. Es wurde geschätzt, dass eine Verzögerung von einer Sekunde bei der Ladezeit der Webseite zu einer Reduzierung der Conversions um 7% führen kann.

Sicherheit: Mit einer statischen Webseite bekommt man auch zusätzliche Sicherheit. Da es sich um einen Haufen von statischen Dateien handelt, die bereitgestellt werden, gibt es nicht viel zu hacken. Außerdem kannst du die statischen Dateien jederzeit neu generieren, wenn sie verloren gehen.

Server Kosten: Das Hosting einer dynamischen Webseite erfordert, dass dein Server mit deinem Technologiestack kompatibel ist. Wenn du mit einer statischen Webseite arbeitest, kannst du sie auf fast jedem Server hosten, was auch die mit dem Hosting verbundenen Kosten senkt.

Die Generierung der statischen Webseite mit Gatsby bei jeder Änderung erfordert JavaScript, was auch auf einem lokalen Rechner geschehen kann, bevor die statischen Dateien auf die Webseite übertragen werden.

Warum Gatsby Meiden?

Kein Dynamic Content Built-In: Wenn du Gatsby verwenden möchtest, musst du neu überdenken, wie du dynamische Inhalte kontrollieren und ausliefern kannst, d.h. du musst eine Mischung aus statisch/dynamisch erstellen, um das zu erreichen (mehr dazu weiter unten).

Zum Beispiel müssen Kommentare extern durch einen Dienst wie Disqus bereitgestellt werden.

Kontaktformulare müssten auch über einen externen Partner wie Google Forms umgeleitet werden. Kurz gesagt, du würdest die direkte Kontrolle über solche dynamischen Inhalte verlieren, da deren Antworten nicht auf deinen Servern gespeichert werden.

Häufig genutzte Blöcke sind unpraktisch: Auch statische Webseiten haben das Problem der häufigen Neukonvertierung. Jede Änderung, die du auf deiner Seite durchführst, wird erst dann reflektiert, wenn du die Seiten neu generiert und auf den Server geladen hast.

Technische Kompetenz: Gatsby basiert auf ReactJS und GraphQL. Daher sind einige Kenntnisse von JavaScript und eine Grundidee von GraphQL erforderlich, um mit einer Webseite zu arbeiten und sie nach Gatsby zu portieren.

Statische Webseiten sind gut für diejenigen, die eine kostengünstige Lösung mit hoher Sicherheit suchen. Einige Anwendungsfälle sind Portfolio Webseiten für Freiberufler und Produkt-Demoseiten.

Wenn du denkst, die Vorteile überwiegen die Nachteile, großartig! Wir werden nun versuchen, Gatsby so einzurichten, dass es sich in unsere WordPress-Seite integrieren lässt.

Die neueste Version der Gatsby-Seite, die wir in diesem Tutorial erstellen, ist auf GitHub verfügbar.

Schritt 1: Einrichten von Gatsby

In diesem Abschnitt sehen wir uns an, wie man Gatsby installiert und eine grundlegende statische Webseite mit Gatsby erstellt.

Voraussetzungen

Der erste Schritt für den Einstieg in Gatsby ist die Überprüfung der Voraussetzungen. Gatsby wird über npm, den NodeJS-Paketinstaller, bedient. Daher benötigt man vor der Installation von Gatsby NodeJS und npm in der Umgebung. Außerdem muss für Gatsby das Quellcodeverwaltungssystem Git installiert werden.

Wenn du mit Windows arbeitest, kannst du NodeJS und Git über das Installationsprogramm auf der Download-Seite installieren. Auf einem Mac kannst du entweder deren Installationsprogramme herunterladen oder Homebrew verwenden.

brew install nodejs
brew install git

Wenn du das Linux-Betriebssystem verwendest, kannst du NodeJS über ein Paket-Installationsprogramm wie apt installieren.

sudo apt update
sudo apt install nodejs git

Gatsby Installieren

Sobald du NodeJS und Git erfolgreich installiert hast, bist du bereit, Gatsby zu installieren! Am einfachsten ist es, den folgenden Befehl auf dem Terminal auszuführen (unter Windows mit der npm-Kommandozeile):

npm install -g gatsby-cli

Der Webmaster installiert zuerst die Dependencies und dann Gatsby. Du bist nun bereit, deine erste Gatsby-Seite zu erstellen.

Erstellen und Bereitstellen deiner Gatsby-Webseite

Führe den folgenden Befehl aus, um eine Gatsby-Website zu erstellen.

gatsby new gatsby-wordpress

Gatsby erstellt eine Seite im Verzeichnis /gatsby-wordpress durch Klonen des Gatsby-Starter-Templates. Du kannst ein anderes Starter-Template zum Klonen bereitstellen. Sobald das Klonen abgeschlossen ist und die Dependencies installiert sind, kannst du eine Entwicklungsversion der Seite mit dem folgenden Befehl ausführen.

cd gatsby-wordpress
gatsby develop

Du kannst dann die Entwicklungsversion der Seite unter http://localhost:8000 besuchen.

Der letzte Schritt ist der Aufbau deiner statischen Seite. Der folgende Befehl erstellt die statischen Dateien im öffentlichen Verzeichnis. Um sie auf einen Server hochzuladen, genügt es, den Inhalt dieses Verzeichnisses in das Stammverzeichnis des Servers hochzuladen. Vielleicht möchtest du einen Pfad-Präfix wie www.example.com/blog/ als Root-URL für deine Builds hinzufügen.

gatsby build

Um einen HTML-Server lokal zu starten, um diese statische Form deiner Webseite anzuzeigen, musst du den serve Befehl verwenden. Beachte, dass dies nur nach dem Ausführen des build-Befehls funktioniert.

gatsby serve

Nun, da du erfolgreich eine grundlegende statische Seite von Gatsby erstellt hast, lasse uns versuchen, sie in WordPress zu integrieren.

Schritt 2: Wie man Gatsby mit WordPress Verbindet

In diesem Abschnitt wirst du deine WordPress-Seite in Gatsby integrieren. Du wirst Gatsby auf die Adresse deines WordPress-Blogs verweisen, damit es die neuesten Daten abrufen kann, wenn du den Entwicklungsserver betreibst oder die statischen Seiten generierst.

Der Prozess der Anbindung von Gatsby an WordPress besteht darin, deine WordPress-Daten abzurufen, die durch einen Build ausgelöst werden. Sobald Gatsby die WordPress-Daten abgerufen hat, erstellt es die statische Seite auf der Basis des aktuellen Templates.

Der Prozess verwendet die WordPress-Seite als Quelle für die Beiträge auf Gatsby. Um diesen Austausch zu erleichtern, muss das Gatsby-Plugin für WordPress über den folgenden Befehl installiert werden:

npm install gatsby-source-wordpress

Gatsby Konfigurieren

Als nächstes füge dieses Plugin in die Gatsby-Konfigurationsdatei gatsby-config.js ein.

Füge dann den folgenden Code in die Datei ein, um Gatsby mit deinem WordPress-Quelltext zu verbinden. In diesem Beispiel verwenden wir eine lokal gehostete WordPress-Seite auf MAMP. Nebenbei kannst du den Titel und die Beschreibung der Seite in siteMetadata bearbeiten.

module.exports = {
  siteMetadata: {
    ...
  },
  plugins: [
    ...
    {
        resolve: `gatsby-source-wordpress`,
        options: {
            // Specify the URL of the WordPress source
            baseUrl: `localhost:8888/wordpress`,
            protocol: `http`,
            // Indicates if a site is hosted on WordPress.com
            hostingWPCOM: false,
            // Specify which URL structures to fetch
            includedRoutes: [
              '**/posts',
              '**/tags',
              '**/categories'
            ]
        }
    }

Posts mit GraphQL Holen

Nachdem du die Quelle der WordPress-Seite in deiner Konfigurationsdatei angegeben hast, musst du angeben, welche Daten aus der WordPress-Seite extrahiert werden sollen. Gatsby verwendet GraphQL, eine Open-Source-Abfragesprache für APIs, um WordPress-Beiträge in großen Mengen zu erhalten.

Bevor du die zu selektierenden Abfragen abschließt, kannst du interaktiv die Inhalte auswählen, die du aus WordPress holen willst. Starte den Entwicklungsserver und gehe auf die URL: http://localhost:8000/___graphql, um den GraphQL-Editor zu öffnen.

Wenn du den Inhalt, der abgerufen werden soll, fertig gestellt hast, kannst du die GraphQL-Abfragen zur Datei index.js hinzufügen.

Lasse uns vorerst nur den Titel und den Auszug aus jedem Beitrag ziehen. Wir können später weitere Felder hinzufügen.

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

export default ({ data }) => {
  return (
    <Layout>
      <SEO title="home" />
      <h4>Posts</h4>
      {data.allWordpressPost.edges.map(({ node }) => (
        <div>
          <p>{node.title}</p>
          <div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
        </div>
      ))}
    </Layout>
  )
}
export const pageQuery = graphql`
  query {
    allWordpressPost(sort: { fields: [date] }) {
      edges {
        node {
          title
          excerpt
        }
      }
    }
  }

Wenn du dir die Entwicklungsseite anschaust, wirst du feststellen, dass alle Beiträge aus WordPress mit ihren Überschriften und Auszügen angezeigt wurden:

Das sieht zwar nicht schön aus, aber du hast die relevanten Daten erfolgreich aus WordPress geholt. Der nächste Schritt ist, für jeden Beitrag eine neue Seite zu erstellen.

Schritt 3: Erstelle ein Basic Page Template

In diesem Abschnitt wirst du Gatsby dazu veranlassen, für jede einzelne Seite deiner WordPress-Seite einen Beitrag zu erstellen und Links zu diesen Beiträgen durch den Slug einzubauen.

Erstelle eine Seite für jeden Beitrag

Der erste Schritt, nachdem alle Beiträge aus der WordPress-Quelle gezogen wurden, ist, Gatsby anzuweisen, für jeden Beitrag eine Seite zu erstellen. Dies ist eine Aktion, die mit der CreatePage-Aktion abgeschlossen wird.

Füge den folgenden Code zu gatsby-node.js hinzu. Beachte, dass wir zusätzlich den Inhalt, den Autor, das Datum und den Slug jedes Posts erhalten:

const path = require(`path`)

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  return graphql(`
    {
      allWordpressPost(sort: {fields: [date]}) {
        edges {
          node {
            title
            excerpt
            slug
            date(formatString: "MM-DD-YYYY")
            author {
              name
            }
          }
        }
      }
    }

  `).then(result => {
    result.data.allWordpressPost.edges.forEach(({ node }) => {
      createPage({
        // Decide URL structure
        path: node.slug,
        // path to template
        component: path.resolve(`./src/templates/blog-post.js`),
        context: {
          // This is the $slug variable
          // passed to blog-post.js
          slug: node.slug,
        },
      })
    })
  })

Nachdem die Daten aus GraphQL gezogen wurden, erstellt der Code eine Seite für jeden Beitrag. Innerhalb des Posts kann man über den Pfad die URL-Struktur der Seite basierend auf dem Slug angeben.

Alternativ kannst du auch die ID des Posts abfragen und diese in der URL angeben. Die Komponentenvariable zeigt auf das Template, durch das der Beitrag dargestellt werden soll. Schließlich übergeben wir den Slug als Kontext des Templates. Dieser wird benötigt, damit das Template den richtigen Beitrag aus der Liste der geholten Beiträge abfragen kann.

Im Idealfall muss eine Variable übergeben werden, die einen Beitrag eindeutig als Kontext identifiziert.

Starte den Entwicklungsserver neu, nachdem du Änderungen an der Datei gatsby-node.js vorgenommen hast, damit die Änderungen wirksam werden.

Template zur Anzeige eines Beitrags erstellen

Create a directory templates in the src directory. Create a new file blog-post.js within the templates directory and enter the following code:

import React from "react"
import Layout from "../components/layout"
import { graphql } from "gatsby"

export default ({ data }) => {
  const post = data.allWordpressPost.edges[0].node
  console.log(post)
  return (
    <Layout>
      <div>
        <h1>{post.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: post.content }} />
        <p> By: {post.author.name} </p>
        <p> On: {post.date} </p>
      </div>
    </Layout>
  )
}

export const query = graphql`
  query($slug: String!) {
    allWordpressPost(filter: { slug: { eq: $slug } }) {
      edges {
        node {
          title
          content
          slug
          date(formatString: "MM-DD-YYYY")
          author {
            name
          }
        }
      }
    }
  }

Die GraphQL-Abfrage erhält das Datum und den Autorennamen, der gegen Ende des Beitrags angezeigt wird. Du kannst zusätzliche Felder mit dem GraphQL-Editor holen und auf der Beitragsseite anzeigen lassen.

Link zu Seiten im Index

Du hast für jeden Beitrag eine neue Seite erstellt. Du musst jedoch einen Link zu diesen Beiträgen von der Index-Seite aus hinzufügen. Gehe zu index.js und ändere den Code, um einen Link zu jedem Beitrag hinzuzufügen:

import React from "react"
import { Link, graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"

export default ({ data }) => {
  return (
    <Layout>
      <SEO title="home" />
      <h1>My WordPress Blog</h1>
      <h4>Posts</h4>
      {data.allWordpressPost.edges.map(({ node }) => (
        <div>
          <Link to={node.slug}>
            <p>{node.title}</p>
          </Link>
          <div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
        </div>
      ))}
    </Layout>
  )
}

export const pageQuery = graphql`
  query {
    allWordpressPost(sort: { fields: [date] }) {
      edges {
        node {
          title
          excerpt
          slug
        }
      }
    }
  }

Hier ist der Status der Index-Seite:

Wenn du auf einen Link zu einem Beitrag klickst, ist hier die Seite des Blog-Posts, dargestellt von blog-post.js:

Schritt 4: Erweiterte Migrationsaufgaben

Während du vielleicht erfolgreich jeden WordPress-Beitrag importiert hast, lass uns ein paar fortgeschrittene Aufgaben durchführen, um sicherzustellen, dass du in Zukunft keine Probleme mehr hast. In diesem Abschnitt kannst du effizient mit Bildern arbeiten und den Zeitstempel der letzten Änderung in deine Daten einfügen.

Bild-Pfad-Conversions

Einer unserer ursprünglichen Beiträge, „Beitrag mit Bild!“ hatte ein Bild darin. Wenn du auf die entsprechende Seite in Gatsby gehst, wirst du feststellen, dass das Bild zwar angezeigt wird, aber die Quelle des Bildes die gleiche ist wie die von WordPress. In diesem Beispiel zeigt es auf das lokal gehostete WordPress-Bild.

Wenn du Bilder extern hosten willst, wird dies kein Problem darstellen, da du weiterhin auf deinen Bildserver zeigst. Wenn du jedoch die Bilder innerhalb deiner WordPress-Installation speicherst, musst du die Bilder auch mit den Beiträgen erhalten!

Dies wird durch das Inline-Image-Plugin gelöst. Installiere zunächst das gatsby-Image und dann das gatsby-wordpress-inline-images Plugin.

npm install gatsby-image
npm install gatsby-wordpress-inline-images

Als nächstes füge die folgenden Zeilen in deine gatsby-config.js Datei ein.

module.exports = {
  siteMetadata: {
    ...
  },
  plugins: [
    ...
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        ...
        // If useACF is true, then the source plugin will try to import the WordPress ACF Plugin contents.
        // This feature is untested for sites hosted on WordPress.com
        useACF: true,
        plugins: [
          {
            resolve: `gatsby-wordpress-inline-images`,
            options:
            {
              baseUrl: `localhost:8888/wordpress`,
              protocol: `http`
            }
          }
        ]
      }
    }
  ],
}

Ein Neustart des Entwicklungsservers nach diesen Änderungen lädt die Bilder von der WordPress-Seite herunter und speichert sie lokal. Du kannst dies über den Pfad desselben Bildes überprüfen.

Zuletzt Geändertes Datum Anzeigen

Wenn du einen Blog verwaltest, in dem du deine Beiträge regelmäßig aktualisierst, möchtest du vielleicht die Leser darüber informieren, wann ein Beitrag zuletzt aktualisiert wurde. Obwohl du zuvor das „Erstellungsdatum“ in der GraphQL-Abfrage gezogen hast, erklärt dir dieser Abschnitt, wie du auch den „zuletzt geänderten“ Zeitstempel ziehen kannst.

Um den zuletzt modifizierten Zeitstempel aus WordPress zu deinem Gatsby-Beitrag hinzuzufügen, musst du das modifizierte Feld zur Liste der Elemente in deiner GraphQL-Abfrage hinzufügen. Es ist ein Zeitstempel wie date, also musst du auch den Parameter formatString hinzufügen. Hier ist die modifizierte blog-post.js Datei:

...
<Layout>
  <div>
    ...
    <p> On: {post.date} </p>
    <p> Last modified: {post.modified} </p>
  </div>
</Layout>
...

export const query = graphql`
  query($slug: String!) {
  {
    allWordpressPost {
      edges {
        node {
          ...
          modified(formatString: "MM-DD-YYYY")
        }
      }
    }
  }

Sobald du dies hinzugefügt hast, kannst du den zuletzt geänderten Zeitstempel auf der Blog-Post-Seite auf Gatsby sehen:

Zusammenfassung

Die Entscheidung, deine WordPress-Seite in eine statische Seite umzuwandeln und dabei Gatsby zu nutzen, kann eine schwierige Aufgabe sein. Um dies zu tun, solltest du die folgenden Schritte ausführen:

• Installiere Gatsby, um einen Startplatz zu bauen
• Verbinde Gatsby mit der WordPress-Quelle über GraphQL
• Vorlagen für Blogeinträge erstellen
• Importiere alle Bilder aus WordPress
• Anzeige des zuletzt geänderten Zeitstempels aus WordPress

Jetzt bist du dran: Hast du mit Gatsby gespielt? Welche Erfahrungen hast du damit gemacht? Sage es uns in den Kommentaren!

Shaumik Daityari

Shaumik is a data analyst by day, and a comic book enthusiast by night (or maybe, he's Batman?) Shaumik has been writing tutorials and creating screencasts for over five years. When not working, he's busy automating mundane daily tasks through meticulously written scripts!