Как перейти с WordPress на генератор статических сайтов

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

Зачем тебе это делать? Потому что вы можете получить огромный прирост скорости и, следовательно, повысить производительность вашего сайта в поисковых системах, а также уменьшить (или исключить) ваш счет за хостинг и значительно повысить свою безопасность.

Преимущества использования статики

Фантастическое ускорение — это, конечно, немалый подвиг, но это еще не все, что вы можете получить, превратив свой динамический сайт WordPress (WP) в статический.

Подведем итоги:

• Снижена скорость загрузки страницы. Страницы не обрабатываются во время выполнения (запрос пользователя), и контент не извлекается из базы данных. В результате веб-сервер будет реагировать намного быстрее (в 10 раз и даже больше).
• Уменьшение задержки через CDN. Вы можете просто перетащить эти статичные страницы в распределенную сеть доставки контента (CDN), что значительно сократит время отклика по всему миру.
• Более легкое управление. После того, как вы настроите свой рабочий процесс — что мы и сделаем здесь — вы увидите, что на самом деле вам не нужно тратить никаких дополнительных усилий на обслуживание, обновления WP или обновления сервера.
• Значительно усиленная безопасность. HTTPS из коробки только со статическими страницами, которые не запускаются какой-то поддельной версией PHP или устаревшим WordPress, и, скорее всего, даже не Apache.
• Улучшенное SEO. Google ценит не только ваш контент, но и то, насколько простой и безопасный доступ к нему. Фактически, это одна из немногих оптимизаций для поисковых систем, которые все еще актуальны в наши дни: более быстрый и безопасный сайт будет лучше работать на странице результатов поисковой системы.
• Душевное спокойствие. Нет необходимости обновлять PHP, нет проблем с непропатченными WP, даже если серверы Linux не управляются. Просто расслабьтесь и выпейте кофе / пиво / чай / женьшень после вашего развертывания.

Безопасен ли WordPress?

Разработчики WordPress придерживаются хороших стандартов и практик безопасности, хотя долгосрочной поддержки (LTS) по-прежнему очень не хватает. Однако из-за самой архитектуры есть вещи, которые не находятся в руках WP Security Team и передаются непосредственно вам:

• обновление вашего сервера
• установка обновлений WP
• установка обновлений PHP
• а также установка обновлений для плагинов и тем (если есть вообще)
• управление WP и PHP (ни один из которых не имеет LTS) время от времени обновляет мэр

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

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

Однако вам все равно придется позаботиться о межсайтовом скриптинге и подделке межсайтовых запросов. 🤷‍♂️

Предварительные сведения: ознакомьтесь с генераторами статических сайтов

 

Мы кратко рассмотрели статические генераторы сайта (ПНГ) на нашем списке 100 Jamstack инструментов, API и услуги для питания ваших сайтов статьи, и есть тонны больше, чем мы рассмотрим здесь, так что не забудьте проверить StaticGen, чтобы узнать больше.

Некоторые SSG специально нацелены на WordPress, например WP2Static, но мы сосредоточимся на более универсальном, Gatsby.js — «бесплатном фреймворке с открытым исходным кодом на основе React, который помогает разработчикам создавать невероятно быстрые веб-сайты и приложения».

Перенос WordPress

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

По сути, вот что мы сделаем:

1. настроить Gatsby.js
2. экспортировать записи / страницы WP в Markdown
3. генерировать статические активы

Шаг 1. Разбейте стартеры Гэтсби

Мы начнем с разветвления либо Gatsby Advanced Starter, либо Gatsby Material Starter, оба из которых являются доработанными учебниками общего назначения для проекта Gatsby.js, а второй — с «самоуверенным» шаблоном Material Design ( демонстрация ).

Эти стартеры сразу же предоставят вам полнофункциональное прогрессивное веб-приложение (PWA) на основе React со всеми включенными батареями:

• Невероятно быстрое время загрузки (предварительно обработанный HTML, автоматическая загрузка JS-фрагментов)
• Сообщения Markdown (выделение синтаксиса кода, встраивание видео с YouTube, встраивание твитов)
• пагинация, теги, категории
• Поддержка Disqus
• Поддержка NetlifyCMS
• SEO-полезности ( поддержка Google Analytics, создание файлов Sitemap и robots.txt, метатеги, Schema.org JSON-LD для расширенных фрагментов кода Google, теги OpenGraph для
• Facebook / Google + / Pinterest, теги Twitter для карточек Twitter)
• каналы синдикации (RSS)
• социальные функции (кнопка общего доступа в Twitter, LinkedIn и Telegram; количество публикаций / публикаций в Facebook и Reddit)
• Средства разработки ( ESLint, Красивее, замечание-Lint, развертывая поддержка страниц GitHub и Netlify, CodeClimate конфигурационный файл и значок)
  и больше!

Утверждается, что после успешной миграции и развертывания в CDN ваш сайт должен быть настолько производительным, чтобы аудит с помощью Google Lighthouse показал наилучшие возможные результаты:

 

Установка и настройка

Сначала нужно установить Gatsby.js и Node.js, так что вы можете использовать gatsbyCLI и менеджер пакетов Node.js npm. Для Node.js просто скачайте и установите, для Gatsby.js см. Быстрый старт или Настройка среды разработки.

Разобравшись с этим, вы начинаете проект следующим образом (помните, что вы также можете клонировать gatsby-material-starter):

gatsby new YourProjectName https://github.com/Vagr9K/gatsby-advanced-starter
npm run develop # or gatsby develop

Конфигурация стартеров Advanced ( пример ) и Material ( пример ) практически одинакова.

 

Как уже упоминалось, есть поддержка Netlify CMS прямо из коробки, которую вы можете синхронизировать с вашим репозиторием Git, отредактировав static/admin/config.ymlследующим образом:

backend:
  name: github
  branch: master
  repo: your-user/your-repo

Вы также можете интегрировать Netlify CMS с GitLab или Bitbucket (см. Конфигурация бэкэнда ).

Шаг 2: экспорт сообщений WordPress

В некоторых случаях вы можете преобразовать экспортированный XML-файл со всеми сообщениями и страницами в файлы Markdown, просто используя ExitWP.

Однако, в зависимости от настроек и настроек вашего WP, этот процесс может потребовать некоторого мастерства; но все же управляемый и достойный внимания.

Таня Расция написала хороший обзор того, как она справилась с этой частью процесса, в своей статье «Конец эры: переход с WordPress на Gatsby».

Шаг 3. Создайте страницы

Учитывая, что Gatsby.js — это приложение React, разработчик React или, по крайней мере, опытный программист на JavaScript очень поможет вам в настройке Gatsby. Знание GraphQL также станет очень полезным при выполнении запросов и копании в ваших данных, особенно сейчас, когда эти страницы не обслуживаются базой данных MySQL.

Теперь, когда вы закончили создание страниц, вы можете безопасно удалить ресурсы (статические страницы и изображения) практически в любом месте! Ознакомьтесь с разделом Хостинг нашего списка из 100 инструментов, API и сервисов Jamstack для поддержки ваших сайтов, чтобы найти некоторые идеи, и ознакомьтесь с нашей статьей о бесплатном размещении статических сайтов с помощью автоматизированного конвейера.

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

Даже если ваш WordPress админа в Интернете (и есть много .htpasswd файл может сделать для вас), и даже если это неисправленное, и даже если ваш WP резервного получает испорчен, все это не повлияют на уже развернутые статические страницы, так как передняя часть «оторвана» от него.

Не поймите меня неправильно, даже если вы запускаете WordPress в локальной сети (LAN) за брандмауэром, вам все равно следует регулярно его обновлять.

Headless CMS

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

Войдите в » безголовую CMS » — систему управления контентом, которая все еще где-то работает как серверная часть, но полностью отделена от реального действующего веб-сайта.

WordPress — это распространенный выбор автономной CMS для статических сайтов, и на самом деле он может быть наиболее распространенным для крупномасштабных развертываний SSG. Хотя подход к миграции может охватывать множество ситуаций, у вас может быть слишком много устаревшего контента или слишком большая часть вашего процесса контента, встроенного в WordPress, чтобы массовая миграция была осуществима немедленно. Это особенно верно для крупных операций с контентом и цифровых медиа. Однако, если у вас меньше истории, которой нужно управлять, вам будет полезно взглянуть на более современные подходы к управлению контентом — миграция с сайта с динамическим обслуживанием — самое подходящее время для внесения таких изменений.

Реализованная нами миграция уже поддерживает Netlify CMS, хотя мы не будем здесь рассказывать, как использовать автономную CMS. Это тема, к которой мы вернемся с отдельной статьей в ближайшем будущем.

Digging Further

В такой статье мы можем охватить не так много, поэтому вот несколько дополнительных ресурсов по теме миграции WP с SSG.

Hugo

 

Основанный на языке программирования Go, Hugo — еще одно громкое имя для SSG с множеством доступных шаблонов и надежный вариант, который вы могли бы рассмотреть для Gatsby.js.

Есть инструменты для переноса WordPress на Hugo. Если вы ознакомитесь с этими руководствами, вы увидите, что, хотя у вас будет меньше гибкости, процесс должен быть немного проще, чем с Gatsby.js:

• Миграция с WordPress на Hugo, Крис Фердинанди
• Пошаговое руководство по миграции с WordPress на Hugo от Маттиаса Джениара
• Переход с WordPress на Hugo, Кристофер Кирк-Нильсен

Jekyll

 

Если вам удастся настроить среду Ruby, Jekyll, SSG, который может преобразовывать ваш простой текст в статические веб-сайты и блоги, станет еще более простым в использовании, хотя он будет генерировать только статические страницы, а не веб-приложения, такие как Gatsby.js.

Как и в случае с Gatsby, вы можете использовать ExitWP на основе Python для создания Markdown из WP. И у вас также есть исполняемый файл Windows wpXml2Jekyll для общих файлов Markdown, готовых к Jekyll, из экспорта WP XML.

Несколько полезных статей:

• Перенос блога с WordPress на Jekyll от Сэма Аткинсона
• Миграция с WordPress на Jekyll: часть 1 и часть 2 от Флориана Курджи
• Jekyll для разработчиков WordPress, Майк Ноймеген
• Решения «программное обеспечение как услуга» (SaaS)

Gatsby Cloud предлагает поддержку для создания и обслуживания сайтов Gatsby.js бесплатно или за плату, где вы можете автоматизировать свои быстрые сборки, получить доступ к предварительным просмотрам, создавать ежедневные изменения и запускать развертывания с легкостью на Netlify, Cloudflare, AWS CloudFront или Akamai.

HardyPress также генерирует статические сайты WordPress, и за определенную плату у вас будет панель администратора, откуда вы можете ввести учетные данные для доступа к вашим онлайн-установкам WP, чтобы управлять всем на месте: отключите живые установки WP, которые уже были импортированы, прозрачное развертывание в глобальный CDN, HTTPS, формы и поиск.

Другие связанные с WP SSG с коммерческой поддержкой — это Shifter, Strattic и Sitesauce.

Заключение

Для меня душевное спокойствие очень важно, и это одна из основных причин, почему я прекратил разрабатывать сайты WordPress много лет назад. Я ненавидел, что ошибка может появиться ( нулевой день или иначе) в любой момент времени и что, если ее не исправить вовремя, она поставит под угрозу мою работу. И поверьте мне, количество раз, когда я видел, как мои веб-сайты были деформированы или просто перестали работать из-за серьезного — и внезапного — обновления PHP или WP, — это больше, чем я хотел бы признать. Но эти проблемы безопасности исчезнут, если ваш сайт статичен !

На мой взгляд, WordPress уже достиг своего » пика нефти » в 2012 году (см. Google Trends: WordPress 2004 — настоящее время ). И если он не адаптируется очень быстро, он будет только продолжать терять долю рынка в пользу технологий, которые могут выполнять работу быстрее и безопаснее с улучшенными интегрированными рабочими процессами.

Мэтт Мулленвег, создатель WP и генеральный директор Automattic, также признал это, когда он начал поощрять разработчиков » глубоко изучать JavaScript » и решительным шагом отказался от серверной части WP PHP в пользу JavaScript, представив Calypso (см. его собственное размышление о процессе ). Это вызвало шок (и даже панику ) в сообществе из-за слухов о том, что WordPress полностью отказался от PHP. И Гутенберг был не чем иным, как еще одним шагом в этом направлении.