Как использовать WordPress в качестве headless CMS в cвязке с Gatsby

Многие из вас наверняка слышали о статических генераторах сайтов. С их помощью можно создавать и маленькие сайты-визитки и полноценные ecommerce-порталы.

WordPress при этом не сдает позиции. На сегодняшний день, на нем работают больше 35% сайтов в мире.

Предлагаю сегодня поговорить о том, как взять лучшее из обоих миров и познакомиться со способами интеграции Gatsby и WordPress.

Когда кто-то говорит, что сделать сайт на WordPress это легко, это и правда и ложь одновременно. Да, можно купить самый дешевый хостинг, скачать тему, наставить плагинов, и запустить сайт за вечер.

Интересное начинается позже — нужно следить за апдейтами этих самых плагинов, быть уверенным, что наш самый дешевый хостинг безопасен и сайт не ляжет если заказать рекламу, а версии, например, PHP и MySQL самые последние. Eще нужно быть уверенным, что у всех админов сайта безопасные длинные пароли и никто не лазает на хостинг по FTP. Я даже не хочу начинать разговор про кэширование. Как говорится, the list goes on…

Все вышеперечисленные проблемы, в купе с развитием API сервисов привели к тому, что статические генераторы сайтов становятся все более и более популярными. Подумайте сами, статические сайты:

гораздо быстрее, потому что браузер сразу «отдает» заранее сгенерированные страницы
безопаснее, потому что сервера с данными попросту нет
дешевле в плане хостинга, а в случае с Netlify для простых сайтов вообще бесплатны

Вдобавок к этим преимуществам, разные генераторы предлагают дополнительный набор «плюшек», чтобы сделать жизнь разработчиков еще слаще:) Давайте посмотрим на нескольких игроков:

Генератор с более чем 30, 000 рейтингом на GitHub. А это дорогого стоит! Основан на Go. Билдинг процесс настолько быстрый, что никто его пока не переплюнул. Это самый быстрый SSG (Static Site Generator) на сегодняшний день. Из минусов: надо учить Go…

Генератор на Ruby, основанный ещё в мохнатом 2009 году. Отлично работает с GitHub страницами и за 11 лет насобирал достаточно мощное комьюнити с отличной поддержкой. Из популярных юзеров этого SSG: Spotify и Netflix. Из минусов: некоторые считают, что Ruby уже не торт.

Отличный генератор, основанный на Vue. Его достаточно просто использовать, а встроенные плагины позволяют подтягивать данные из совершенно разных источников, в том числе WordPress. Из минусов: придётся учить Vue (может это и вовсе не минус)

Работает на React и GraphQL. Славится своей скоростью, потому что подгружает только те части сайта, которые нужны в данный конкретный момент. И предварительно выбирает ресурсы для других страниц. Поэтому сама навигация по страницам будет невероятно быстрой.

Gatsby — это опенсорсный проект, который стартовал в 2015 году как фреймворк для девелоперов, чтобы строить вебсайты на Реакте.

Проект начал быстро набирать популярность и СЕО Gatsby Inc. Кайл Метьюс начал собирать под него инвестиции. С первого раунда инвестиций компании удалось расшириться до 35 человек. А во втором раунде они собрали 35 млн. долларов США и так обалдели, что начали вовсю строить далеко идущие планы и нанимать еще разработчиков. Одним из них стал Джейсон Бaл — создатель плагина WPGraphQL, об этом чуть позже.

Gatsby популяризирует идею так называемого "content mesh" — разработки с учётом содержания. То есть платформы, которая предлагает инфраструктурный слой для несвязных вебсайтов и меняет всё представление о роли CMS в архитектуре.

Это одна из причин, почему компании удалось добиться таких больших долларовых вливаний. Вместо создания медленной и печальной LAMP архитектуры, Gatsby предлагает создавать мосты дружбы с CMS. То есть вместо одной огромной и громоздкой CMSины, которая управляет миром, Gatsby предлагает разделять и властвовать. Фактически он связывает вместе специализированные сервисы современной разработки с оптимизированной поставкой вебсайтов. Это даёт разработчикам доступ к облачным сервисам без ручной интеграции и позволяет использовать Gatsby как слой представления в их CMS. Что особенно радостно для девелоперов на WordPress.

Резюмируя пользу Гетсби:

Быстрый генератор статических сайтов
Большой выбор плагинов для работы с различными API
Работает на знакомом всем React’е
Большое и быстро растущее сообщество

Говоря о Gatsby нельзя не упомянуть JAMstack, потому что, по сути, Gatsby генерирует JAMstack сайты.

JAMstack — это JavaScript, API и Markup.

JavaScript — любая динамическая часть сайта на этапе запрос/ответ хендлится при помощи JavaScript, запущенном на клиенте. Это может быть любой фронтенд фреймворк, любая библиотека, и даже чистый ламповый JavaScript собственной персоной.

API — все процессы на стороне сервера или события баз данных проходят через переиспользуемый API, с допуском на основе HTTPs с JavaScript. Это может быть создано кастомно или на уровне третье-сторонних сервисов.

Markup — шаблонная разметка должна пребилдится на этапе деплоя, обычно с использованием сайт генератора для контента сайтов, или системы сборки для приложений.

Помните это видео? Так вот, eщё один плюс Gatsby — заточенность только под разработчиков. Никакого доступа для пользователей, никаких красочных интерфейсов. Только консоль, только хардкор! Для создания и управления контентом можно использовать WordPress, Drupal, Sanity, Contentful... У любой из этих систем есть интерфейс.

Вернемся к заголовку статьи. Начать работать с Gatsby довольно просто. Нужно установить Gatsby CLI:

npm install -g gatsby-cli

... и затем:

gatsby new gatsby-site

Это создаст новый сайт. Чтобы начать разработку, достаточно запустить:

gatsby develop

Gatsby начнет следить за изменениями кода и перезагружать браузер по необходимости.

Стоит отметить, WordPress можно интегрировать с Gatsby двумя способами.

1. Через REST API. Этот способ реализован в плагине gatsby-source-wordpress.

2. Через плагин WPGraphQL. Что такое WPGraphQL? Это опенсорсный проект, созданный Джейсоном Балом. Он (плагин, а не Джейсон) позволяет видеть данные WordPress как схему GraphQL.

WPGraphQL показывает себя с хорошей стороны перед JavaScript комьюнити как бы оно не делилось, будь то Next.js, Gridsome или Gatsby. Джейсона, кстати, и наняли работать в Gatsby благодаря этому плагину.

Вкратце рассмотрим оба варианта.

Сначала необходимо установить плагин gatsby-source-wordpress:

npm install --save gatsby-source-wordpress

... затем добавить конфигурацию в gatsby-config.js

module.exports = { plugins: [ { resolve: "gatsby-source-wordpress", options: { baseUrl: "yoursiteurl.ru", protocol: "https", restApiRoutePrefix: "wp-json", hostingWPCOM: false, useACF: false, }, }, ], }

Здесь мы указываем URL сайта, на котором установлен WordPress, (притом, неважно хостится ли он на самом wordpress.com или где-то ещё), протокол и нужен ли нам ACF (Advanced Custom Field) плагин.

Как только плагин подтянет данные можно начинать строить страницы нашего сайта имплементируя createPages API в gatsby-node.js.

Например, вот так может выглядеть часть gatsby-node.js файла, которая перебирает все помещённые в WordPress данные:

const postTemplate = path.resolve(`./src/templates/post.js`) _.each(result.data.allWordpressPost.edges, edge => { createPage({ path: edge.node.slug, component: slash(postTemplate), context: { id: edge.node.id, }, }) })

И вот так может выглядеть базовый шаблон ленты постов:

import React from "react" import { graphql } from "gatsby" import Layout from "../components/layout" import SEO from "../components/seo" export default ({ data }) => { return ( <Layout> <SEO title="home" /> <h1>My WordPress Blog</h1> <h4>Posts</h4> {data.allWordpressPost.edges.map(({ node }) => ( <div> <p>{node.title}</p> <div dangerouslySetInnerHTML={{ __html: node.excerpt }} /> </div> ))} </Layout> ) } export const pageQuery = graphql` query { allWordpressPost(sort: { fields: [date] }) { edges { node { title excerpt slug } } } } `

Подробную инструкцию по конфигурации можно прочитать здесь.

В певрую очередь необходимо установить плагин WPGraphQL на стороне WordPress. Это превратит ваш сайт в GraphQL API сервер. После установки и активации, GraphQL запросы можно будет делать через /graphql/ эндпоинт.

Затем на стороне Gatsby нужно установить плагин gatsby-source-graphql

npm install --save gatsby-source-graphql

... и добавить конфигурацию в gatsby-config.js

module.exports = { plugins: [ { resolve: "gatsby-source-graphql", options: { typeName: "WPGraphQL", fieldName: "wpgraphql", url: "https://yoursiteurl.ru/graphql", }, }, ] }

После этого можно, как и в предыдущем примере создавать страницы с помощью createPages API в gatsby-node.js файле.

Подробно об интеграции WordPress с Gatsby через WPGraphQL можно на сайте плагина.

В каждой бочке мёда есть ложка дёгтя. Ну или почти в каждой. Вот и у интеграции Gatsby с WP есть свои минусы. Контент не доступен “прямо сразу”. Gatsby пока не поддерживает инкрементальные билды, a это значит что с момента публикации в WordPress до обновления сайта может пройти какое-то время.

Если вы ищете решение типа "сайт за вечер" WordPress + Gatsby не ваш случай, потому что фронтенд придется строить самостоятельно. Это и минус и плюс одновременно.

Если вы уже использовали WordPress с Gatsby, поделитесь своим опытом в комментариях.

Как использовать WordPress в качестве headless CMS в cвязке с Gatsby

WordPress это легко, или

Enter Static Site Generators

1. Hugo

2. Jekyll

3. Gridsome

4. Gatsby

Почему Gatsby?

Немного о JAMstack

Developers, developers, developers

Как использовать WordPress в качестве headless CMS в cвязке с Gatsby

Два cпособа интеграции

1. REST API метод

2. WPGraphQL метод

Вместо вывода