@alexandrtovmach:"Хочу делится знаниями каждый день"
RUUA

Подготовка среды разработки

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

Знакомство с командной строкой

Командная строка ― это текстовый интерфейс, используемый для запуска команд на компьютере, еще его часто называют "терминал". В этом руководстве будут равнозначно использоваться оба термина. Это очень похоже на использование Finder на Mac или Explorer на Windows. Finder и Explorer являются примерами графических пользовательских интерфейсов (GUI). Командная строка ― это мощный текстовый способ взаимодействия с твоим компьютером.

Выдели минутку, чтобы найти и открыть интерфейс командной строки (CLI) на твоем компьютере. В зависимости от используемой операционной системы используй инструкции для Mac или инструкции для Windows. Если же ты являетешься счастливым обладателем UNIX системы, то наверняка уже знаком с консолью 😅.

Установка Node.js

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

Заметка: минимальная версия Node.js для работы с Gatsby ― 8.11.3, но лучше использовать более новую.

⌚ Загрузка Node.js

Открой официальный сайт Node.js и следуя инструкциям, загрузи и установи рекомендуемую версию для твоей операционной системы. После завершения установки, убедись, что все работает исправно:

Проверка Node.js

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

    Если ты новичок в командной строке, "запустить command" означает набрать command в терминале и нажать клавишу Enter.

  3. Запусти npm --version.

Каждая из этих команд выведет номер версии запрашиваемой программы. Твои версии могут отличаться от представленных на скриншоте! Если при вводе этих команд не отображается номер версии, значит что то пошло не так с установкой Node.js.

версия node и npm в терминале

Установка Git

Git — это бесплатная распределенная система контроля версий с открытым исходным кодом, предназначенная для быстрой и эффективной работы с небольшими и очень крупными проектами. При установке «стартового» проекта, Gatsby использует Git «за кулисами» для загрузки и установки необходимых файлов. Тебе нужно будет установить Git, чтобы настроить свой первый сайт Gatsby.

Действия по загрузке и установке Git зависят от твоей операционной системы:

Работа с Gatsby CLI

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

Gatsby CLI доступен через npm и должен быть установлен глобально с помощью команды npm install -g gatsby-cli

Для проверки успешной установки и чтобы увидеть все доступные команды, запусти gatsby --help

05-gatsby-help

Если ты не можешь успешно запустить интерфейс командной строки Gatsby из-за проблем с разрешениями, посмотри об исправлении разрешений для npm здесь или здесь.

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

Теперь мы готовы использовать Gatsby CLI для создания своего первого сайта Gatsby. Используя этот инструмент, ты можешь загружать «стартовые версии» (частично созданные проекты с некоторой конфигурацией), чтобы ускорить создание сайта определенного типа. Стартер «Hello World», который мы будем рассматривать здесь — это стартер с самыми необходимыми элементами для сайта Gatsby.

  1. Открой терминал.
  2. Запусти gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world.

    В зависимости от скорости загрузки, время создания проекта будет различным. Для экономии времени, пример ниже был приостановлен во время установки.

  3. Запусти cd hello-world.
  4. Запусти gatsby develop.

Что сейчас произошло?

gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
  • new ― команда gatsby для создания нового проекта
  • "hello-world" ― это произвольное название, ты можешь выбрать что угодно. Инструмент CLI поместит код для нового сайта в папку с указанным названием "hello-world".
  • указанный URL-адрес указывает на GitHub-репозиторий, в котором содержится код для стартового проекта.
cd hello-world
  • cd (change directory) ― сменит текущее расположение на подпапку "hello-world". Всякий раз, когда требуется выполнить какие-либо команды для сайта, нужно быть в контексте этого сайта (в ином случае, терминал должен указывать на каталог, где живет код вашего сайта)
gatsby develop
  • команда запускает сервер с сайтом в режиме разработки, предоставляя возможность видеть и взаимодействовать с сайтом в браузере без публикации его в Интернет.

Локальный просмотр сайта

Открывай новую вкладку в браузере и переходи по ссылке http://localhost:8000.

04-home-page

Наши поздравления! Это твой первый сайт на Gatsby! 🎉

Сайт будет доступен локально по адресу http: // localhost: 8000, пока работает сервер разработки. Это процесс, который ты запустил с помощью команды gatsby develop. Чтобы остановить работу сайта (или "убить сервер разработки"), нужно вернуться в окно терминала с нажать комбинацию клавиш Ctrl + C. Для повторного запуска используй ту же команду ― gatsby develop!

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

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

Текстовый редактор ― это программа, разработанная специально для редактирования компьютерного кода. Есть много великих там.

Если тебе еще не приходилось работать с редакторами, то мы рекомендуем VS Code просто потому, что скриншоты из этого руководства, были сделаны в нём.

Загрузка VS Code

Для начала работы с VS Code, переходи на сайт VS Code и загружай версию для твоей ОС.

Плагин Prettier

Мы также рекомендуем использовать Prettier ― инструмент, который помогает форматировать код. Чтобы использовать его в редакторе, достаточно установить плагин Prettier VS Code:

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

💡 Для других текстовых редакторов используй инструкции здесь и здесь.

➡️ Что дальше?

Суммируя всё вышесказанное, в этом разделе мы:

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

Следующий шаг Строительные блоки Gatsby.

Рекомендации

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

Как ты мог заметить, не обязательно быть экспертом в веб-разработке чтобы начать работу с Gatsby! Многое узнается в ходе этой серии уроков. Вот некоторые из основных технологий, которые нам пригодятся в дальнейшем изучении:

  • HTML: язык разметки гипертекста, понятный каждому веб-браузеру. HTML дает веб-контенту универсальную информационную структуру, определяющую такие вещи, как заголовки, абзацы и многое другое.
  • CSS: язык представления, используемый для оформления внешнего вида веб-контента (шрифты, цвета, макет и т.д.).
  • 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 представлен в трех видах: веб-сайт npm, реестр npm и интерфейс командной строки npm CLI.

  • На сайте npm можно просмотреть, какие пакеты JavaScript доступны в реестре npm.
  • Реестр npm ― это большая база данных пакетов JavaScript, доступных на npm.
  • После того, как пакет выбран, его можно установить с помощью интерфейса командной строки npm.
  • CLI npm ― это то, что работает с реестром

💡 Введение в npm "Что такое npm?".

Больше о Git

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