В этом руководстве предполагается, что вы уже установили GatsbyJS
GatsbyJS — это мощный генератор статических сайтов для React, а Contentful помогает вам упорядочивать контент без сложной базы данных. Однако, подобно схемам базы данных, contentful использует модели содержимого для определения структуры ваших записей.
- Создать бесплатную Contentful Account
- Используя интерфейс командной строки Gatsby (CLI) в терминале, выполните:
gatsby new contentful-starter https://github.com/contentful-userland/gatsby-contentful-starter
, а затемnpm install
. Это создаст новый проект gatsby с содержательным начальным шаблоном и установит необходимые зависимости. - Создайте новое пространство внутри 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.