Здесь мы создадим работоспособный мини-сайт JAMStack с современными технологиями, такими как Gatsby и Prismic, в качестве нашей безголовой CMS.
В сегодняшнем развитии технологий тенденция безголовых CMS намного растет, чем в предыдущие годы. Многие бренды превратили себя в безголовые варианты управления своим контентом. Когда мы говорим о статических веб-сайтах, первое, что приходит в голову, это HTML, CSS и Javascript. Но это сейчас так.
Генераторы статических сайтов эволюционировали, чтобы использовать инновационные технологии, и они могут делать такие вещи, как обработка запросов в реальном времени, обработка платежей, управление учетными записями клиентов, выполнение полного поиска по веб-сайту и многое другое. Вот почему мы больше не называем их статическими, а теперь называем их веб-сайтами JAMstack.
Если вы все еще новичок в JAMstack, я рекомендую вам перейти к моей статье об этом, которая охватывает все необходимые знания, которые вам нужно знать об этом. Найдите ссылку здесь.
Современная архитектура веб-разработки, основанная на клиентском JavaScript, многоразовых API и встроенной разметке».
— Матиас Бильманн (генеральный директор и соучредитель Netlify)
Что будем строить?
Здесь мы создадим мини-сайт на базе Prismic, безголовой CMS по нашему выбору. Мы просто доставим наш контент с помощью Prismic. Но вы по-прежнему можете выбрать любую безголовую CMS. Между тем, мы также будем использовать Gatsby для нашего статического генератора, вы также можете выбрать любой статический сайт для соответствующей задачи. Мы будем использовать этот стек и попробуем разместить контент на нашем веб-сайте.
Мы выполним всего четыре основных шага. Я перечислил их ниже:
- Создайте учетную запись Prismic.io и создайте собственный тип контента.
- Настройте проект Gatsby и добавьте необходимые пакеты.
- Соединение Prismic и Gatsby с многоуровневым API GraphQL.
- Отображение данных
Создание Prismic и создание пользовательского типа контента
Первым шагом будет создание учетной записи Prismic. Итак, давайте перейдем на сайт Prismic.io, создадим новую учетную запись и начнем создавать новый репозиторий.
Выбрав уникальное имя репозитория, выберите наш план (пока что я возьму бесплатный) и нажмите «Создать этот репозиторий» с именем testPrismic на данный момент.
Теперь пришло время создать собственный повторяемый тип под названием post, который будет содержать следующие типы:
- Заголовок
- Дата статьи
- Слизняк
- Изображение баннера
- Содержание
После того, как мы перетащим его в нужный тип контента для нашего веб-сайта. Мы пойдем и сохраним наши настройки, перейдем к документам и создадим новый документ оттуда, где мы сможем увидеть тот же тип контента, который мы перетащили, оттуда мы заполним наш пост и нажмем кнопку «Сохранить». Кнопка «Сохранить» теперь должна стать «Опубликовать» — нажмите ее, чтобы активировать контент.
Мы также можем создать несколько типов записей, но пока остановимся на одном. Мы также можем получить доступ к конечной точке API, предоставленной нам Prismic. Мы можем получить к нему доступ из настроек и навигации по безопасности API.
Настройте проект Gatsby и добавьте необходимые пакеты
Давайте сначала установим интерфейс командной строки Gatsby и используем его для инициализации нового сайта Gatsby со стартером по умолчанию. Мы можем развернуть проект с помощью следующих команд
npm install -g gatsby-cli gatsby newsampleWebsitecdsampleWebsiteyarn start
Теперь мы можем видеть, как наш проект работает в
https://localhost:8000/
Теперь давайте добавим необходимый плагин в наш проект Gatsby, чтобы мы могли интегрировать его и с контентом Prismic. Для этой части мы установим gatsby-source-prismic с помощью следующей команды.
npm install --save gatsby-source-prismic
Давайте также добавим плагин в наш массив плагинов Gatsby.
Мы начинаем с чего-то довольно простого. Но нам все еще нужно добавить определение схемы, которого еще не существует.
Давайте возьмем JSON, созданный Prismic, перейдя к нашему пользовательскому типу post, а затем щелкните вкладку редактора JSON справа. Код будет выглядеть примерно так, как здесь
Давайте скопируем и вставим этот JSON в путь к папке src/schemas/post.json файл. И перезапустите наш сервер разработки.
Соединение Prismic и Gatsby с GraphQL
Давайте откроем проводник GraphQL и перейдем к localhost:8000/_graphql
, чтобы просмотреть содержимое вашего сообщения Prismic! Давайте развернем allPrismicPost → edges → node → data и проверим данные, которые нам нужны, затем нажмите кнопку воспроизведения, чтобы увидеть содержимое сообщения, которое вы ввели в пользовательском интерфейсе Prismic.
И мы можем видеть реакцию данных, которые мы получаем. Из ответа нам нужен заголовок, подзаголовок, изображение и текст. Для этого мы будем использовать документы Гэтсби на createPages в качестве ссылки из gatsby-source-prismic, давайте создадим страницы из наших сообщений Prismic.
Давайте теперь создадим страницы с данными, которые мы получили. Взяв ссылку на документ Gatsby pages и gatsby-source-prismic в качестве ссылки, мы создадим страницы из наших записей Prismic. Код выглядит примерно так, как показано ниже.
Отображение данных
Теперь мы пройдемся по каждому сообщению и вызовем createPage, а также данные Prismic в качестве нашего контекста. Что можно увидеть на фрагменте ниже
Этот компонент отображает данные Prismic, которые мы передали как pageContext в gatsby-node.js.
Давайте затем перейдем к вашему сообщению в браузере (в нашем случае мы можем ввести https://localhost:8000/the-rise-of-jamstack), чтобы увидеть содержимое нашего сообщения!
Вывод
Сначала мы создали собственный повторяющийся тип под названием post. Мы инициализировали новый сайт Gatsby и добавили плагин gatsby-source-prismic. Наконец, мы создали страницы и отрендерили содержимое поста в нашем приложении Gatsby.
Вот как мы можем создать простое приложение JAMstack, извлекающее данные из безголовой CMS по нашему выбору. 🎉 🎉
