Jak zainstalować Gatsby na Ubuntu 20.04

W tym artykule wyjaśnimy, jak zainstalować Gatsby na Ubuntu 20.04.

Gatsby to oparta na React platforma open source do tworzenia stron internetowych i aplikacji. To świetne rozwiązanie, niezależnie od tego, czy tworzysz witrynę z portfolio lub bloga, sklep e-commerce o dużym natężeniu ruchu lub stronę główną firmy. Twórz niesamowicie szybkie strony internetowe i aplikacje ORAZ wykorzystaj moc ponad 2000 wtyczek. Twórz witryny z wybranymi usługami, takimi jak Shopify, Stripe i WordPress, szybko i łatwo dzięki ponad 2000 wtyczek Gatsby. Integruj dane z dowolnego miejsca: interfejsy API, bazy danych, systemy CMS, pliki statyczne — lub wiele źródeł jednocześnie

Ten artykuł poprowadzi Cię przez proces instalacji i wdrożenie domyślnej strony startowej Gatsby.

Warunki wstępne

• Ubuntu 20.04 zainstalował dedykowany serwer lub KVM VPS.
• Użytkownik root lub zwykły użytkownik z uprawnieniami administratora sudo.

Zainstaluj Gatsby na Ubuntu 20.04

Krok 1 — Aktualizuj serwer

# apt update -y && apt upgrade -y

Krok 2 - Zainstaluj NodeJS i NPM

Zainstaluj najnowszą stabilną wersję NodeJS.

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

# apt-get install -y nodejs

Sprawdź, czy instalacja się powiodła.

# node -v && npm -v

Wyjście:

v15.9.0
7.5.4

Krok 3 - Zainstaluj gatsby-cli

Gatsby CLI ( gatsby-cli ) jest spakowany jako plik wykonywalny, którego można używać globalnie. Gatsby CLI jest dostępny za pośrednictwem npm . Uruchom następujące polecenie, aby zainstalować gatsby-cli :

# npm install -g gatsby-cli

Sprawdź instalację:

# gatsby --version

Wyjście:

# Gatsby CLI version: 2.19.1

Krok 4 — Wdróż nową witrynę

Aby wygenerować nową witrynę Gatsby, uruchom następujące polecenie:

# gatsby new

Wyjście:

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

CLI uruchomi interaktywną powłokę, prosząc o te opcje przed utworzeniem dla Ciebie witryny Gatsby. Wybierz i wypełnij zgodnie z wymaganiami Twojej witryny. Utworzy witrynę Gatsby i katalog w /root .

Zobacz wszystkie polecenia na https://www.gatsbyjs.com/docs/gatsby-cli/

Tworzenie strony od podstaw

Aby utworzyć witrynę Gatsby o nazwie my-awesome-site przy użyciu domyślnego startera, uruchom następujące polecenie:

# gatsby new my-awesome-site

Powyższe polecenie utworzy katalog my-awesome-site w /root .

Więcej informacji znajdziesz w dokumentacji startowej Gatsby'ego.

Rozwijać

Po zainstalowaniu witryny Gatsby przejdź do katalogu głównego swojego projektu i uruchom serwer programistyczny za pomocą następującego polecenia:

# cd my-awesome-site

# gatsby develop -H 0.0.0.0

Opcje:

• -H, --host Ustawia hosta. Domyślnie do localhost
• -p, --port Ustaw port. Domyślnie env.PORT lub 8000
• -o, --open Otwórz stronę w Twojej (domyślnej) przeglądarce
• -S, --https Użyj HTTPS

Możesz teraz wyświetlić moją-awesome-site w przeglądarce.

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

Budować

W katalogu głównym witryny Gatsby skompiluj swoją aplikację i przygotuj ją do wdrożenia:

# gatsby build

Opcje

• --prefix-paths Zbuduj witrynę z prefiksem ścieżek linków (ustaw pathPrefix w swojej konfiguracji)
• --no-uglify Buduj witrynę bez brzydkich pakietów JS (do debugowania)
• --profile Zbuduj witrynę z profilowaniem React. Zobacz profilowanie wydajności witryny za pomocą React Profiler
• --open-tracing-config-file Plik konfiguracyjny Tracer (zgodny z OpenTracing). Zobacz śledzenie wydajności
• --graphql-tracing Śledź (patrz wyżej) każdy resolver graphql, może mieć wpływ na wydajność.
• --no-color, --no-colors Wyłącza kolorowe wyjście terminala

Otóż ​​to. Instalacja została pomyślnie zakończona.