Как установить Gatsby.js Node Framework на Ubuntu 22.04

На этой странице

1. Предпосылки
2. Настроить нового пользователя
3. Установка nvm (диспетчера версий узлов) и Node.js
4. Установка Gatsby-CLI
5. Создайте первый сайт с помощью Gatsbyjs
6. Заключение

GatsbyJS или Gatsby — это бесплатная платформа с открытым исходным кодом для создания невероятно быстрых современных приложений и веб-сайтов с помощью React. Gatsby оптимизирован для современных технологий веб-сайтов, таких как основные веб-жизненные показатели и маяк. Он основан на ReactJS, Webpack, javascript и CSS. Кроме того, он обеспечивает молниеносную загрузку всего вашего контента и поддерживается обширными библиотеками и плагинами.

GatsbyJS еще больше ускоряет процесс разработки, предоставляя стартовый пакет и шаблоны для ваших веб-сайтов или приложений. GatsbyJS — это платформа для создания безголовой CMS с поддержкой нескольких серверных частей CMS, таких как WordPress, Contentful, Drupal, Shopify, Strapi, Ghost и NetlifyCMS. GatsbyJS сочетает в себе контроль и масштабируемость динамически отображаемых сайтов со скоростью создания статических сайтов для создания веб-сайтов или приложений.

В этом руководстве вы узнаете, как установить и настроить Gatsby.js на компьютере с Ubuntu 22.04.

Предпосылки

• Компьютер с Ubuntu 22.04. Вы можете использовать настольную или серверную версию.
• Пользователь root или администратор.

Настройка нового пользователя

Сначала вы создадите в своей системе нового пользователя Linux, который будет использоваться для запуска проекта/приложения Gatbs.js. В этой демонстрации вы создадите нового пользователя с именем alice.

Выполните следующую команду, чтобы создать нового пользователя alice.

useradd -m -s /bin/bash alice

Теперь установите пароль для пользователя alice с помощью приведенной ниже команды.

passwd alice

Добавьте пользователя alice в группу sudo и разрешите пользователю alice выполнять команду sudo su и получить root /права администратора.

sudo usermod -aG sudo alice

Теперь войдите в систему как пользователь alice с помощью приведенной ниже команды, а также запустите команду sudo su, чтобы проверить права администратора root.

su - alice
sudo su

Введите пароль пользователя alice и нажмите ENTER. Если вы получите новое приглашение, например \[email \, значит, вы успешно получили привилегии суперпользователя.

Введите команду выхода или нажмите Ctrl+d, чтобы выйти из привилегий суперпользователя, и вы получите обычный запрос от имени пользователя alice.

Установка nvm (Node Version Manager) и Node.js

Gatsby.js — это среда JavaScript, написанная на Node.js, и теперь вы будете устанавливать Node.js в свою систему Ubuntu.

Существует несколько способов установки Node.js в системе Ubuntu, включая использование Node.js из официального репозитория APT Ubuntu, использование сторонних репозиториев, таких как nodesource, и использование NVM (Node Version Manager).

В этом примере вы будете устанавливать Node.js с помощью NVM (Node Version Manager). И это вы будете установлены под пользователем alice, которого вы только что создали на первом этапе.

Обновите и обновите репозиторий Ubuntu, затем установите пакет curl в свою систему, используя приведенные ниже команды.

sudo apt update
sudo apt install curl

Теперь загрузите скрипт установки NVM с помощью команды curl и запустите его.

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

Как только весь процесс будет завершен, вы увидите выходное сообщение, как на скриншоте ниже. Как видите, программа установки загружает исходный код NVM в ваш домашний каталог и добавляет некоторую конфигурацию в файл ~/.bashrc.

Теперь выполните приведенную ниже команду, чтобы получить файл ~/.bashrc и перезагрузить текущий сеанс оболочки bash. Кроме того, это применит новые изменения в файле конфигурации ~/.bashrc и позволит вам запускать и выполнять NVM немедленно, без выхода из текущего сеанса.

source ~/.bashrc

Теперь запустите приведенную ниже команду nvm, чтобы проверить установку nvm (Node Version Manager).

nvm --version
nvm --help

Если вы получите вывод версии NVM и справочные сообщения для команды nvm, ваша установка прошла успешно и теперь можно установить Node.js.

Запустите приведенную ниже команду nvm, чтобы установить Node.js v16 в вашу систему. Эта установка повлияет только на среду пользователя alice.

nvm install 16

Теперь вы можете видеть, что NVM загружает двоичный файл Node.js v16 и автоматически настраивает установку для пользователя alice.

Когда весь процесс будет завершен, запустите приведенную ниже команду, чтобы установить версию Node.js по умолчанию на v16.

nvm use 16

Наконец, вы можете проверить и проверить версию Node.js и версию NPM, используя следующую команду.

node --version
npm --version

Как видно на следующем снимке экрана, Node.js v16 теперь установлен на компьютере с Ubuntu под пользователем alice. И вы установили Node.js с помощью NVM (Node Version Manager).

Установка Gatsby-CLI

Gatsby-CLI — это средство запуска команд для приложений Gatsby. Его можно использовать для запуска и создания нового проекта Gatsby, запуска сервера разработки для Gatsby и создания приложения Gatsby для развертывания.

Gatsby-CLI можно установить из репозитория npm Node.js.

Запустите приведенную ниже команду npm, чтобы установить gatsby-cli в локальную среду.

npm -g install gatsby-cli

После завершения установки запустите приведенную ниже команду gatsby, чтобы проверить версию и проверить установку Gatsby-CLI.

gatsby --version

Ниже вы можете видеть, что вы установили Gatsby CLI v4.15.

Кроме того, вы также запускаете приведенную ниже команду, чтобы отключить телеметрию и отчеты об использовании анонимных данных в вашем проекте Gatsby.

gatsby telemetry --disable

Создайте первый сайт с Gatsbyjs

На этом вы завершили установку Gatsby-CLI и теперь готовы создать первое приложение/проект с помощью Gatsby.

Запустите команду gatsby ниже, чтобы создать новый первый проект Gatsby.

gatsby new

Теперь вас попросят настроить ваш проект Gatsby:

• Введите название для вашего нового сайта/проекта Gatsby. этот пример - «Тестовый сайт Гэтсби»
• Введите имя каталога для вашего нового проекта gatsby. В этом примере каталог будет находиться на \тестовой площадке\.
• Выберите язык программирования для своего нового проекта Gatsby. Вы можете выбрать JavaScript или TypeScript. Этот пример будет JavaScript.
• Для серверной части CMS можно выбрать вариант \Нет (или я добавлю позже)\. Gatsby поддерживает различные типы серверной части CMS, такие как WordPress, Ghost и т. д.
• Для системы стилей интерфейса вы можете выбрать фреймворк по своему вкусу. В этом примере вы будете использовать «Интерфейс темы».

И теперь начнется установка зависимостей для вашего нового проекта Gatsby.

Когда весь процесс завершен, вы можете увидеть результат, как на следующем снимке экрана. Кроме того, вы получите новый каталог с именем \test-site\, содержащий весь исходный код и конфигурацию вашего проекта Gatsby.

Теперь измените рабочий каталог на \test-site\ и запустите сервер разработки gatsby с помощью приведенных ниже команд.

cd test-site/
gatsby develop -H 192.168.10.15

Параметр -H 192.168.10.15 указывает адрес привязки для вашего локального сервера разработки Gatsby. Кроме того, вы используете порт по умолчанию 8000 для своего проекта Gatsby.

На приведенном ниже снимке экрана вы можете увидеть полный процесс вашего проекта Gatsby. И в конце вы можете увидеть сообщение о том, что вы можете получить доступ к своему проекту Gatsby по адресу http://192.168.10.15:8000.

Откройте веб-браузер и перейдите по адресу вашего проекта Gatsby (например, http://192.168.10.15:8000/).

И теперь вы можете увидеть домашнюю страницу вашего проекта Gatsby по умолчанию.

Заключение

Поздравляем! Вы успешно установили Gatsby на последней машине с Ubuntu 22.04. Вы также узнали, как настроить и установить Node.js с помощью NVM (Node Version Manager). В конце концов, вы также узнали, как создать новый проект/сайт с помощью Gatsby и запустить сервер разработки проекта Gatsby.