jinv.ru

Руководство по Gatsby. Настройка среды разработки. Создание сайта

08 March 2020

Это первый урок из серии “Руководство по Gatsby” и является вольным переводом официального источника: https://www.gatsbyjs.org/tutorial/part-zero/

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

Командная строка

Командная строка—это интерфейс для ввода и выполнения текстовых команд на компьютере. Командную строку также называют терминалом. Интерфейс командной строки на английском пишется как command line interface, сокращенно — CLI.

Интерфейс командной строки (CLI) открывается на локальном компьютере по-разному и зависит от используемой операционной системы см. инструкции для Windows, инструкции для Linux или инструкции для Mac.

Примечание: если вы не работали в командной строке, то “запустить” команду означает “записать заданный набор инструкций в командную строку и нажать клавишу Enter”. Команды будут отображаться в подсвеченном поле, например, node --version, но не каждое подсвеченное поле является командой. Командой будет только то подсвеченное поле, возле которго присутствуют слова “выполнить” либо “запустить”.

Установите Node.js для соответствующей операционной системы

Node.js—среда, которая запускает код JavaScript вне веб-браузера. Gatsby создан с помощью Node.js. Чтобы начать работу с Gatsby, потребуется установить на компьютер последнюю версию Node.js.

Инструкции для Мак

Чтобы установить Gatsby и Node.js на Mac рекомендуется использовать Homebrew.

Как установить или проверить Homebrew на компьютере:

  1. Откройте терминал.
  2. Запустите brew -v, чтобы проверить, установлен ли Homebrew. Вы должны увидеть “Homebrew” и номер версии.
  3. Если нет, загрузите и установите Homebrew в соответствии с инструкциями.
  4. После установки Homebrew повторите шаг 2.

Установка инструментов командной строки Xcode:

  1. Откройте терминал.
  2. Установите инструменты командной строки Xcode, запустив команду xcode-select --install.

  3. После того, как будет предложено начать установку, появится предложение принять лицензию на программу для загрузки инструментов.

Установка Node

  1. Откройте терминал
  2. Запустите brew install node

    • Если вы не хотите устанавливать его через Homebrew, загрузите последнюю версию Node.js с официального сайта, дважды щелкните по загруженному файлу и пройдите через процесс установки.

Инструкции для Windows

Инструкции для Linux

Установите nvm (Node Version Manager) и необходимые зависимости. nvm используется для управления версиями Node.js.

_ Если при установке пакета он запрашивает подтверждение, введите y и нажмите enter._

Ubuntu, Debian и другие дистрибутивы на основе apt:

  1. Запустите sudo apt update, а затем sudo apt -y upgrade, чтобы обновить дистрибутив Linux.
  2. Запустите sudo apt-get install curl, чтобы установить curl, который передает данные и загружает дополнительные зависимости.
  3. После того, как закончится установка, запустите curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash для загрузки последней версии nvm.
  4. Используйте команду nvm --version. Терминал покажет номер установленной версии nvm.
  5. Установите версию Node.js по умолчанию

Arch, Manjaro и другие дистрибутивы на основе pacman:

  1. Запустите sudo pacman -Sy, чтобы убедиться, что дистрибутив готов к работе.
  2. Эти дистрибутивы поставляются с curl, так что используйте curl для загрузки nvm. curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
  3. Перед использованием nvm установите дополнительные зависимости, запустив sudo pacman-S grep awk tar.
  4. Используйте команду nvm --version. Терминал покажет номер установленной версии nvm.
  5. Установите версию Node.js по умолчанию

Fedora, RedHat и другие дистрибутивы на основе dnf:

  1. Эти дистрибутивы поставляются с curl, так что используйте curl для загрузки nvm. curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
  2. Используйте команду nvm --version. Терминал покажет номер установленной версии nvm.
  3. Установите версию Node.js по умолчанию

Если вы используете дистрибутив Linux, не указанный здесь, поищите инструкции в интернете.

Установка версии Node.js по умолчанию

Когда nvm установлен, он не имеет значения по умолчанию для конкретной версии Node. Установите требуемую версию и укажите nvm команду по ее использованию. В этом примере используется версия 10, но любая свежая версия тоже подойдет.

nvm install 10
nvm use 10

Чтобы убедиться, что вышеуказанные команды сработали, запустите npm --version и node --version. Выводимые данные должны выглядеть так же, как на скриншоте ниже, показывая номера версий в ответ на команды.

Проверка версий node и npm в терминале

Пакет npm поставляется в комплекте с Node.js таким образом, если у вас нет npm, скорее всего, у вас не установлен Node.js. Прочитайте, что такое npm.

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

Установка Git

Git - это бесплатная распределенная система управления версиями с открытым исходным кодом. Когда вы захотите установить любой из готовых Gatsby сайтов, которые называются “стартеры”, то git в них уже используется, что позволяет загрузить и установить необходимые файлы для стартера. Вам нужно будет установить Git, чтобы настроить свой первый сайт на Gatsby. Ознакомьтесь с руководством Git на GitHub.

Загрузка и установка Git зависят от операционной системы. Выберите инструкцию:

Использование CLI Gatsby

Инструмент CLI Gatsby быстро создает новые сайты и выполняет команды для разработки сайтов.

CLI Gatsby доступен через npm и устанавливается глобально, для этого запустите команду npm install -g gatsby-cli.

Note: При установке и первом запуске фреймворка Gatsby вы увидите короткое сообщение, уведомляющее об использовании анонимных данных, которые собираются для команды Gatsby. О том, как эти данные извлекаются и используются прочитайте в документе telemetry doc.

Просмотрите доступные команды, выполнив gatsby --help.

Просмотр команд Gatsby в терминале

Если CLI Gatsby не запускается из-за проблем с правами доступа, смотрите документацию по установке прав доступа npm, или это руководство.

Создание сайта на Gatsby

Чтобы быстро создавать сайты нужного типа, скачивайте “стартеры” (частично сделанные сайты с некоторой конфигурацией по умолчанию). Здесь будет использоваться стартер ”Hello World”, в котором присутствуют необходимые элементы для создания сайта на Gatsby.

  1. Откройте терминал.
  2. Выполните gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world. (Примечание: В зависимости от скорости загрузки, количество времени, которое это займет, будет отличаться).
  3. new - это команда Gatsby для создания нового проекта.
  4. hello-world - это произвольное имя. Инструмент CLI поместит код для сайта в новую папку под названием “hello-world”.
  5. указанный URL - это адрес, указывающий на хранилище исходного кода на GitHub.
  6. Выполните cd hello-world.

Команда cd (change directories), означает изменить рабочий каталог на “hello-world”.

  1. Выполните gatsby develop.

Эта команда запускает сервер разработки. Можно видеть и взаимодействовать с сайтом в локальной среде разработки, т. е. не в интернете, а на компьютере.

Просмотр сайта локально

Откройте новую вкладку в браузере и перейдите на страницу http://localhost:8000/. Сайт можно посещать до тех пор, пока работает сервер разработки. Чтобы остановить этот процесс (другими словами “остановить запущенный сервер разработки”), вернитесь в окно терминала, удерживайте клавишу “ctrl”, а затем нажмите “c” (ctrl-c). Чтобы начать сначала, запустите приложение gatsby develop еще раз!

Примечание: Если используется установленный VM, например vagrant, и/или хотите прослушать локальный IP-адрес, запустите gatsby develop --host=0.0.0.0. Теперь сервер разработки слушает http://localhost и локальный IP

Установка редактора кода

Редактор кода - это программа, разработанная специально для редактирования компьютерного кода.

Если вы решили использовать VS Code, посетите сайт VS Code и загрузите версию, соответствующую вашей платформе.

Установка плагина Prettier

Во избежание многочисленно появляющихся при редактировании ошибок рекомендуется использовать Prettier, инструмент, который помогает форматировать код.

Вы можете использовать Prettier непосредственно в редакторе VS Code, используя плагин Prettier VS Code:

  1. Откройте меню View => Extensions в редакторе VS Code.
  2. Найдите “Prettier - Code formatter”.
  3. Нажмите кнопку “Install”. (После установки вам будет предложено перезапустить VS Code, чтобы включить расширение. Новые версии VS Code будут автоматически активировать расширение после скачивания.)

Если вы не используете VS Code, ознакомьтесь с инструкцией по установке Prettier или интеграцией Prettier в другие редакторы.

➡️ Дальнейшие действия

В этом разделе вы:

  • Узнали о командной строке и как ее использовать
  • Установили и узнали о Node.js и инструменте CLI npm, системе управления версиями Git и инструменте CLI Gatsby
  • Сгенерировали новый сайт Гэтсби с помощью инструмента CLI Гэтсби
  • Запустили сервер разработки Гэтсби и посетил сайт локально
  • Скачали редактор кода
  • Установили модуль форматирования кода Prettier

Теперь перейдем к [знакомству со строительными блоками Gatsby] (/tutorial/part-one/).

Ссылки

Обзор технологий

Вот некоторые из веб-технологий, которые вы будете использовать при создании сайта Гэтсби:

  • HTML: язык разметки, который понимает каждый веб-браузер. HTML расшифровывается как HyperText Markup Language — язык разметки гипертекста. HTML дает веб-контенту универсальную информационную структуру, определяющую такие вещи, как заголовки, абзацы и многое другое.
  • CSS: презентационный язык, используемый для стилизации внешнего вида веб-контента (шрифты, цвета, макет и т. д.). Он расшифровывается как Cascading Style Sheets - Каскадные Таблицы Стилей.
  • JavaScript: язык программирования, который помогает сделать веб быстрым и интерактивным.
  • React: библиотека кода (построенная на JavaScript) для построения пользовательских интерфейсов. Это фреймворк, который Gatsby использует для построения страниц и структурирования контента.
  • GraphQL: язык запросов, который извлекает данные на сайт. Это интерфейс, который Gatsby использует для управления данными сайта.

Что такое веб-сайт?

Для всестороннего ознакомления с тем, что такое веб-сайт—включая введение в HTML и CSS—прочитайте о “Создании первой веб-страницы”. Здесь можно начать изучать веб. Затем изучите HTML, CSS, и JavaScript в учебниках на Codecademy. Будут полезными учебные пособия [React] (https://reactjs.org/tutorial/tutorial.html) и GraphQL.

Подробнее о командной строке

Познакомьтесь с использованием командной строки, изучив Учебник по командной строке на Codecademy для пользователей Mac и Linux, и этот учебник для пользователей Windows. Даже для пользователей Windows, первая страница учебника Codecademy будет полезной. Страница объясняет, что такое командная строка.

Узнайте больше о npm

npm—это менеджер пакетов JavaScript. Пакет—это модуль кода, который можно включить в проекты. Если вы скачали и установили Node.js, то npm установился с ним!

npm включает три составляющих: веб-сайт, реестр и интерфейс командной строки (CLI).

  • На веб-сайте можно просмотреть, какие пакеты JavaScript доступны в реестре npm.
  • Реестр npm—это большая база данных о пакетах JavaScript, доступных в npm.
  • После того, как вы определились с необходимым пакетом, можете использовать CLI npm для установки в проекте или глобально (как и другие инструменты CLI).

Прочитайте ”что такое npm?“.

Узнайте больше о Git

Для изучения этого руководства, не нужно знать Git, но это полезный инструмент. Если вы хотите узнать больше о системах управления версиями, Git и GitHub, ознакомьтесь с Git Handbook.