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

GatsbyJS — это мощный генератор статических сайтов для React, а Contentful помогает вам упорядочивать контент без сложной базы данных. Однако, подобно схемам базы данных, contentful использует модели содержимого для определения структуры ваших записей.

  1. Создать бесплатную Contentful Account
  2. Используя интерфейс командной строки Gatsby (CLI) в терминале, выполните: gatsby new contentful-starter https://github.com/contentful-userland/gatsby-contentful-starter, а затем npm install. Это создаст новый проект gatsby с содержательным начальным шаблоном и установит необходимые зависимости.
  3. Создайте новое пространство внутри Contentful. Создание нового пространства аналогично созданию нового файла базы данных. Откройте боковую панель на содержательном веб-сайте и нажмите + Добавить место

4. Создайте токены доступа. Вам потребуется создать 3 токена Contentful API, прежде чем ваш веб-сайт сможет запрашивать у него данные.
Эти API: API управления контентом, API доставки контента и API предварительного просмотра контента. Чтобы сгенерировать токены API, перейдите в раскрывающееся меню Настройки пространства > Ключи API, а затем нажмите + Добавить ключ API. После создания токена и присвоения ему имени убедитесь, что вы скопировали значение токена и сохранили его в безопасном месте. Вы сможете просмотреть его только один раз с панели инструментов. Сделайте это для всех трех API.

5. Конфигурация. В терминале: npm run setup, который запросит у вас идентификатор пространства, которое вы создали вместе с тремя токенами API, которые вы только что создали. Теперь вы готовы импортировать контент на свой сайт через Contentful API.

6. Опубликовать. Вы можете увидеть, как ваш веб-сайт выглядит локально перед развертыванием, запустив его в терминале npm run dev. Если результаты выглядят удовлетворительно, запустите npm run deploy, чтобы опубликовать производственную сборку прямо на страницах GitHub.

7. Развернуть. Хотя ранее я упоминал страницы Github, контент не зависит от платформы и может быть развернут на других хостах, таких как Netlify и BitBalloon.

Спасибо, что прочитали это руководство! Я надеюсь, что это было простое введение в создание нового сайта Gatsby с использованием contentful для управления контентом.

Первоначально опубликовано на gist.github.com.