Comment installer Gatsby sur Ubuntu 20.04

Dans cet article, nous expliquerons comment installer Gatsby sur Ubuntu 20.04.

Gatsby est un framework open source basé sur React pour la création de sites Web et d'applications. C'est génial que vous créiez un site ou un blog de portefeuille, ou une boutique de commerce électronique à fort trafic ou une page d'accueil d'entreprise. Créez des sites Web et des applications ultra-rapides ET exploitez la puissance de plus de 2000 plugins. Créez des sites avec les services que vous souhaitez, comme Shopify, Stripe et WordPress, rapidement et facilement avec les plus de 2000 plugins de Gatsby. Intégrez des données de n'importe où : API, bases de données, CMS, fichiers statiques — ou plusieurs sources à la fois

Cet article vous guidera avec le processus d'installation et le déploiement du site de démarrage par défaut de Gatsby.

Conditions préalables

• Un serveur dédié installé Ubuntu 20.04 ou KVM VPS.
• Un utilisateur root ou un utilisateur normal avec des privilèges d'administrateur sudo.

Installer Gatsby sur Ubuntu 20.04

Étape 1 - Maintenez le serveur à jour

# apt update -y && apt upgrade -y

Étape 2 - Installez NodeJS et NPM

Installez la dernière version stable de NodeJS.

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

# apt-get install -y nodejs

Vérifiez que l'installation est réussie.

# node -v && npm -v

Sortir:

v15.9.0
7.5.4

Étape 3 - Installer gatsby-cli

L'interface de ligne de commande Gatsby ( gatsby-cli ) est conditionnée en tant qu'exécutable pouvant être utilisé globalement. La CLI Gatsby est disponible via npm . Exécutez la commande suivante pour installer gatsby-cli :

# npm install -g gatsby-cli

Vérifiez l'installation :

# gatsby --version

Sortir:

# Gatsby CLI version: 2.19.1

Étape 4 - Déployer le nouveau site

Pour générer un nouveau site Gatsby, exécutez la commande suivante :

# gatsby new

Sortir:

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

La CLI exécutera un shell interactif demandant ces options avant de créer un site Gatsby pour vous. Choisissez et remplissez selon les exigences de votre site Web. Il créera un site et un répertoire Gatsby dans /root .

Voir toutes les commandes sur https://www.gatsbyjs.com/docs/gatsby-cli/

Créer un site à partir d'un starter

Pour créer un site Gatsby nommé my-awesome-site à l'aide du démarreur par défaut, exécutez la commande suivante :

# gatsby new my-awesome-site

La commande ci-dessus créera un répertoire my-awesome-site dans /root .

Voir les docs de démarrage de Gatsby pour plus de détails.

Développer

Une fois que vous avez installé un site Gatsby, allez dans le répertoire racine de votre projet et démarrez le serveur de développement à l'aide de la commande suivante :

# cd my-awesome-site

# gatsby develop -H 0.0.0.0

Options :

• -H, --host Définir l'hôte. Par défaut localhost
• -p, --port Définit le port. Par défaut env.PORT ou 8000
• -o, --open Ouvre le site dans votre navigateur (par défaut) pour vous
• -S, --https Utiliser HTTPS

Vous pouvez maintenant voir my-awesome-site dans le navigateur.

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

Construire

À la racine d'un site Gatsby, compilez votre application et préparez-la au déploiement :

# gatsby build

Options

• --prefix-paths Créer un site avec des chemins de liens préfixés (définir pathPrefix dans votre configuration)
• --no-uglify Construire le site sans uglifier les bundles JS (pour le débogage)
• --profile Créer un site avec le profilage de réaction. Voir Profilage des performances du site avec React Profiler
• --open-tracing-config-file Fichier de configuration du traceur (compatible OpenTracing). Voir Suivi des performances
• --graphql-tracing Trace (voir ci-dessus) chaque résolveur graphql, peut avoir des implications sur les performances.
• --no-color, --no-colors Désactive la sortie du terminal coloré

C'est ça. L'installation s'est terminée avec succès.