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

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

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

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

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

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

Установка Node.js для Windows, Linux и Mac

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

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

• Загрузите и установите последнюю версию Node.js с официального сайта

Инструкции для 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. Выводимые данные должны выглядеть так же, как на скриншоте ниже, показывая номера версий в ответ на команды.

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

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

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

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

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

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

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

1. Откройте терминал.
2. Установите инструменты командной строки Xcode, запустив команду xcode-select --install.
   • Если это не удается, загрузите его непосредственно с сайта Apple, после входа в учетную запись разработчика Apple
3. После того, как будет предложено начать установку, появится предложение принять лицензию на программу для загрузки инструментов.

Установка Node

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

Установка Git

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

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

• Установка Git на macOS
• Установка Git на Windows
• Установка Git на Linux

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

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

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

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

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

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

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

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

Если вы решили использовать 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.

Ссылки

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

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

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

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

Для всестороннего ознакомления с тем, что такое веб-сайт--включая введение в HTML и CSS--прочитайте о “Создании первой веб-страницы". Здесь можно начать изучать веб. Затем изучите HTML, CSS, и JavaScript в учебниках на Codecademy. Будут полезными учебные пособия React и 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.