В этой статье вы узнаете, как превратить ваш сайт на WordPress в статический сайт с помощью нескольких мощных инструментов. Мы сосредоточимся на переходе с WordPress на генератор статических сайтов и рассмотрим некоторые альтернативы, включая использование безголовой CMS.
Зачем тебе это? Потому что вы можете получить значительный прирост скорости и, следовательно, повысить производительность вашего сайта в поисковых системах, а также уменьшить (или исключить) счет за хостинг и значительно повысить свою безопасность.
Преимущества статики
Фантастическое ускорение, безусловно, немалое достижение, но это не все, что вы можете получить, превратив динамическую установку сайта WordPress (WP) в статическую.
Подведем итог:
Снижена скорость загрузки страницы. Страницы не подвергаются предварительной обработке во время выполнения (запрос пользователя), а содержимое не извлекается из базы данных. В результате
Уменьшенная задержка через CDN. Вы можете просто поместить эти статические страницы в распределенную сеть доставки контента (CDN), что значительно улучшит время отклика по всему миру.
Более легкое управление. После того, как вы настроите свой рабочий процесс — что мы и сделаем здесь — вы увидите, что вам на самом деле не нужно тратить дополнительные усилия на обслуживание, обновления WP или обновления сервера.
Значительно повышенная безопасность. HTTPS из коробки только со статическими страницами, которые не запускаются
Улучшенное SEO. Google ценит не только ваш контент, но и простоту и безопасность доступа к нему. На самом деле это одна из немногих оптимизаций для поисковых систем, которая все еще актуальна в наши дни: более быстрый и безопасный сайт будет лучше работать на странице результатов поисковой системы.
Душевное спокойствие. Нет необходимости обновлять PHP, нет проблем с неисправленными WP, даже нет управляемых серверов Linux. Просто расслабьтесь и выпейте свой кофе/пиво/чай/женьшень после развертывания.
«Безопасн ли WordPress?» Ну, это сложно...
Разработчики WordPress следуют хорошим стандартам и методам обеспечения безопасности, хотя долгосрочная поддержка (LTS)
обновление вашего сервера
установка обновлений WP
установка обновлений PHP
установка обновлений для плагинов и тем (если есть вообще)
управление WP и PHP (ни один из которых не имеет LTS) мэр обновляет время от времени
Все это — непрерывный процесс, и плагины — не второстепенная угроза, особенно необслуживаемые. У них часто есть дыры в безопасности, с помощью которых злоумышленники получают контроль над установками WordPress. Именно поэтому Automattic потребовались годы для поддержки некоторых плагинов на WordPress.com, коммерческой управляемой версии WordPress.
WordPress может быть безопасным, если приложить немало сознательных усилий. И хотя вы можете возразить, что это усилия, которые должен приложить любой достойный разработчик, также верно и то, что вы потенциально можете снять этот груз со своих плеч, превратив свой сайт WP в статический и при этом переопределив его архитектуру и удалив навсегда почти все доступные места, которые могут превратиться в угрозу безопасности. В конце концов, злоумышленник мало что может сделать с простыми файлами HTML, CSS и плоскими изображениями.
Однако вам все равно придется позаботиться о межсайтовых сценариях и подделке межсайтовых запросов. 🤷♂️
Предварительные сведения: ввод генераторов статических сайтов
Предоставлено: Netlify
Мы кратко рассмотрели генераторы статических сайтов (SSG) в нашем списке из 100 инструментов, API и сервисов Jamstack для поддержки ваших сайтов, и их гораздо больше, чем мы здесь расскажем, поэтому не забудьте проверить StaticGen, чтобы узнать больше.
Некоторые SSG специально нацелены на WordPress, например WP2Static, но мы сосредоточимся на более универсальном, Gatsby.js — «бесплатном фреймворке с открытым исходным кодом на основе React, который помогает разработчикам создавать молниеносно быстрые
Миграция WordPress
Я должен признать, что, как бы я ни хотел, чтобы этот процесс был предельно простым, есть ряд вещей, которые могут сделать его немного более громоздким и трудоемким, например, существующие плагины, которые вы, возможно, установили (чем меньше тем проще) и способ форматирования ваших сообщений (чем проще, тем лучше). Думайте об этом как о руководстве, которое вам может понадобиться приспособить к вашему конкретному случаю.
По сути, это то, что мы будем делать:
настроить Gatsby.js
экспортировать посты/страницы WP в Markdown
генерировать статические активы
Шаг 1: разветвите Gatsby Starters
Мы начнем с разветвления либо Gatsby Advanced Starter, либо Gatsby Material Starter, оба из которых являются модифицированными учебниками общего назначения для проекта Gatsby.js, а второй — с «утвержденным» шаблоном Material Design (демонстрация).
С самого начала эти стартеры предоставят вам полнофункциональное прогрессивное
невероятно быстрое время загрузки (предварительно обработанный HTML, автоматическая загрузка фрагментов JS)
Сообщения с уценкой (подсветка синтаксиса кода, встраивание видео с YouTube, встраивание твитов)
пагинация, теги, категории
Поддержка Disqus
Поддержка NetlifyCMS
Плюсы SEO (поддержка Google Analytics, создание файлов Sitemap и robots.txt, метатеги, Schema.org
каналы синдикации (RSS)
социальные функции (кнопка «Поделиться» в Twitter, LinkedIn и Telegram; количество репостов в Facebook и Reddit)
инструменты разработки (ESLint, Prettier, Remark -Lint, развертывание поддержки страниц GitHub и Netlify, файл конфигурации CodeClimate и бейдж)
и более!
Утверждается, что после успешной миграции и развертывания в CDN ваш сайт должен быть настолько производительным, что аудит с помощью Google Lighthouse должен показать наилучшие возможные результаты:
Установка и настройка
Сначала вам нужно установить Gatsby.js и Node.js, чтобы вы могли использовать gatsbyинтерфейс командной строки и менеджер пакетов npmNode.js. Для Node.js просто загрузите и установите, для Gatsby.js см. Быстрый старт или Настройка среды разработки.
Как только вы разберетесь с этим, вот как вы начинаете проект (помните, что вы также можете клонировать
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:
Вы также можете интегрировать Netlify CMS с GitLab или Bitbucket (см. Backend Configuration).
Шаг 2: Экспорт сообщений WordPress
В некоторых случаях вы можете преобразовать экспортированный файл XML со всеми сообщениями и страницами в файлы Markdown, просто используя ExitWP.
Однако, в зависимости от ваших настроек и настроек WP, этот процесс может потребовать некоторого мастерства; но все еще управляемо и стоит того.
Tania Rascia написала хороший обзор того, как она справилась с этой частью процесса, в своей статье The End of an Era: Migration from WordPress to Gatsby.
Шаг 3: Создайте страницы
Учитывая, что Gatsby.js — это приложение React, быть разработчиком React или, по крайней мере, опытным программистом JavaScript очень поможет вам в тонкой настройке Gatsby. Знание некоторого GraphQL также станет очень полезным при выполнении запросов и копании ваших данных, особенно теперь, когда эти страницы не обслуживаются базой данных MySQL.
К счастью, Gatsby.js очень хорошо документирован. Вот несколько полезных ресурсов:
Программное создание страниц из данных
Создание и изменение страниц
Программное создание страниц из данных
Теперь, когда вы закончили создание страниц, вы можете безопасно размещать активы (статические страницы и изображения) практически в любом месте! Ознакомьтесь с разделом «Хостинг «нашего списка из 100 инструментов, API и сервисов Jamstack для поддержки ваших сайтов, чтобы найти некоторые идеи, и ознакомьтесь с нашей статьей о бесплатном размещении статических сайтов с помощью автоматизированного конвейера.
Безопасность, на один раз!
Даже если ваш администратор WordPress находится в Интернете (и файл.htpasswd может многое сделать для вас), и даже если он не исправлен, и даже если ваша поддержка WP испорчена, ничто из этого не повлияет на ваши уже развернутые статические страницы. поскольку передняя часть «отсоединена» от него.
Не поймите меня неправильно, даже если вы используете WordPress в локальной сети (LAN) за брандмауэром, вам все равно следует регулярно обновлять его.
Теряю голову: безголовая CMS
Если вы дошли до этого момента, возможно, вам больше не нужно использовать WordPress. Хотя вы можете оставить администратора для создания новых сообщений и страниц, другой рабочий процесс будет использовать другую безголовую CMS для создания статических файлов для вас и синхронизации их с вашим репозиторием, все автоматизировано и за один шаг.
Введите «безголовую CMS «— систему управления контентом, которая все еще работает
WordPress — это распространенный выбор безголовой CMS для статических сайтов, и на самом деле он может быть наиболее распространенным для крупномасштабных развертываний SSG. Хотя подход к миграции может охватывать множество ситуаций, у вас может быть слишком много устаревшего контента или слишком много вашего процесса обработки контента, встроенного в WordPress, чтобы массовая миграция стала возможной немедленно. Это особенно актуально для крупных операций с контентом и компаний, занимающихся цифровыми медиа. Однако, если у вас меньше истории для управления, вам будет полезно взглянуть на более современные подходы к управлению контентом — миграция с динамически обслуживаемого сайта — самое подходящее время для внесения такого рода изменений.
Реализованная нами миграция уже поддерживает Netlify CMS, хотя мы не будем здесь рассказывать, как использовать безголовую CMS. Это тема, к которой мы вернемся в отдельной статье в ближайшем будущем.
Копаем дальше
В такой статье мы можем осветить не так много, поэтому вот несколько дополнительных ресурсов по теме миграции WP с помощью SSG.
Гэтсби.js
Официальный центр документации и блог очень обширны и очень хорошо написаны.
Вот несколько статей, связанных с WP:
Начало работы с Гэтсби и WordPress
Миграция на Gatsby.js и Jamstack с WordPress
Как создать блог с помощью WordPress и Gatsby.js: часть 1, часть 2 и часть 3
Хьюго
Основанный на языке программирования Go, Hugo — еще одно громкое имя для SSG с множеством доступных шаблонов и хорошим вариантом, который вы можете рассмотреть для Gatsby.js.
Существуют инструменты для миграции WordPress на Hugo. Если вы ознакомитесь с этими руководствами, вы увидите, что, хотя у вас будет меньше гибкости, процесс должен быть немного проще, чем с Gatsby.js:
Миграция с WordPress на Hugo, Крис Фердинанди
Пошаговое руководство по переходу с WordPress на Hugo от Mattias Geniar
Переход с WordPress на Hugo, Кристофер
Джекилл
Если вам удастся настроить среду Ruby, Jekyll, SSG, который может преобразовывать ваш обычный текст в статические
Как и в случае с 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 SSG с коммерческой поддержкой являются Shifter, Strattic и Sitesauce.
Выводы и размышление: умер ли король?
Душевное спокойствие очень важно для меня, и это одна из главных причин, по которой я перестал разрабатывать сайты на WordPress много лет назад. Я ненавидел, что ошибка может появиться (нулевой день или
На мой взгляд, WordPress уже достиг своего «пика нефти «в 2012 году (см. Google Trends: WordPress с 2004 г. по настоящее время). И если он не адаптируется очень быстро, он будет продолжать терять долю рынка в пользу технологий, которые могут выполнять работу быстрее и безопаснее с более интегрированными рабочими процессами.
Мэтт Мулленвег, создатель WP и генеральный директор Automattic, также признал это, когда начал поощрять разработчиков к «глубокому изучению JavaScript «и сделал смелый шаг, избавившись от серверной части WP PHP в пользу JavaScript, представив Calypso (читай: его собственные размышления о процессе). Это вызвало шок (и даже панику) в сообществе со слухами о том, что WordPress полностью отказывается от PHP. И Гутенберг был не чем иным, как еще одним шагом в этом направлении.
В конце концов, король может сохранить свою корону, если ему удастся заново изобрести себя. А если нет, то эй, запитать почти треть Интернета было немалым подвигом — да здравствует король!
