Was ist Gatsby? Ist es ein WordPress-Konkurrent?

Was ist Gatsby?


Mit so vielen Optionen zum Erstellen einer Website oder eines Blogs im Jahr 2020 gibt es dieses neue Ding namens Gatsby – den jüngsten Spieler des Spiels, der möglicherweise eine Alternative zu den klassischen Pfaden von WordPress, Joomla und vielen anderen darstellt. Oder ist es? Was ist Gatsby überhaupt? Wie einfach ist es, eine Site auf Gatsby einzurichten und bereitzustellen? Wie vergleicht sich Gatsby mit WordPress? Das sind viele Fragen, die beantwortet werden müssen.

Dies ist eine Schritt-für-Schritt-Anleitung für den Einstieg in Gatsby sowie für den Vergleich mit WordPress. Am Ende dieses Beitrags sollten Sie in der Lage sein zu beantworten, ob Gatsby Ihren Website-Anforderungen entspricht.

Was ist Gatsby??

Gatsby

Die einfachste Antwort auf die "Was ist Gatsby?" Frage ist dies: Gatsby (aka. GatsbyJS) ist ein statischer Site-Generator, der auf ReactJS basiert.

In der einfachsten Definition ist eine statische Website eine Gruppe von HTML-Seiten, die beim Besuch eines Betrachters keine Daten aus einer Datenbank abruft. Somit sieht eine statische Site für jeden Besucher gleich aus. Statische Sites lassen sich auch schneller laden, da der Server jedem Besucher die gleiche Antwort sendet. Sie können jedoch keine Inhalte für Besucher anpassen.

Andererseits ist eine mit WordPress gehostete Website dynamisch, was bedeutet, dass der angezeigte Inhalt vom Besucher abhängig ist. Der Server analysiert jede Anfrage und entscheidet, wie er reagiert.

�� Die Idee eines "statische WordPress-Website" ist etwas, das wir in einem der vorherigen Beiträge in diesem Blog untersucht haben – aka. kopfloses WordPress. Gatsby ist eine weitere Technologie, die statisches WordPress oder eine statische Alternative zu WordPress ermöglicht.

Erste Schritte mit Gatsby

Okay, jetzt, da wir wissen, was Gatsby ist, lernen wir, wie wir am besten damit anfangen können:

Gatsby wurde mit React erstellt, daher sind einige Kenntnisse in JavaScript und seinen Frameworks erforderlich, bevor Sie wirklich loslegen können. Hier ist ein Tutorial zu JavaScript für einen WordPress-Entwickler.

Bevor Sie die Entwicklungsversion Ihrer Site auf Gatsby erstellen, müssen Sie zunächst Ihr System für die Installation von Gatsby vorbereiten. Da Gatsby mit React erstellt wurde, erfolgt die Paketverwaltung über npm, was Teil jeder NodeJS-Installation ist.

Wenn Ihr Entwicklungscomputer unter Windows oder MacOS ausgeführt wird, können Sie einfach einen von verwenden die Installationsprogramme auf der NodeJS-Downloadseite. In einer Linux-Umgebung können Sie ein Paketinstallationsprogramm wie yum oder apt verwenden, um es zu installieren.

sudo apt update
sudo apt install nodejs npm

Darüber hinaus müssen Sie bei Gatsby Git, ein Tool zur Versionskontrolle, installieren, um eine Entwicklungswebsite erstellen zu können. Gehe zum Download-Seite von Git um das Installationsprogramm zu erhalten. Beachten Sie, dass Sie Git möglicherweise noch separat installieren müssen, wenn Sie bereits einen GUI-Agenten für Git verwenden, z. B. GitHub Desktop oder SourceTree, um ihn als Befehl auf dem Terminal zu verwenden.

Mit den installierten Anforderungen können Sie endlich Gatsby installieren! Hier ist eine Kurzanleitung aus der Gatsby-Dokumentation.

Öffnen Sie die NodeJS-Eingabeaufforderung, die Teil der Anwendung in Windows ist und die Sie über Ihr Startmenü ausführen können. In einem Unix-basierten System wie Linux oder MacOS können Sie den Befehl nodejs in das Terminal eingeben, um die NodeJS-Eingabeaufforderung zu starten. Verwenden Sie zum Installieren von GatsbyJS das Installationsprogramm npm. Die Option -g stellt das Paket allen Benutzern in Ihrem System zur Verfügung.

npm install -g gatsby-cli

Das Installationsprogramm kümmert sich um alle Abhängigkeiten für das Paket. Nach erfolgreicher Installation können Sie Ihre erste GatsbyJS-Site erstellen.

Erstellen Sie Ihre erste Gatsby-Site

Um eine Gatsby-Site zu erstellen, müssen Sie den folgenden Befehl in der NodeJS-Eingabeaufforderung ausführen.

gatsby neue my-site

Dies ist der Schritt, der Git erfordert. Wenn Sie eine neue Gatsby-Instanz erstellen, werden Daten von geklont das Standard-Starter-Thema von Gatsby und speichert es in einem Verzeichnis my-site. Wir werden Gatsby-Starterthemen im nächsten Abschnitt diskutieren.

Um eine Vorschau der Entwicklungsversion der Website anzuzeigen, ändern Sie das Active Directory in das neu erstellte My-Site-Verzeichnis und führen Sie den Entwicklungsserver aus.

cd my-site
gatsby entwickeln

Wenn Sie eine Erfolgsmeldung erhalten, gehen Sie zu http: // localhost: 8000, um die aktuelle Version Ihrer Website zu überprüfen. Es wird höchstwahrscheinlich ungefähr so ​​aussehen:

Erste Seite

Bevor wir Änderungen am Inhalt vornehmen, lassen Sie uns einen Produktionsbuild für die Website erstellen. Verwenden Sie den folgenden Befehl, um die Erstellung statischer Seiten für Ihre Website zu starten:

Gatsby bauen

Sie werden feststellen, dass die statischen Dateien in einem öffentlichen Verzeichnis auf meiner Website erstellt werden. Um einen lokalen HTML-Server zu starten und Ihre Website in einer statischen, produktionsbereiten Form anzuzeigen, müssen Sie den folgenden Befehl verwenden. Beachten Sie, dass Sie den Befehl build verwenden müssen, bevor Sie Serve ausführen.

Gatsby dienen

Wie in der Erfolgsmeldung angegeben, können Sie unter http: // localhost: 9000 die statische Version Ihrer neu erstellten Website überprüfen.

Gatsby Vorspeisen und Themen

Wenn Sie Ihre leere Gatsby-Site installiert haben, hat sie die geklont Standard-Starter-Vorlage von GitHub. Starter sind voll funktionsfähige Gatsby-Sites, die über die Gatsby-CLI geklont und wiederverwendet werden können. Sie können sich einen Starter wie eine erste Vorlage vorstellen, auf der Sie Ihre Website aufbauen können. Die GatsbyJS-Community hat viele Starter aufgebaut, die verschiedene Anforderungen wie Blogging, E-Commerce und Dokumentation berücksichtigen.

Gatsby behauptet eine Starterbibliothek um alle Starter zu dokumentieren, die man verwenden darf. Ab April 2019 stehen über 150 Vorspeisen zur Auswahl!

Gatsby Vorspeisen

Während Starter eine großartige Plattform für Benutzer bieten, um praktisch in kürzester Zeit eine Website zu erstellen, sind sie in den ernsthafteren Entwicklungsszenarien keine wirklich gute Idee. Der Hauptgrund dafür ist die Unfähigkeit, Starter im Laufe der Zeit zu aktualisieren.

Ende 2018 Gatsby führte das Konzept der Themen ein. Es ermöglichte die Verwendung der Datei gatsby-config.js, um ein wiederverwendbares Thema zu erstellen. Dies ist eine große Veränderung in Bezug auf Gatsby und seine Fähigkeiten, insbesondere im Vergleich zu WordPress.

Es gibt eine Community von Entwicklern Für Gatsby-Themes muss jedoch noch viel getan werden, um produktionsbereite Themes zu erhalten – etwas, das mit WordPress überhaupt kein Problem darstellt.

Migration nach Gatsby

Der einfachste Weg, Beiträge in Gastby aufzunehmen, ist Markdown. Unabhängig von Ihrem Blog müssen Sie Ihre Ergebnisse in das Markdown-Format exportieren, um dann alles nach Gatsby zu migrieren.

Abgesehen davon bieten die meisten Website-Plattformen, einschließlich WordPress, keine sofortigen Markdown-Exporte an. Daher müssen Sie Ihre Inhalte zuerst in HTML oder XML exportieren und erst dann alles in Markdown konvertieren. Sobald Ihre Markdown-Seiten fertig sind, klicken Sie hier eine Anleitung zum Hinzufügen einer Liste von Markdown-Posts nach Gatsby.

Wenn Sie WordPress und Gatsby auf Ihrem Entwicklungscomputer installiert haben, können Sie das Paket gatsby-wordpress-migrate auf npm untersuchen. Die Paketseite enthält Anweisungen dazu von WordPress migrieren.

Darüber hinaus kann die Migration von einer neueren Version von WordPress mithilfe der WordPress-REST-API einfacher sein. Hier finden Sie eine Schritt-für-Schritt-Anleitung So verwenden Sie GraphQL und die WordPress Rest API, um Beiträge aus Ihrem WordPress-Blog abzurufen nach Gatsby.

Gatsbys Vor- und Nachteile

Die Verwendung von Gatsby bietet bestimmte Vorteile, die potenzielle Benutzer ansprechen können. Eine mit Gatsby erstellte Site ist im Wesentlichen eine Einzelseitenanwendung. Das bedeutet, dass durch Klicken auf einen internen Link keine vollständig neue Ressource geladen werden muss, wodurch wiederum viele HTTP-Anforderungen gespeichert werden. In WordPress müssen Sie bestimmte Best Practices befolgen, um sicherzustellen, dass Ihre Website auf Geschwindigkeit optimiert ist oder dass Ihre Bilder ebenfalls optimiert sind.

In Gatsby beispielsweise erfolgt die Bildoptimierung automatisch. Für den Anfang entfernt Gatsby alle Metadaten aus Bildern, ändert ihre Größe und komprimiert sie und implementiert auch ein verzögertes Laden! In WordPress empfehlen wir die Verwendung eines Dienstes wie Optimole zur Bildoptimierung.

Darüber hinaus erledigt Gatsby auch andere Aufgaben wie das Bündeln und Minifizierung von Ressourcen auf Ihrer Website, bevor Sie sie bereitstellen. Da die Website statisch ist, wird jedes Update in der Produktionsversion angezeigt, sobald ein Push eintrifft.

Insgesamt sind statische Sites auch sicherer, da es im Wesentlichen keinen Ort gibt, in den ein Hacker eindringen kann – abgesehen davon, dass der Server selbst beschädigt wird. Mit WordPress erhält jeder Zugriff auf die im Grunde genommen rohen PHP-Dateien, die für mehrere verschiedene Angriffe anfällig sein können. Bei vielen WordPress-Sites, die mehr als 20 Plugins gleichzeitig verwenden, besteht eine vernünftige Chance, dass eines dieser Plugins ausgenutzt und als Gateway verwendet wird, um in Ihre Site einzudringen. Als ob es nicht so lange her wäre mit dem P3 Plugin.

Gatsby gegen WordPress

An diesem Punkt können wir alle die Hauptunterschiede zwischen Gatsby und WordPress verstehen – einer ist ein statischer Website-Generator und der andere ist ein vollwertige dynamische Website-Engine und CMS, Aber schauen wir uns die einzelnen Aspekte genauer an:

Die einfache Erstellung einer neuen Website mit Gatsby vs WordPress

Im Vergleich zu WordPress würde ich sagen, dass die Installation von Gatsby ein ähnliches Niveau an Fähigkeiten erfordert. In WordPress müssen ein Webserver (Apache), PHP und eine Datenbank installiert sein, bevor Sie mit der Installation von WordPress beginnen können.

Dies gilt insbesondere dann, wenn wir die Installation von WordPress für Entwicklungszwecke diskutieren. Dies bedeutet, dass Sie dies höchstwahrscheinlich tun müssen Installieren Sie WordPress von Hand und nutzen Sie nicht die vorgefertigte WordPress-Installation Ihres Webhosts.

Die einfache Erstellung einer leeren Site mit Gatsby vs WordPress

In Bezug auf Gatsby ist das Erstellen einer leeren Site mit Gatsby im Vergleich zu WordPress etwas schwieriger, da das Terminal verwendet werden muss.

In WordPress haben Sie einen netten Installationsassistenten, der Sie gut durch die Schritte führt, und das einzige, was Sie von Hand tun müssen, ist eine Datenbank vorzubereiten.

Wie vergleichen sich Gatsby-Themen mit WordPress??

Angesichts der Reife des WordPress-Projekts steht eine riesige Sammlung von WordPress-Themen zur Auswahl. Wenn Sie zu Gatsby wechseln, sind Ihre Optionen sehr begrenzt, es sei denn, Sie möchten ein Thema von Grund auf neu entwickeln.

Ganz zu schweigen davon, dass das Installieren und Wechseln von Themen in WordPress sehr einfach ist und das Anpassen auch nicht viel schwieriger ist, selbst wenn Sie absolut keine Programmierkenntnisse haben.

Insgesamt ist es in der Themenabteilung kein Wettbewerb. WordPress dominiert.

Fazit

Okay, ich hoffe, Sie haben Ihre Antwort auf die Frage gefunden "Was ist Gatsby??" Frage hier. Insgesamt bietet Gatsby eine wirklich interessante Alternative für Leute, die WordPress satt haben oder einfach nur testen möchten, was es sonst noch gibt.

Während WordPress in Bezug auf Popularität, Community, Benutzerfreundlichkeit und allgemeine Funktionalität der gesamten Plattform der klare Gewinner ist, bietet Gatsby in seiner nativen Form auch einige hervorragende Funktionen.

Dieses Projekt ist noch sehr jung und fügt regelmäßig neue Funktionen hinzu. Um jedoch die Extras in Gatsby vollständig nutzen zu können, muss man sich mit JavaScript und React vertraut machen, was möglicherweise das größte Hindernis für Gatsbys Übernahme durch die größere Community darstellt.

Vergessen Sie nicht, an unserem Crashkurs teilzunehmen, um Ihre WordPress-Site zu beschleunigen. Mit einigen einfachen Korrekturen können Sie Ihre Ladezeit sogar um 50-80% reduzieren:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map