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

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

В закладки

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

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

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

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

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

Enter Static Site Generators

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

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

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

1. Hugo

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

2. Jekyll

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

3. Gridsome

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

4. Gatsby

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

Почему Gatsby?

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

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

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

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

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

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

Немного о JAMstack

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

JAMstack — это JavaScript, API и Markup.

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

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

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

Developers, developers, developers

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

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

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

npm install -g gatsby-cli

... и затем:

gatsby new gatsby-site

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

gatsby develop

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

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

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

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

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

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

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

1. REST API метод

Сначала необходимо установить плагин 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 } } } } `

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

2. WPGraphQL метод

В певрую очередь необходимо установить плагин 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, поделитесь своим опытом в комментариях.

{ "author_name": "Dmitry Mayorov", "author_type": "self", "tags": [], "comments": 9, "likes": 3, "favorites": 10, "is_advertisement": false, "subsite_label": "dev", "id": 106575, "is_wide": true, "is_ugc": true, "date": "Wed, 18 Mar 2020 03:57:28 +0300", "is_special": false }
Объявление на vc.ru
0
9 комментариев
Популярные
По порядку
Написать комментарий...
1

Как происходит обновление статики, когда изменяются данные в wordpress? Ручками пересобирать проект каждый раз?

Ответить
0

Да, нужно сделать GET-запрос по специальному вебхуку, чтобы сайт пересобрался. В WP эту кнопку можно вывести в панель. Некоторые сервисы вроде buddy.works дают информацию о ходе сборки — её можно выводить в WP. Сборка занимает от одной до нескольких минут. С учётом того, что для WP нужно кеширование — то на то и выходит. Только со статикой ждёт сборку сайта создатель сайта, а не клиенты, которые будут ждать кешированной версии при первой загрузке страницы после сброса кеша.

Ответить
0

А что насчёт элементов в тексте поста, например в админка WP в контенте мы вставляем какой либо динамический элемент, например FAQ раскрывающийся. В SPA это естественно должен быть отдельный компонент, но обычно с Wordpress придёт уже готовая html разметка этого. Есть ли уже какие-то практики обработки данных случаев?

Спасибо за предыдущий ответ

Ответить
0

Ну, главное, чтобы данные из WP пришли. В этом смысле JSON-файл такой же ресурс данных, как WP, только WP немного сложнее в обращении.

Ответить
0

Я имел ввиду, как решается проблема функционирования компонентов внутри контента, который пришёл с сервера

Ответить
0

За всё отвечает уже SPA. Но ответ кажется таким простым, что, мне кажется, я не понимаю вопрос. Уточните на примере, пожалуйста.

Ответить
1

Интересная схема интеграции.

Большой вопрос о ссылках на медиа-файлы и другие страницы сайта. Wordpress формирует ссылки, опираясь на значение доменного имени сайта. Не нашел в документации, как предлагается решать этот тонкий вопрос :)

Для заказчиков (и своих проектов тоже) у нас разработано решение по управлению контентом сайта через Google Spreadsheet.

Например, нужно добавить тебе новость, открываешь страницу "Новости", добавляешь строку, заполняешь колонки (название, мета, описание и т.п.) и всё.

Если умеешь работать с Excel, сумеешь наполнить сайт контентом

Ответить
0

Ищу разработчика, который поможет оптимизировать сайт на wordpress по предложенной схеме, либо создать новый статический проект и перенести на него данные из wordpress

Ответить
0

Можете обратиться ко мне https://sergeyfilimonov.com/static-site
С WP, правда, я отказался работать — долго работал с ним в стандартной конфигурации, потом перешёл на статику и другие CMS. Спустя год после этого в одном проекте решил вернуться к WP как CMS, но понял, что слишком сложно и дорого потом в поддержке клиенту, и мне самому не интересно разбираться в тонкостях движка WP и работы PHP для рядовых функций CMS. В качестве CMS использую Airtable. А вообще CMS помимо WP много: https://sergeyfilimonov.com/blog/headless-cms/

Ответить

Прямой эфир