Gatsby - это генератор статических сайтов для React, который выпустил свою первую мажорную версию в прошлом месяце. Это инструмент, который не только формирует для вас проекты (или веб-сайты), но и утверждает, что эти сайты работают быстро. Если вы решите использовать Gatsby, вы ощутите всю мощь новейших веб-технологий, таких как React.js, Webpack и т. Д.

Существует множество современных парадигм, о которых Гэтсби заботится о своем разработчике за кулисами, чтобы начать создание и запуск своего проекта. Еще одна интересная вещь в Gatsby, которая мне нравится, - это постоянно растущая экосистема подключаемых модулей данных. Он позволяет разработчику извлекать данные непосредственно в приложение, созданное Gatsby, с помощью GraphQL.

Вот некоторые из преимуществ использования Гэтсби:

  • HTML-код создается на стороне сервера
  • Легко расширяется с помощью экосистемы плагинов
  • Предварительно настроенная система сборки на основе Webpack (не нужно ломать голову)
  • Оптимизирован для скорости. Гэтсби загружает только важные части, чтобы ваш сайт загружался как можно быстрее. После загрузки Гэтсби предварительно выбирает ресурсы для других страниц, так что нажатие на сайт происходит невероятно быстро.
  • Автоматическая маршрутизация на основе вашей структуры каталогов. (нет необходимости в отдельной библиотеке маршрутизации / навигации)

Если вы знакомы с деталями React, вы определенно можете сразу начать работу с Gatsbyjs, прочитав это руководство. Я не прошу вас углубляться в React, я прошу вас только ознакомиться с его концепциями. Если вы хотите освежить свои знания об этом или узнать о нем больше, я рекомендую следующие ссылки:

Хватит вступления. Давайте начнем.

Установка Gatsby CLI

Мы будем использовать npm для установки нашего первого и основного инструмента, который нам понадобится для настройки любого проекта Gatsby. Вы тоже можете использовать yarn. В своем терминале выполните эту команду:

Вам может потребоваться добавить sudo в начале команды, если она выдает ошибку для разрешений.

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

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

Завершите установку и настройку проекта. Затем измените каталог во вновь созданную папку. Запустите gatsby develop из командной строки, чтобы увидеть, как ваш сайт работает в реальном времени по адресу http: // localhost: 8000.

В окне вашего браузера приложение Gatsby.js по умолчанию выглядит так:

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

В настоящее время наше приложение состоит из двух страниц. Следовательно, минимальная маршрутизация уже сделана за нас. Прежде чем углубляться в код и вносить в него какие-либо поправки, нам необходимо понять структуру проекта. Затем вы можете использовать его, манипулируя им в своих будущих проектах.

Глубокое погружение в структуру проекта

Каждый проект Gatsby содержит как минимум эти файлы. Возможно, вы знакомы с некоторыми из них, например, с каталогом node_modules, public, который обслуживается при развертывании. Он также содержит package.json,, который содержит метаданные любого современного приложения Javascript.

Наше основное внимание уделяется каталогу src и файлу gatsby-config.js.. Они содержат метаданные и другую важную информацию о нашем текущем приложении.

Внутри src/ есть два подкаталога: layouts/ и pages/.

layouts/ содержит еще два файла: index.css и index.js. Они служат отправной точкой нашего приложения.

Компонент Header содержит стили и разметку, которые в настоящее время служат заголовком нашего приложения. Он отражается на каждой странице с помощью TempplateWrapper, который является нашим основным компонентом макета в приложении. Это, безусловно, означает, что этот компонент можно использовать для отображения меню навигации (что мы собираемся сделать через некоторое время) или нижнего колонтитула.

Тег Link, который вы видите, - это способ, которым Гэтсби позволяет нашим посетителям переходить с одной страницы на другую. Библиотека react-helmet, которая служит для прикрепления информации заголовка в HTML. В настоящее время он создается JSX. Вы можете прочитать об этой полезной, удобной для новичков библиотеке в ее официальном документе здесь.

Обратите внимание на опору {children()}. Это функция, которая выполняется в коде JSX для определения точного местоположения дочерних компонентов для рендеринга.

Главная страница приложения

Наш второй интересующий каталог pages/ содержит остальные страницы, на которых строится наше приложение. Это простые компоненты React. Давайте посмотрим на файл index.js внутри этого каталога, который в настоящее время служит главной страницей нашего приложения.

Точно так же вы найдете код в page-2.js. Если в окне браузера мы пытаемся перейти на вторую страницу, обратите внимание на URL-адрес сайта при загрузке второй страницы.

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

Давайте добавим еще одну страницу на наш сайт. Внутри каталога pages создайте новый файл page-3.js.

Теперь давайте добавим ссылку на нашу новую страницу на главную. Откройте index.js файл:

Это правильно отображается на нашей странице. Обратите внимание на файл 404.js в каталоге. Этот файл отображается, когда нужный URL не найден. Более подробную информацию можно прочитать в официальных документах Gatsby.

Теперь, чтобы немного поинтереснее. Давайте добавим меню навигации в Header компонент нашего макета.

Добавление меню навигации

Откройте layouts/index.js и внутри компонента Header добавьте следующий код:

Если вы сохраните файл, результаты немедленно отобразятся на главной странице и на каждой странице.

Конфигурационный файл

Https://gist.github.com/dfbefb5a09c93f1816198d9db253dd6c

Последний важный файл, вызывающий нашу озабоченность, - это gatsby-config.js в корневой папке. Этот файл может содержать метаданные сайта и дополнительную информацию, например плагины, которые мы устанавливаем с помощью команды npm. Однако сфера их использования и озабоченность связана только с проектом, созданным с использованием интерфейса командной строки Gatsby. По умолчанию установлен плагин gatsby-plugin-react-helmet.

Полный список плагинов находится здесь.

Развертывание нашего статического сайта

Пока что мы разработали минимальный статический сайт, который служит целям этого пошагового руководства. Последний шаг, на котором я хочу сосредоточиться, - это развертывание. Я буду использовать GitHub Pages для развертывания.

Чтобы развернуть проект на страницах GitHub, убедитесь, что ваш текущий рабочий каталог инициализирован как репозиторий git и размещен на GitHub. Если это хорошо, давайте добавим модуль с именем gh-pages в качестве зависимости разработчика.

Добавьте сценарий развертывания в package.json:

В gatsby.config.js добавьте префикс пути репо, например:

См. Официальную документацию по префиксу пути.

Теперь из вашего терминала запустите:

Отлично! Теперь ваш сайт доступен на https://username.github.io/project-name/.

Вы можете найти полный код этого проекта в этом репозитории GitHub.

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