Как использовать 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": 2, "likes": 2, "favorites": 7, "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 }
0
2 комментария
Популярные
По порядку
1

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

Ответить
1

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

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

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

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

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

Ответить

Прямой эфир