So installieren Sie Gatsby unter Ubuntu 20.04

In diesem Artikel erklären wir, wie Sie Gatsby unter Ubuntu 20.04 installieren.

Gatsby ist ein React-basiertes Open-Source-Framework zum Erstellen von Websites und Apps. Es ist großartig, ob Sie eine Portfolio-Site oder einen Blog erstellen, einen E-Commerce-Shop mit hohem Traffic oder eine Firmenhomepage. Erstellen Sie blitzschnelle Websites und Apps UND nutzen Sie die Leistung von über 2000 Plugins. Erstellen Sie Websites mit den gewünschten Diensten wie Shopify, Stripe und WordPress schnell und einfach mit den über 2000 Plugins von Gatsby. Integrieren Sie Daten von überall: APIs, Datenbanken, CMS, statische Dateien – oder mehrere Quellen gleichzeitig

Dieser Artikel führt Sie durch den Installationsprozess und die Bereitstellung der Standard-Starter-Gatsby-Site.

Voraussetzungen

• Ein Ubuntu 20.04 installierter dedizierter Server oder KVM VPS.
• Ein Root-Benutzer oder normaler Benutzer mit sudo-Administratorrechten.

Installieren Sie Gatsby auf Ubuntu 20.04

Schritt 1 - Halten Sie den Server auf dem neuesten Stand

# apt update -y && apt upgrade -y

Schritt 2 – NodeJS und NPM installieren

Installieren Sie die neueste stabile Version von NodeJS.

# curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash -

# apt-get install -y nodejs

Überprüfen Sie, ob die Installation erfolgreich ist.

# node -v && npm -v

Ausgabe:

v15.9.0
7.5.4

Schritt 3 - Installieren Sie gatsby-cli

Die Gatsby-CLI ( gatsby-cli ) ist als ausführbare Datei verpackt, die global verwendet werden kann. Die Gatsby-CLI ist über npm verfügbar . Führen Sie den folgenden Befehl aus, um gatsby-cli zu installieren :

# npm install -g gatsby-cli

Überprüfen Sie die Installation:

# gatsby --version

Ausgabe:

# Gatsby CLI version: 2.19.1

Schritt 4 – Neue Site bereitstellen

Führen Sie den folgenden Befehl aus, um eine neue Gatsby-Site zu generieren:

# gatsby new

Ausgabe:

create-gatsby version 0.5.1

Welcome to Gatsby!

This command will generate a new Gatsby site for you in /root with the setup you select. Let’s answer some
questions:

What would you like to call your site?
· My Gatsby Site

Die CLI führt eine interaktive Shell aus, die nach diesen Optionen fragt, bevor eine Gatsby-Site für Sie erstellt wird. Wählen und füllen Sie gemäß Ihren Website-Anforderungen. Es wird eine Gatsby-Site und ein Verzeichnis in /root erstellen .

Siehe alle Befehle unter https://www.gatsbyjs.com/docs/gatsby-cli/

Erstellen einer Website aus einem Starter

Um eine Gatsby-Site namens my-awesome-site mit dem Standardstarter zu erstellen , führen Sie den folgenden Befehl aus:

# gatsby new my-awesome-site

Der obige Befehl erstellt ein my-awesome-site- Verzeichnis in /root .

Weitere Informationen finden Sie in den Gatsby-Starterdokumenten.

Entwickeln

Nachdem Sie eine Gatsby-Site installiert haben, gehen Sie in das Stammverzeichnis Ihres Projekts und starten Sie den Entwicklungsserver mit dem folgenden Befehl:

# cd my-awesome-site

# gatsby develop -H 0.0.0.0

Optionen:

• -H, --host Host setzen. Standardmäßig ist localhost
• -p, --port Port setzen. Standardmäßig env.PORT oder 8000
• -o, --open Öffne die Seite in deinem (Standard-)Browser für dich
• -S, --https HTTPS verwenden

Sie können meine-awesome-site jetzt im Browser anzeigen.

Local: http://localhost:8000/
On Your Network: http://192.168.0.102:8000/

Bauen

Kompilieren Sie Ihre Anwendung im Stammverzeichnis einer Gatsby-Site und bereiten Sie sie für die Bereitstellung vor:

# gatsby build

Optionen

• --prefix-paths Build-Site mit Linkpfaden als Präfix (set pathPrefix in Ihrer Konfiguration)
• --no-uglify Build-Site ohne hässliche JS-Bundles (zum Debuggen)
• --profile Site mit React-Profiling erstellen. Siehe Profilerstellung der Site-Leistung mit React Profiler
• --open-tracing-config-file Tracer-Konfigurationsdatei (OpenTracing-kompatibel). Siehe Leistungsverfolgung
• --graphql-tracing Trace (siehe oben) jeden graphql-Resolver, kann Auswirkungen auf die Leistung haben.
• --no-color, --no-colors Deaktiviert die farbige Terminalausgabe

Das ist es. Die Installation wurde erfolgreich abgeschlossen.