Как установить Gatsby на Ubuntu 20.04

В этой статье мы объясним, как установить Gatsby на Ubuntu 20.04.

Gatsby - это платформа с открытым исходным кодом на основе React для создания веб-сайтов и приложений. Это здорово, создаете ли вы сайт-портфолио или блог, или интернет-магазин с высокой посещаемостью, или домашнюю страницу компании. Создавайте невероятно быстрые веб-сайты и приложения И используйте возможности более 2000 плагинов. Создавайте сайты с такими сервисами, как Shopify, Stripe и WordPress, быстро и легко с помощью плагинов Gatsby 2000+. Интегрируйте данные из любого места: API, базы данных, CMS, статические файлы или несколько источников одновременно

Эта статья проведет вас по процессу установки и развертыванию начального сайта Gatsby по умолчанию.

Предпосылки

• Установленный выделенный сервер Ubuntu 20.04 или KVM VPS.
• Пользователь root или обычный пользователь с правами администратора sudo.

Установите Gatsby на Ubuntu 20.04

Шаг 1. Поддерживайте сервер в актуальном состоянии

# apt update -y && apt upgrade -y

Шаг 2 - Установите NodeJS и NPM

Установите последний стабильный выпуск NodeJS.

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

# apt-get install -y nodejs

Убедитесь, что установка прошла успешно.

# node -v && npm -v

Выход:

v15.9.0
7.5.4

Шаг 3 - Установите gatsby-cli

Интерфейс командной строки Gatsby ( gatsby-cli ) упакован как исполняемый файл, который можно использовать глобально. Интерфейс командной строки Gatsby доступен через npm . Выполните следующую команду, чтобы установить gatsby-cli :

# npm install -g gatsby-cli

Проверьте установку:

# gatsby --version

Выход:

# Gatsby CLI version: 2.19.1

Шаг 4 - Разверните новый сайт

Чтобы создать новый сайт Gatsby, выполните следующую команду:

# gatsby new

Выход:

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

Интерфейс командной строки запустит интерактивную оболочку, запрашивающую эти параметры, прежде чем создавать для вас сайт Gatsby. Выберите и заполните в соответствии с требованиями вашего сайта. Он создаст сайт и каталог Gatsby в / root .

См. Все команды на https://www.gatsbyjs.com/docs/gatsby-cli/

Создание сайта с нуля

Чтобы создать сайт Gatsby с именем my-awesome-site с использованием стартера по умолчанию, выполните следующую команду:

# gatsby new my-awesome-site

Вышеупомянутая команда создаст каталог my-awesome-site в / root .

Дополнительную информацию см. В документации для начинающих по Гэтсби.

Развивать

После того, как вы установили сайт Gatsby, перейдите в корневой каталог вашего проекта и запустите сервер разработки, используя следующую команду:

# cd my-awesome-site

# gatsby develop -H 0.0.0.0

Параметры:

• -H, --host Установить хост. По умолчанию localhost
• -p, --port Установить порт. По умолчанию env.PORT или 8000
• -o, --open Открыть сайт в вашем браузере (по умолчанию).
• -S, --https Использовать HTTPS

Теперь вы можете просматривать my-awesome-site в браузере.

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

Строить

В корне сайта Gatsby скомпилируйте свое приложение и подготовьте его к развертыванию:

# gatsby build

Параметры

• --prefix-paths Создать сайт с префиксом путей ссылок (установите pathPrefix в вашей конфигурации)
• --no-uglify Создать сайт без удаления пакетов JS (для отладки)
• --profile Создать сайт с реактивным профилированием. См. Профилирование производительности сайта с помощью React Profiler
• --open-tracing-config-file Файл конфигурации Tracer (совместим с OpenTracing). См. Отслеживание производительности
• --graphql-tracing Отслеживать (см. выше) каждый преобразователь graphql, может влиять на производительность.
• --no-color, --no-colors Отключает цветной вывод терминала

Вот и все. Установка была успешно завершена.