{"id":31220,"date":"2020-01-15T04:29:33","date_gmt":"2020-01-15T12:29:33","guid":{"rendered":"https:\/\/kinsta.com\/?p=58518&preview=true&preview_id=58518"},"modified":"2023-08-23T16:40:34","modified_gmt":"2023-08-23T15:40:34","slug":"gatsby-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/gatsby-wordpress\/","title":{"rendered":"Einf\u00fchrung in die Erstellung von Webseiten mit Gatsby und WordPress (Schnell und Statisch)"},"content":{"rendered":"

Wie funktioniert eine typische dynamische Webseite, die auf WordPress basiert? Wenn ein Besucher die URL in einem Browser eingibt oder deine Webseite \u00fcber einen Link besucht, wird eine Anfrage an deinen Webserver gesendet.<\/p>\n

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

Statische Site-Generatoren gibt es schon lange, aber sie sind in letzter Zeit immer beliebter geworden. In dieser Schritt-f\u00fcr-Schritt-Anleitung sehen wir uns die Integration von WordPress mit Gatsby<\/strong>, einem statischen Website-Generator, an.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Was ist Gatsby?<\/h2>\n

WordPress erstellt dynamische Webseiten, die einen Stack aus PHP<\/a>, MySQL<\/a> und Apache oder Nginx<\/a> auf dem Server ben\u00f6tigen, um zu laufen. Es ist m\u00f6glich, eine statische Version von WordPress zu erstellen, indem man eine Liste von HTML-Seiten f\u00fcr alle Inhalte auf deiner Seite generiert.<\/p>\n

Diese statische Version von WordPress wird Headless WordPress oder Serverless WordPress genannt. Dieser Konvertierungsprozess wird nur einmal durchgef\u00fchrt, 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.<\/p>\n

Gatsby<\/a>, oder GatsbyJS, ist ein statischer Webseiten-Generator, der mit ReactJS<\/a> gebaut wurde und von GraphQL<\/a> unterst\u00fctzt wird. Mit Gatsby kann jeder funktionsreiche, ansprechende Webseiten und Anwendungen erstellen. Gatsby holt Daten f\u00fcr deine Seite aus einer Vielzahl von Quellen, einschlie\u00dflich existierender Seiten, API-Aufrufe und Flatfiles \u00fcber GraphQL und erstellt die statische Seite basierend auf den von dir angegebenen Konfigurationseinstellungen.<\/p>\n

Gatsby wurde erst vor einem Jahr entwickelt, aber eine gro\u00dfe 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<\/a> wird von Gatsby betrieben, obwohl die eigentlichen Blogeintr\u00e4ge auf Medium gehostet werden.<\/p>\n

\"Airbnb's
Airbnb’s Engineering & Data Science Blog<\/figcaption><\/figure>\n

Braun ist eine Marke des Konsumg\u00fcterherstellers P&G. Die kanadische Webseite<\/a> wird bei Gatsby gehostet, w\u00e4hrend die Suchfunktion auf der Seite von React betrieben wird.<\/p>\n

\"Die
Die kanadische Website von Braun<\/figcaption><\/figure>\n

Dar\u00fcber hinaus hat Gatsby auch das Interesse von freiberuflichen Entwicklern<\/a> f\u00fcr ihre Portfolios<\/a> geweckt. Portfolios wie das von Jacob Castro<\/a> haben in erster Linie statischen Inhalt mit Links zu Werken und Kontakt \u00fcber E-Mail, so dass eine statische Seite perfekt zu seinen Bed\u00fcrfnissen passt.<\/p>\n

\"Jacob
Jacob D. Castros Portfolio<\/figcaption><\/figure>\n

Warum Gatsby W\u00e4hlen?<\/h3>\n

Schnelle Webseiten<\/strong>: Der Hauptvorteil bei der Erstellung einer statischen Webseite mit Gatsby ist die Geschwindigkeit<\/a>, die die Webmaster seit Googles Ank\u00fcndigung, die Geschwindigkeit der Webseite im Web-Such-Ranking<\/a> zu nutzen, zu optimieren versuchen. Die Ladezeiten wirken sich auch auf Seitenaufrufe und Conversions aus. Es wurde gesch\u00e4tzt, dass eine Verz\u00f6gerung von einer Sekunde bei der Ladezeit der Webseite zu einer Reduzierung der Conversions um 7% f\u00fchren<\/a> kann.<\/p>\n

Sicherheit<\/strong>: Mit einer statischen Webseite bekommt man auch zus\u00e4tzliche Sicherheit<\/a>. Da es sich um einen Haufen von statischen Dateien handelt, die bereitgestellt werden, gibt es nicht viel zu hacken. Au\u00dferdem kannst du die statischen Dateien jederzeit neu generieren, wenn sie verloren gehen.<\/p>\n

Server Kosten<\/strong>: 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.<\/p>\n

Die Generierung der statischen Webseite mit Gatsby bei jeder \u00c4nderung erfordert JavaScript, was auch auf einem lokalen Rechner geschehen kann, bevor die statischen Dateien auf die Webseite \u00fcbertragen werden.<\/p>\n

Warum Gatsby Meiden?<\/h3>\n

Kein Dynamic Content Built-In<\/strong>: Wenn du Gatsby verwenden m\u00f6chtest, musst du neu \u00fcberdenken, wie du dynamische Inhalte kontrollieren und ausliefern kannst, d.h. du musst eine Mischung aus statisch\/dynamisch<\/a> erstellen, um das zu erreichen (mehr dazu weiter unten).<\/p>\n

Zum Beispiel m\u00fcssen Kommentare<\/a> extern durch einen Dienst wie Disqus<\/a> bereitgestellt werden.<\/p>\n

Kontaktformulare<\/a> m\u00fcssten auch \u00fcber einen externen Partner wie Google Forms umgeleitet werden. Kurz gesagt, du w\u00fcrdest die direkte Kontrolle \u00fcber solche dynamischen Inhalte verlieren, da deren Antworten nicht auf deinen Servern gespeichert werden.<\/p>\n

H\u00e4ufig genutzte Bl\u00f6cke sind unpraktisch<\/strong>: Auch statische Webseiten haben das Problem der h\u00e4ufigen Neukonvertierung. Jede \u00c4nderung, die du auf deiner Seite durchf\u00fchrst, wird erst dann reflektiert, wenn du die Seiten neu generiert und auf den Server geladen hast.<\/p>\n

Technische Kompetenz<\/strong>: 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.<\/p>\n

Statische Webseiten<\/a> sind gut f\u00fcr diejenigen, die eine kosteng\u00fcnstige L\u00f6sung mit hoher Sicherheit suchen. Einige Anwendungsf\u00e4lle sind Portfolio Webseiten f\u00fcr Freiberufler und Produkt-Demoseiten.<\/p>\n

Wenn du denkst, die Vorteile \u00fcberwiegen die Nachteile, gro\u00dfartig! Wir werden nun versuchen, Gatsby so einzurichten, dass es sich in unsere WordPress-Seite<\/a> integrieren l\u00e4sst.<\/p>\n

Die neueste Version der Gatsby-Seite, die wir in diesem Tutorial erstellen, ist auf GitHub verf\u00fcgbar<\/a>.<\/p>\n

Schritt 1: Einrichten von Gatsby<\/h2>\n

In diesem Abschnitt sehen wir uns an, wie man Gatsby installiert und eine grundlegende statische Webseite mit Gatsby erstellt.<\/p>\n

Voraussetzungen<\/h3>\n

Der erste Schritt f\u00fcr den Einstieg in Gatsby ist die \u00dcberpr\u00fcfung der Voraussetzungen. Gatsby wird \u00fcber npm, den NodeJS-Paketinstaller, bedient. Daher ben\u00f6tigt man vor der Installation von Gatsby NodeJS und npm in der Umgebung. Au\u00dferdem muss f\u00fcr Gatsby das Quellcodeverwaltungssystem Git<\/a> installiert werden.<\/p>\n