WordPress — отличная система управления контентом (CMS). С его помощью мы можем добиться практически всего. Благодаря динамическому характеру мы можем изменить любой контент одним нажатием кнопки. И хотя это удивительно, это также таит в себе некоторые опасности, и его может быть трудно поддерживать в условиях интенсивного движения.

Преобразование вашего веб-сайта WordPress в статический может решить эти проблемы.

Что такое статические веб-сайты?

Чтобы объяснить, как работают статические веб-сайты, сначала нам нужно понять, как работает динамический веб-сайт.

Каждый раз, когда мы посещаем веб-сайт, серверу приходится анализировать файлы PHP, запрашивать базу данных для получения данных и, в конце концов, возвращать визуализированный HTML-код в браузер.

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

Плюсы статичности

Скорость и производительность

Статические веб-сайты работают быстро и производительно. Почему? Потому что это просто статический HTML. Это означает, что сервер должен делать только одно — обслуживать сайт. Ему не нужно ничего анализировать или ждать данных из базы данных.

Кроме того, статические веб-сайты легче размещать на CDN (хотя Edge Cache работает аналогично), что позволяет размещать все файлы как можно ближе к вам.

В целом: статические веб-сайты прекрасно работают при интенсивном трафике.

Безопасность

Ядро WordPress безопасно – это действительно так. А вот плагины и темы – не всегда. Также каждый может попробовать начать угадывать наш логин и пароль.

В целом, мне нравится сравнивать WordPress с домом со множеством дверей и окон. Нам решать, какие из них наиболее безопасны, но, тем не менее, если одна дверь недостаточно безопасна, хакер может взломать наш сайт.

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

Спокойствие духа

Типичная установка WordPress состоит из множества движущихся частей — PHP и серверов баз данных, тем или плагинов — и каждая часть может сломаться. С помощью статики мы удаляем большую часть из них. Наш сервер становится более простым, поскольку он обслуживает только HTML, а наш контент распространяется по всему миру благодаря CDN, что делает его защищенным от DDoS.

В результате вероятность того, что что-то сломается, гораздо меньше, чем обычно.

Минусы преобразования в статический

Обходные пути

Мы привыкли к таким вещам, как поиск по веб-сайту, добавление комментариев или отправка форм, которые сразу же работают с WordPress. Со статикой все уже не так просто. Поскольку мы конвертировали все в HTML, мы потеряли эти возможности.

Нам придется использовать некоторые сторонние инструменты, чтобы вернуть эту функциональность.

Процесс сборки

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

Предварительные шаги

Прежде чем мы начнем, мы должны позаботиться о некоторых вещах.

1. Создайте репозиторий Git.

В этом примере мы используем GitHub, но вы можете использовать любое другое решение Git (например, GitLab или BitBucket). Прямо сейчас просто создайте учетную запись (если у вас ее еще нет) и создайте пустой репозиторий.

После этого нам нужно создать файл в репозитории; в противном случае мы не сможем подключить его к Kinsta.

Добавьте файл в свой репозиторий.

2. Подключите этот репозиторий к хостингу статических сайтов.

Зайдите в MyKinsta, выберите статические сайты на боковой панели и выберите Добавить сайт.

Выберите созданный вами репозиторий и не забудьте выбрать «Автоматическое развертывание при фиксации».

Пользовательский интерфейс Kinsta показывает новый статический сайт, создаваемый из репозитория GitHub и его основной ветки.
Настройка хостинга статических сайтов Kinsta.

Преобразуйте свой сайт WordPress в статический

Мы можем использовать несколько методов, чтобы преобразовать наш сайт WordPress в статический. В этой статье мы рассмотрим два из них:

  1. Использование плагина WP и Git
  2. Использование WP-CLI, CI/CD и Git

Использование плагина и Git

Требования:

  • Репозиторий GitHub.
  • Плагин WordPress Simply Static (бесплатная версия).

Шаги

  1. Откройте свой сайт в браузере и установите плагин Simply Static.
  2. Отправляйтесь в Simply Static > Настройки > Развертывание чтобы установить метод развертывания Локальный каталог и установите локальную папку — вы можете следовать подсказке, которую дает вам заполнитель, например: /www/kinstaapi_533/public/public_static. Помните, что плагин не создаст за вас эту папку – вы должны сделать это вручную.
  1. нажмите Генерировать статические файлы кнопка.

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

Отправьте свой код в репозиторий Git

  1. Создайте репозиторий на GitHub.
  2. Откройте терминал или Powershell, перейдите в папку со статическими файлами и запустите:
git init
git remote add origin https://github.com/{username}/{repository_name}.git
git add .
git commit -m "static content"
git branch -M main
git push --force -u origin main

Эти команды подключают репозиторий и отправляют все статические файлы на GitHub. Внесение изменений запускает автоматическое развертывание, поскольку мы уже подключили этот репозиторий к хостингу статических сайтов Kinsta.

В следующий раз, когда вы измените что-то в своем WordPress, перестройте весь сайт и запустите:

git add .
git commit -m "static content"
git push --force -u origin main

Вы можете узнать больше о создании статического сайта и его размещении с помощью Kinsta в подробном руководстве Simply Static.

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

Использование WP-CLI, CI/CD и Git

В этом методе используется тот же плагин WP, что и в описанном выше методе, но в его премиум-версии (платной), а также конвейер CI/CD от Buddy CI для отправки вашего кода в репозиторий GitHub.

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

Требования:

  • Simply Static Pro (только версия Pro имеет интеграцию с WP-CLI).
  • Ваш веб-сайт должен быть общедоступным (поэтому он не может находиться на локальном хосте), а для сервера требуется доступ по SSH и установленный WP-CLI. Хостинг Kinsta WordPress идеально подходит.
  • Кодовая база вашего сайта размещена в репозитории GitHub.
  • Инструмент CI/CD для координации всего. В этом примере мы используем Buddy из-за его дружелюбия и простоты. Но вы можете использовать любой другой инструмент, например GitHub Actions или GitLab CI/CD.

Шаги:

  1. Откройте свой сайт WP в браузере и установите плагин Simply Static Pro.
  2. Отправляйтесь в Simply Static > Настройки > Развертывание чтобы установить метод развертывания Локальный каталог и установите правильный путь — вы можете следовать подсказке, которую дает вам заполнитель, например: /www/kinstaapi_533/public/public_static.
  3. Помните, что плагин не создает эту папку за вас — вы должны сделать это вручную.
  4. Перейдите в свой репозиторий GitHub и создайте токен доступа с возможностью записи для доступа к вашим репозиториям. Он нам скоро понадобится.
  5. Войдите в свою учетную запись на Buddy, добавьте новый проект и подключите его к своему репозиторию.

Давайте создадим конвейер на Buddy, который будет выполнять следующие действия:

  1. Запускает команду Simply Static WP-CLI через SSH на вашем сервере.
  2. Застегивает все.
  3. Загрузите его в файловую систему Buddy.
  4. Разархивирует все.
  5. Отправляет все в ваш репозиторий Git.

Пользовательский интерфейс Buddy на вкладке «Действия», показывающий предлагаемый рабочий процесс.
Обзор предлагаемого рабочего процесса Buddy.

  1. Сначала нам нужно добавить действие под названием SSH-команда.
  2. Внутри Запуск CMD вкладка, запустите:
wp simply-static run
cd public_static
zip -FSr ../static.zip .

Этот скрипт преобразует наш веб-сайт в статический и заархивирует его.

  1. в Цель вкладку, введите все свои учетные данные (найдите их на MyKinsta) и установите рабочий каталог на общественный.

Пользовательский интерфейс Buddy, показывающий настройку вкладки «Цель»
Настройка Buddy Target.

  1. Далее добавьте Локальная оболочка действие. Внутри него запустите:
rm -rf *

Эта команда гарантирует, что не останется ненужных нам файлов.

  1. Чтобы скачать zip-файл с сервера, добавьте новое действие (это можно сделать, нажав кнопку + в списке действий) и выберите SFTP-загрузка из списка. Помимо учетных данных, нам нужно передать путь к zip-файлу и проверить опцию перезаписи.

Пользовательский интерфейс Buddy, показывающий настройку действия «Загрузка»
Настройка действия «Загрузка» Buddy.

  1. Добавить еще Локальная оболочка действие по разархивированию всех файлов и удалению zip-файла (он нам больше не понадобится). Бегать:
unzip -o static.zip
rm static.zip
  1. Перейти к Убунту вкладку и выберите Пакеты и инструменты установить разархивировать. Для этого запустите:
apt-get update && apt-get install -y unzip
  1. Последний шаг требует использования Git Push действие. Вы должны использовать токен доступа GitHub, который вы настроили на первом этапе, и его пароль. Также не забудьте проверить Силовой толчок и Отправить ревизию в конкретную ветку.

Пользовательский интерфейс Buddy, показывающий настройку действия Push.
Настройка Push-действия Buddy.

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

Пользовательский интерфейс Buddy на вкладке «Действия», показывающий предлагаемый рабочий процесс.
Обзор предлагаемого рабочего процесса Buddy.

Благодаря документации Buddy вы можете узнать, как дополнительно автоматизировать рабочий процесс.

Другие способы конвертировать WP в статический

Генераторы статических сайтов

Многие генераторы статических сайтов позволяют подключить любую CMS через API (WordPress имеет встроенный REST API, а GraphQL доступен через плагин). Вы можете использовать Astro, Eleventy или любой другой.

Хотя этот подход дает вам гораздо больше гибкости, он требует больше работы, чем приведенные выше решения.

Краткое содержание

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