Как настроить безголовый веб-сайт WordPress (за 3 шага)

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

В этой статье мы поговорим о том, что такое Headless WordPress и как он работает. Затем мы покажем вам, как реализовать базовую настройку, использующую статические копии вашего веб-сайта через Amazon Web Services (AWS).

Давай приступим к работе!

Введение в безголовый WordPress

Обычно, когда вы вносите изменения в свой сайт на внутренней стороне (или на панели администратора), вы видите соответствующие результаты на внешней стороне (то есть, посетители имеют доступ к живым страницам). В этой традиционной модели WordPress обслуживает как внутреннюю, так и внешнюю часть вашего сайта.

Когда мы говорим об автономном WordPress, мы имеем в виду установку, в которой вы не используете WordPress для создания внешнего интерфейса вашего сайта. Вместо этого WordPress действует только как серверная часть. В качестве внешнего интерфейса вы можете использовать любую другую платформу, которая соединяется с WordPress. через свой APIили создайте статический веб-сайт.

👉 В этой статье мы будем работать со статической настройкой WordPress для внешнего интерфейса. Двумя основными преимуществами этой методики являются:

• Статические веб-сайты очень безопасны, поскольку на них нет движущихся частей, которыми могли бы воспользоваться хакеры.
• Нединамические страницы загружаются намного быстрее, поскольку им не нужно извлекать информацию из баз данных или загружать скрипты. Конечно, еще один способ добиться этого — кэширование страниц WordPress.

Теоретически, статическая настройка WordPress также может сэкономить вам деньги на хостинге, поскольку вы можете обойтись менее мощным сервером.

Однако этот подход не подходит для всех типов проектов. Например, в этом решении сложнее включать динамические элементы, такие как контактные формы или поиск по сайту (хотя это возможно при правильной настройке).

Тем не менее, статический интерфейс может отлично подойти для простых веб-сайтов. Если вы запускаете личный блог или сайт-брошюру, эта настройка может быть хорошим вариантом.

💡 Краткое примечание: Некоторые люди не считают статический сайт WordPress настоящей автономной установкой WordPress, потому что он не использует REST API, а дизайн все еще в некоторой степени привязан к серверной части (через тему). Однако это самый простой пример настройки такого типа, поэтому мы решили сосредоточиться на этом подходе в этом руководстве.

Как настроить автономный веб-сайт WordPress с помощью AWS (за три шага)

Теоретически вы можете разместить статическую копию своего веб-сайта у любого провайдера, которого захотите. Однако в этом примере мы собираемся использовать АВС потому что он работает «из коробки» с плагином, который мы представим. Вот как начать.

Шаг 1. Настройте учетную запись AWS

Для начала работы с AWS требуется немного больше работы, чем с традиционным веб-хостингом. Однако использование этой платформы может быть невероятно дешевым для статических веб-сайтов. На самом деле, это может стоить вам всего лишь 0,50 доллара в месяц.

Для установки WordPress без заголовка вам нужно будет использовать Уровень Amazon S3который предлагает 12 месяцев хостинга бесплатно:

Регистрация учетной записи должна быть довольно простой – нажмите на кнопку Начните работу с Amazon S3 кнопку и заполните необходимые поля в регистрационной форме.

Обратите внимание: если вы уже вошли в учетную запись Amazon, на кнопке будет написано: Завершить регистрацию вместо. Процесс тот же, вас просто не попросят повторно ввести адрес электронной почты и учетные данные для входа.

Шаг 2. Создайте статическую копию вашего сайта.

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

Есть несколько способов настроить локальный веб-сайт WordPress, в том числе:

• Создание полноценной локальной среды WordPress с помощью такого инструмента, как XAMPP.
• Использование программного обеспечения, такого как Местный от маховика для настройки локальных установок WordPress

В этом случае Local от Flywheel предлагает более удобный подход. Загрузите и установите программное обеспечение, затем настройте новый локальный веб-сайт.

Как использовать Local для настройки сайта 👈

Затем настройте и настройте свой сайт по своему усмотрению. Обновите настройки, выберите тему и напишите свои страницы и сообщения. Когда вы будете довольны этим, вы будете готовы создать статическую копию для использования во внешней части вашего сайта.

Для этого настройте плагин Staatic:

Есть несколько других плагинов, которые вы можете использовать для достижения той же цели. Однако Staatic без проблем работает с несколькими платформами, включая AWS, Нетлифайи более.

Как только плагин будет готов, перейдите в Стаатик > Настройки в вашей панели управления WordPress. Затем нажмите на Строить вкладка:

в Целевой URL поле добавьте URL-адрес, который посетители будут использовать для доступа к вашему сайту (это будет определяется вашей конфигурацией Amazon S3). Когда будете готовы, нажмите Сохранить изменения.

Теперь перейдите к Развертывание вкладка. Для Метод развертываниявыбирать Амазонка S3:

Прежде чем развернуть свой веб-сайт, вам необходимо настроить несколько параметров и подключить AWS к вашему веб-сайту, что вы сделаете на следующем шаге.

Шаг 3. Автоматическое развертывание статических страниц на AWS

После того, как вы выбрали Амазонка S3 вариант, появится несколько новых полей:

Прежде чем вы сможете начать развертывание, вам необходимо ввести идентификатор ключа доступа и секретный ключ доступа. Помните, что для работы развертывания идентификатор ключа доступа должен иметь правильные уровни разрешений. Вот краткое руководство по как получить оба ключа из вашего аккаунта AWS.

Вставив ключи в соответствующие поля, выберите регион, в котором вы хотите Корзина AWS был создан и введите его имя, как оно отображается в консоли AWS:

Прокрутите страницу вниз и нажмите Сохранить изменения.

Наконец, перейдите к Стаатик > Публикации в личном кабинете и нажмите Опубликовать сейчас:

Это создаст статическую копию вашего сайта. Этот процесс может занять некоторое время, в зависимости от размера вашего веб-сайта. Как только это будет сделано, вы сможете получить доступ к активной статической версии вашего сайта.

Заключительные мысли об безголовом WordPress 🧐

Если вы хотите настроить статический веб-сайт с автономной настройкой WordPress, вы можете сделать это с помощью Статический плагин. Это работает с АВС и несколько других платформ прямо из коробки, и вы можете создать и развернуть статическую копию своего сайта за считанные минуты.

🏑 Если вы предпочитаете использовать более традиционную настройку WordPress, продолжая использовать AWS, вы можете ознакомиться 👉 с нашим руководством по установке стандартного WordPress на AWS.

Есть ли у вас вопросы о том, как использовать автономный WordPress с AWS? Давайте поговорим о них в разделе комментариев ниже!

Бесплатное руководство

4 основных шага для ускорения
Ваш сайт WordPress

Следуйте простым шагам из нашей мини-серии из 4 частей.
и сократите время загрузки на 50-80%. 🚀