У меня давно было желание написать что-то про CMS Headless, но все не доходили руки. И вот наконец, в этом посте я немного расскажу об этой системе и наглядно покажу процесс установки и ее настройки…
Headless CMS — что это?
Давайте начнем с того, что это довольно необычная система управления сайтом (CMS), которая отделена от фронтенда. Другими словами, это CMS, которая выводит только контент через специальный API, используя REST или GraphQL. Само по себе название системы «Headless» тоже имеет смысл, и состоит из двух частей — head (подразумевается фронтенд), который вырезается (less) из «body» (подразумевается бекенд часть), доставляя только контент пользователю.
Если вы уже знакомы с такими CMS как WordPress или другими популярными системами, например Drupal или Joomla, то дальше в посте вам будет очень легко во всем разобраться, от системы шаблонов и до какой-то минимальной настройкой и системными функциями. Ведь по сути, вы будете использовать только встроенные функции этих систем, а выводом контента займется уже обозреваемая система.
Преимущества Headless CMS
Прежде чем продолжить дальше это руководство, я бы сперва хотел выделить большие преимуществ Headless при разработке сайтов.
Во-первых, с помощью этой CMS вы сможете скрыть бекенд используемый на сайте. Поскольку бекенд скрыт, то становится очень трудно определить какой тип CMS вы используете. Другими словами, это дает большой плюс к защите сайта, ведь теперь атакующие ваш сайт, не смогут определить на какой системе он работает, а это здорово усложнит их работу. Например, сайт создан на WordPress, но поверх него установлена Headless и определить на каком движке крутится сайт теперь уже невозможно.
Во-вторых, улучшается скорость загрузки сайта. Поскольку Headless использует API, он будет запрашивать только тот контент, который будет отображать на лету без перезагрузки сайта.
В-третьих, можно не только получать контент по API, но также и редактировать его, если API CMS это позволяет. Таким образом разработчик может написать свой инструмент для редактирования контента на стороне Headless.
И, наконец, что не менее важно, с помощью системы мы можем легко доставлять контент на различные носители, кроме браузера пользователя, такие как; мобильные и настольные приложения, IoT и IFTTT и т. д. Разработчики могут использовать любой язык для визуализации контента. Так что это может улучшить общее впечатление от пользования системой, как для разработчиков, так и для пользователей.
Недостатки CMS Headless
Все до этого звучало достаточно хорошо, но этот пост был бы не полным, если бы я не озвучил негативные стороны этой системы управления. Поэтому далее внимательно прочитайте все минусы системы, прежде чем кидаться в разработку.
Прежде всего учтите, что для разработки на данной CMS потребуются достаточно крепкие знания в веб-разработке и серверной части. Например, вам потребуется в процессе, создать два домена для размещения бекенда и внешнего интерфейса системы, потребуется установка SSL сертификатов для двух доменов, интеграция сторонних сервисов и так далее.
Во-вторых, если вы используете распространеные CMS, например такие как WordPress, то приготовьтесь, что многие плагины могут не работать из коробки. В худшем случае вам придется дорабатывать некоторые плагины самостоятельно, чтобы они могли передавать свои данные через API. В лучшем случае, вы сможете найти в интернете уже настроенные под Headless плагины.
К счастью, благодаря широкому сообществу WordPress, доступны плагины для устранения этого недостатка. Например ACF для REST API — плагин для добавления кастомных полей или WP REST Yoast Meta — плагин для Yoast SEO и др.
На какой CMS создать сайт?
На данный момент есть много CMS, которые хорошо поддерживают Headless. Например, Contenful , dotCMS и ButterCMS — предоставляют очень удобное API для взаимодействия с контентом.
Как правило эти системы предоставляют не только API для манипуляции контентом, но также и SDK для различных языков программирования, чтобы разработчикам было легче подключаться и работать с API и с контентом.
Кроме того, согласно данным с официального сайта Headless, в настоящее время существует около 50 систем управления, которые отлично адаптированы для Headless. Список не включает традиционные CMS, такие как WordPress, Drupal и Magento, которые теперь имеют встроенный API для работы с контентом.
Установка Headless на WordPress
WordPress имеет встроенный REST API начиная с версии 4.4. Этот API включает в себя конечные точки для получения: списка, контента и редактирования контента записей. Если у вас есть подобный API, то вы можете приступить к дальнейшей установке.
Я не буду устанавливать WordPress с нуля, а буду использовать готовый пакет Headless WP Starter в котором уже есть все необходимое. Пакет включает в себя стандартную установку WordPress, а также интерфесное дополнение, которое отображает контент с помощью React.js.
- Для работы Headless требует наличие установленного Docker. Поэтому, сперва нужно установить его на свой компьютер локально.
- Далее создаем каталог для размещения сайтов:
mkdir wp-headless && cd $_
- Клонируем Headless из репозитория в каталог, который создали в предыдущем шаге:
git clone https://github.com/postlight/headless-wp-starter .
- Финальная команда, чтобы запустить сайт:
docker-compose up -d
Эта команда загрузит несколько образов Docker из реестра и запустит необходимые контейнеры, поэтому запаситесь терпением — это займет какое-то время.
Когда все будет готово, мы сможем запустить сайт по адресу — localhost:3000
В заключение
Я думаю, что обозреваемую CMS предпочительнее использовать если вы хотите тщательно подойти к безопасности своего сайта или вы планируете распространять ваш контент по различным каналам, помимо интернета. Для простого сайта я считаю все же лучше использовать обычные CMS, т.к они проще и более лучше подходят для элементарных сайтов.
В любом случае я надеюсь, что этот пост помог вам хоть немного разобраться в этой CMS. 😎