So installierst du das Gatsby.js Node Framework auf Ubuntu 22.04

GatsbyJS oder Gatsby ist ein freies und quelloffenes Framework, mit dem du blitzschnelle, moderne Apps und Websites mit React erstellen kannst. Gatsby ist für moderne Website-Technologien wie Core Web Vitals und Lighthouse Score optimiert. Es basiert auf ReactJS, Webpack, Javascript und CSS. Außerdem sorgt es für eine schnelle Ladezeit deiner Inhalte und wird durch umfangreiche Bibliotheken und Plugins unterstützt.

GatsbyJS macht deinen Entwicklungsprozess noch schneller. Es bietet ein Starterpaket und Vorlagen für deine Websites oder Anwendungen. GatsbyJS ist ein Framework für den Aufbau von Headless CMS und unterstützt mehrere CMS-Backends wie WordPress, Contentful, Drupal, Shopify, Strapi, Ghost und NetlifyCMS. GatsbyJS kombiniert die Kontrolle und Skalierbarkeit von dynamisch gerenderten Websites mit der Geschwindigkeit von statisch generierten Websites oder Anwendungen.

In diesem Tutorial lernst du, wie du Gatsby.js auf einem Ubuntu 22.04 Rechner installierst und einrichtest.

Voraussetzungen

• Ein Ubuntu 22.04 Rechner – Du kannst die Desktop- oder die Serverversion verwenden.
• Ein Root- oder Administrator-Benutzer.

Neuen Benutzer einrichten

Zunächst legst du einen neuen Linux-Benutzer auf deinem System an, der für die Ausführung des Gatbs.js-Projekts/der Gatbs.js-Anwendung verwendet werden soll. In dieser Demo wirst du einen neuen Benutzer namens„alice“ anlegen.

Führe den folgenden Befehl aus, um den neuen Benutzer alice anzulegen.

useradd -m -s /bin/bash alice

Richte nun das Passwort für den Benutzer alice mit dem folgenden Befehl ein.

passwd alice

Füge den Benutzer„alice“ zur Gruppe„sudo“ hinzu und erlaube dem Benutzer„alice„, den Befehl „sudo su“ auszuführen und die Rechte von root/administrator zu erhalten.

sudo usermod -aG sudo alice

Melde dich nun als Benutzer alice mit dem unten stehenden Befehl an und führe den Befehl sudo su aus, um die Root-Administratorrechte zu prüfen und zu bestätigen.

su - alice
sudo su

Gib das Passwort für den Benutzer alice ein und drücke ENTER. Wenn du eine neue Eingabeaufforderung wie„root@ubuntu-machine“ erhältst, hast du erfolgreich die Root-Rechte erhalten.

Gib den Befehl exit ein oder drücke die Tastenkombination Strg+d, um die Root-Rechte zu verlassen und du erhältst die normale Eingabeaufforderung als Benutzer alice.

Installation von nvm (Node Version Manager) und Node.js

Gatsby.js ist ein JavaScript-Framework, das in Node.js geschrieben wurde, und jetzt wirst du Node.js auf deinem Ubuntu-System installieren.

Es gibt mehrere Möglichkeiten, Node.js auf dem Ubuntu-System zu installieren. Dazu gehören die Verwendung von Node.js aus dem offiziellen APT-Ubuntu-Repository, die Verwendung von Drittanbieter-Repositories wie nodesource und die Verwendung des NVM (Node Version Manager).

In diesem Beispiel wirst du Node.js mit dem NVM (Node Version Manager) installieren. Und zwar unter dem Benutzer alice, den du im ersten Schritt angelegt hast.

Aktualisiere dein Ubuntu-Repository und installiere dann das Paket curl mit den folgenden Befehlen auf deinem System.

sudo apt update
sudo apt install curl

Lade nun das NVM-Installationsskript mit dem curl-Befehl herunter und führe es aus.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Sobald der Prozess abgeschlossen ist, siehst du eine Meldung wie im folgenden Screenshot. Wie du siehst, lädt das Installationsprogramm den NVM-Quellcode in dein Home-Verzeichnis herunter und fügt einige Konfigurationen in die Datei ~/.bashrc ein.

Führe nun den folgenden Befehl aus, um die Datei ~/.bashrc zu bearbeiten und deine aktuelle Bash-Shell-Sitzung neu zu laden. Dadurch werden auch die neuen Änderungen in der ~/ .bashrc-Konfigurationsdateiübernommen und du kannst den NVM sofort ausführen, ohne dich von der aktuellen Sitzung abzumelden.

source ~/.bashrc

Führe nun den unten stehenden nvm-Befehl aus, um die Installation des nvm (Node Version Manager) zu prüfen und zu verifizieren.

nvm --version
nvm --help

Wenn du die Ausgabe der NVM-Version und Hilfemeldungen für den nvm-Befehl erhältst, ist deine Installation erfolgreich und du kannst Node.js installieren.

Führe den folgenden nvm-Befehl aus, um Node.js v16 auf deinem System zu installieren. Diese Installation betrifft nur die Umgebung des Benutzers alice.

nvm install 16

Jetzt kannst du sehen, dass der NVM die Binärdatei von Node.js v16 herunterlädt und die Installation automatisch für den Benutzer alice konfiguriert.

Wenn der Vorgang abgeschlossen ist, führe den folgenden Befehl aus, um die Standardversion von Node.js auf v16zu setzen.

nvm use 16

Abschließend kannst du die Node.js-Version und die NPM-Version mit dem folgenden Befehl überprüfen und kontrollieren.

node --version
npm --version

Wie du auf dem folgenden Screenshot sehen kannst, ist Node.js v16 jetzt auf dem Ubuntu-Rechner unter dem Benutzer alice installiert. Und du hast Node.js mithilfe des NVM (Node Version Manager) installiert.

Gatsby-CLI installieren

Gatsby-CLI ist ein Befehlsstarter für Gatsby-Anwendungen. Mit ihr kannst du ein neues Gatsby-Projekt starten und erstellen, den Entwicklungsserver für Gatsby betreiben und deine Gatsby-Anwendung für das Deployment ausbauen.

Die Gatsby-CLI kann über das npm Node.js Repository installiert werden.

Führe den folgenden npm-Befehl aus, um die gatsby-cli in deiner lokalen Umgebung zu installieren.

npm -g install gatsby-cli

Nachdem die Installation abgeschlossen ist, führe den folgenden gatsby-Befehl aus, um die Version zu prüfen und die Installation der Gatsby-CLI zu verifizieren.

gatsby --version

Unten siehst du, dass du die Gatsby-CLI v4.15installiert hast .

Außerdem musst du den folgenden Befehl ausführen, um die Telemetrie und das Reporting für die anonyme Datennutzung in deinem Gatsby-Projekt zu deaktivieren.

gatsby telemetry --disable

Erste Website mit Gatsbyjs erstellen

Nachdem du die Installation von Gatsby-CLI abgeschlossen hast, kannst du nun die erste Anwendung/das erste Projekt mit Gatsby erstellen.

Führe den folgenden gatsby-Befehl aus, um ein neues erstes Projekt mit Gatsby zu erstellen.

gatsby new

Nun wirst du aufgefordert, einige Einstellungen für dein Gatsby-Projekt vorzunehmen:

• Gib den Titel für deine neue Gatsby-Site/dein neues Gatsby-Projekt ein, in diesem Beispiel„Test Gatsby Site„.
• Gib den Verzeichnisnamen für dein neues Gatsby-Projekt ein. In diesem Beispiel wird das Verzeichnis „Test-Site“ sein.
• Wähle die Programmiersprache für dein neues Gatsby-Projekt. Du kannst wählen, ob JavaScript oder TypeScript. In diesem Beispiel wird JavaScript verwendet.
• Für das CMS-Backend kannst du die Option„Nein (oder ich füge es später hinzu)“ wählen. Gatsby unterstützt verschiedene Arten von CMS-Backends wie WordPress, Ghost, etc.
• Für das Interface Styling System kannst du das Framework nach deinem Geschmack auswählen. In diesem Beispiel wirst du „Theme UI“ verwenden.

Und nun beginnt die Installation der Abhängigkeiten für dein neues Gatsby-Projekt.

Wenn der Prozess abgeschlossen ist, siehst du die Ausgabe wie auf dem folgenden Screenshot. Außerdem erhältst du ein neues Verzeichnis namens„test-site„, das den gesamten Quellcode und die Konfiguration für dein Gatsby-Projekt enthält.

Wechsle nun das Arbeitsverzeichnis in„test-site“ und starte den Gatsby-Entwicklungsserver mit den folgenden Befehlen.

cd test-site/
gatsby develop -H 192.168.10.15

Mit der Option -H 192.168.10.15 gibst du die Bindungsadresse für deinen lokalen Gatsby-Entwicklungsserver an. Außerdem verwendest du den Standard-Port 8000 für dein Gatsby-Projekt.

Im folgenden Screenshot kannst du den gesamten Prozess deines Gatsby-Projekts sehen. Und am Ende siehst du die Meldung, dass du auf dein Gatsby-Projekt unter der Adresse http://192.168.10.15:8000 zugreifen kannst .

Öffne deinen Webbrowser und rufe die Adresse deines Gatsby-Projekts auf (z.B. http://192. 168.10.15:8000/).

Jetzt siehst du die Standard-Startseite deines Gatsby-Projekts.

Fazit

Herzlichen Glückwunsch! Du hast Gatsby nun erfolgreich auf dem neuesten Ubuntu 22.04 Rechner installiert. Außerdem hast du gelernt, wie du Node.js mit dem NVM (Node Version Manager) einrichten und installieren kannst. Schließlich hast du auch gelernt, wie du mit Gatsby ein neues Projekt/eine neue Website erstellst und den Entwicklungsserver des Gatsby-Projekts startest.