Gatsby v2: с чего начать работу?

Development | Amber | Комментировать запись

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

Читайте также: Как создать первый сайт на Gatsby

В этом материале мы поговорим о новой версии инструмента – Gatsby v2.

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

Самым первым нашим шагом будет глобальная установка командной строки, Gatsby CLI:

$ yarn global add gatsby-cli
# or, using npm:
$ npm install gatsby-cli -g

После этого можно использовать утилиту gatsby new для запуска нового проекта:

$ gatsby new my-site

Эта команда создаст каталог my-site базовой файловой структурой, которая имеет следующий вид:

├── /.cache
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── /node_modules
├── package-lock.json
├── package.json
├── /src
└── yarn.lock

Теперь вы можете перейти в каталог нового сайта и начать работу над ним, запустив команду gatsby develop:

$ cd my-site
$ gatsby develop

Попробуйте посетить свой сайт в браузере (он находится по адресу http://localhost:8000/). На стандартной странице вы увидите следующий текст:

Gatsby Default Starter
Hi people
Welcome to your new Gatsby site.
Now go build something great.

Стартовый сайт Gatsby

Стандартный стартовый сайт собирается по умолчанию при использовании команды gatsby new без дополнительных аргументов. Также мы можем использовать ряд других официально поддерживаемых или инициированных сообществом стартовых сайтов. В настоящее время существует 3 официальных стартера: gatsby-starter-default, gatsby-starter-hello-world и gatsby-starter-blog.

Ознакомиться со стартовыми сайтами, разработанными сообществом, можно здесь.

Конечная цель данного мануала заключается в создании простого блога на базе Gatsby. Поэтому вместо стандартного стартового сайта (как на предыдущем шаге) мы будем использовать стартер gatsby-starter-blog. Придумайте название для вашего блога и укажите его в команде gatsby new (мы для примера назовем наш блог 8host Blog):

gatsby new 8host-blog https://github.com/gatsbyjs/gatsby-starter-blog#v2

Конфигурация сайта Gatsby

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

module.exports = {
  siteMetadata: {
    title: '8host Blog',
    description: 'The blog of 8host Cloud Provider.',
    siteUrl: 'https://www.8host.com',
  },
  plugins: [
    ...
  ],
}

Мы изменили метаданные сайта в соответствии с нашими потребностями, а также удалили pathPrefix. Конфигурацию плагинов мы не трогали.

Важно! Обратите внимание: после внесения изменений в файл gatsby-config.js или создания новых страниц нужно перезапустить локальный сервер.

Добавление новой публикации в блог

После настройки официального стартера gatsby-starter-blog мы можем добавлять в наш блог публикации. Для каждой новой публикации в каталоге проекта /src/page создается новый каталог, а в нем – файл index.md со всем содержимым.

Например, добавьте на свой сайт новый пост /src/pages/8host-says-hi/index.md:

---
title: 8host says Hi
date: '2021-08-16'
---
Hi everyone! Here you can find the information you need.

По большей части посты в блоге представляют собой простые файлы markdown. Единственное отличие: в файлах Gatsby есть frontmatter, специальный раздел для хранения некоторых метаданных, который находится в верхней части файла. Этот раздел предоставляет данные, которые можно запрашивать с помощью GraphQL.

Сборка сайта

Позже, когда блог будет готов к запуску, вы можете воспользоваться командой gatsby build для компиляции всех ресурсов и создания статических файлов:

$ gatsby build

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

После сборки сайта вы также можете использовать команду gatsby serve для обслуживания созданной и оптимизированной версии вашего сайта по адресу http://localhost:9000/:

$ gatsby serve

Это может пригодиться при тестировании сайта (он будет вести себя так же, как на действующем хосте).

Заключение

В этом материале мы изучили основы работы с Gatsby 2 и запустили новый сайт. Надеемся, что здесь мы подготовили надежную почву для вашего самостоятельного изучения Gatsby.

Рекомендуем вам прочитать официальную документацию Gatsby v2: в ней вы найдете много полезной информации.