Руководство по генераторам статических сайтов с использованием Hexo и WordPress
Опубликовано: 2022-03-11Генераторы статических сайтов — это системы, которые компилируют шаблоны в статические HTML-страницы. Если это звучит эффективно — да, так оно и есть. Серверная обработка или рендеринг не выполняются, поэтому статические веб-сайты, как правило, очень быстрые и легкие, что экономит драгоценное время и пропускную способность для вас и ваших пользователей. Эта повышенная эффективность отражается в снижении затрат и, возможно, в увеличении доходов.
От оптимизации WordPress к статике
Говоря об эффективных источниках дохода, на ум приходит WordPress. Он поддерживает 28 процентов Интернета и представляет собой мощную платформу с множеством замечательных функций, включая расширенное управление пользователями и контентом, поддерживаемое множеством плагинов, тем, API и т. д.
Даже крупные игроки в нашей отрасли используют WordPress. Такие веб-сайты, как Smashing Magazine и CSS-Tricks , используют WordPress, хотя в обоих случаях они значительно настраиваются. Однако работа с WordPress может быть утомительной задачей, особенно при настройке и оптимизации производительности.
Я начал вести небольшой блог еще в 2015 году. Моим первым побуждением было использовать WordPress. Это дало мне толчок, так как я уже работал с WordPress. Я создал новый дроплет на DigitalOcean в качестве сервера, установил Vesta в качестве панели управления хостингом и установил WordPress в качестве платформы для блогов. В конце концов, я спроектировал и разработал совершенно новую тему WordPress. Не хватало только контента.
Я знал, что хочу поделиться некоторыми советами об Atom, так как в то время я использовал этот замечательный редактор. Я опубликовал несколько статей об этом и поделился ими с сообществом.
Сначала я не обращал особого внимания на производительность, потому что был слишком сосредоточен на содержании. Через некоторое время я заметил некоторые проблемы с производительностью. Оценка в Google PageSpeed Insights была паршивой, поэтому я усердно работал над исправлением и оптимизацией своего веб-сайта, достигнув почти идеальной оценки 99/100:
Я перешел с Nginx+Apache на Nginx+PHP-FPM.
Я использовал CloudFlare для скорости и защиты.
Я использовал Cloudinary для размещения изображений.
Я изменил свою тему и использовал Critical CSS.
Единственное предупреждение было о проблеме с кэшированием Google Analytics, которую я не знал, как исправить в то время.
Но что, если 99/100 или 100/100 по-прежнему не дают желаемой производительности? Вот тут-то и вступают в бой генераторы статических страниц.
Введите генераторы статических страниц и Hexo
Так что же такое генератор статических сайтов?
Как следует из названия, генератор статических веб-сайтов — это система, которая генерирует статические HTML-файлы. Обслуживание статических файлов HTML намного быстрее, чем создание страниц на лету. Нет серверного рендеринга или компиляции, что часто вызывает задержку загрузки страницы.
Говоря о производительности, нужно думать о кэшировании. Хотя существует несколько методов кэширования WordPress, обычно это непростая задача, в отличие от кэширования статических файлов. Обслуживание кэшированных файлов более эффективно, чем обслуживание реальных файлов с сервера, и может сэкономить время при загрузке веб-сайтов.
В июне этого года Виталий Фридман из Smashing Magazine представил JAMstack на семинаре в моем городе. Я никогда не слышал об этом, и я был очень заинтригован. После окончания семинара я немного изучил эту новую концепцию и понял, насколько она классная. Я понял, что моему сайту не нужен WordPress.
Первым шагом было решить, какой генератор статических страниц использовать. Я не знал, сколько их. Я решил попробовать структуру блога Hexo. Он может быть развернут в Netlify, имеет плагин для миграции с WordPress и использует Node.js, с которым я знаком, в отличие от Jekyll и Hugo, которые основаны на Ruby и Go соответственно. И, как я обнаружил позже, он быстро вспыхивает.
Миграция WordPress на Hexo
Установка Hexo настолько проста, насколько это возможно. Установите hexo-cli глобально с помощью npm, запустите команду hexo init , установите зависимости npm и вуаля:
npm i -g hexo-cli hexo init <blog-name> cd <blog-name> npm installЧтобы выполнить миграцию, установите плагин hexo-migrator-wordpress. Этот плагин ожидает XML-файлы в качестве источника. Файлы XML можно экспортировать с помощью инструмента экспорта WordPress, который можно найти в панели администрирования в разделе Инструменты -> Экспорт -> Wordpress . Наконец, введите команду hexo migrate , чтобы завершить импорт.
hexo migrate wordpress <source>Осталось только проверить результат. Запустите команду hexo server, чтобы запустить сервер и открыть браузер по указанному адресу.
hexo serverУценка и ее ограничения
Hexo поддерживает Markdown из коробки. Markdown — это язык разметки, который многие используют для форматирования файлов README, комментариев и сообщений. Но его можно использовать и для написания статьи. Его синтаксис интуитивно понятен и прост в освоении.
Еще одним преимуществом Markdown является то, что он генерирует чистый и корректный HTML. Это позволяет разработчикам создавать чистые и поддерживаемые правила CSS для оформления статей и страниц блога.
Жизнь разработчика никогда не бывает легкой. Мы часто сталкиваемся с проблемами, которые могут заставить нас тратить время на неожиданные вещи. Если мы чему-то научимся по пути, значит, мы не потратили это время впустую, и это хорошо. То же самое случилось со мной. Я думал, что все прошло хорошо, потому что не было ошибки компиляции, но потом я заметил, что некоторые вещи работают не так, как ожидалось.
Например, демоверсии Codepen не загружались. Я искал плагин Hexo и нашел его. К сожалению, этот плагин не был официальным и генерировал недопустимые HTML-ошибки. Я хотел внести свой вклад и исправить проблемы, но последний пулреквест оставался нерешенным более полутора лет. Я решил, что будет проще разветвить репозиторий, исправить проблемы и опубликовать плагин на странице Hexo, чтобы любой мог им пользоваться. Плагин был принят, я обновил контент, и демоверсии Codepen работали как часы.
Аналогичные проблемы возникали с вставками CanIUse. Теперь, когда я знал, как создать плагин Hexo, не было оправдания не делать этого. Мой плагин hexo-caniuse также был опубликован, как и мой плагин hexo-cloudinary для адаптивных изображений, загружаемых из Cloudinary CDN.
Редизайн и оптимизация
Дизайн сайта довольно фундаментален. Hexo предлагает несколько бесплатных тем на официальном сайте, но мне нужна была уникальная тема для моего сайта Hexo. После того, как я прочитал документацию и научился настраивать Hexo, я начал разрабатывать оригинальную тему с нуля.
Для создания новых шаблонов я решил использовать EJS для шаблонизации. Никогда не работая с EJS, я увидел в этом возможность изучить новый синтаксис шаблонов. Если вам не нравится EJS, Hexo предоставляет вам поддержку Swig, Haml или pug через плагины.
В процессе редизайна я уделял пристальное внимание производительности. Следуя рекомендациям, мы можем еще больше ускорить работу нашего статического веб-сайта. Размещение файлов JavaScript в нижней части документа и использование критического метода CSS создает наилучшие впечатления для вашей аудитории.
SEO-оптимизация имеет решающее значение для видимости блога в поисковых системах, таких как Google. В Hexo есть встроенный помощник для вставки данных Open Graph. Hexo использует файлы YAML для хранения конфигурации сайта и темы. Я использовал файл конфигурации темы для настройки имени сайта, описания и различных социальных идентификаторов.
Добавление Gulp или Webpack в процесс сборки всегда полезно и рекомендуется. Я использовал Gulp для минимизации и сжатия файлов CSS и JavaScript, и все было готово. Я мог развернуть его.
Нетлайф
Netlify — это платформа, предоставляющая хостинг для веб-сайтов и приложений с молниеносной производительностью. Он позиционирует себя как единая платформа, которая автоматизирует код для создания производительных и простых в обслуживании веб-сайтов.
Просто введите свой код, а мы позаботимся обо всем остальном.
Как и следовало ожидать, настроить веб-сайт просто:
Настройте домен.
Измените записи DNS.
Настройка сборки и развертывания.
Включите SSL.
Когда все было настроено, я провел несколько основных тестов, чтобы увидеть результаты, включая тест скорости веб-сайта Pingdom, тест веб-страницы и Testmysite.io. Результаты были превосходными, так как сайт получил самые высокие оценки по каждому инструменту.
CloudFlare
Несмотря на отличные оценки, я хотел попробовать CloudFlare, просто чтобы посмотреть, насколько это дополнительно ускорит работу сайта. Поначалу CloudFlare может быть ошеломляющим, но научиться его использовать очень важно. После того, как я настроил CloudFlare, я повторил тесты, и результаты стали еще лучше.
Последним тестом был Google PageSpeed Insights. Оценка была почти 100% как для мобильной, так и для десктопной версии. Проблема заключалась в кешировании браузера Google Analytics. Мне удалось решить проблему с помощью приложения CloudFlare для Google Analytics.
Сколько это стоит?
Использование Hexo на Netlify с CloudFlare ничего не стоит.
Hexo — это платформа с открытым исходным кодом, поэтому она бесплатна независимо от того, как вы решите ее использовать. Он имеет большое сообщество и является третьим по популярности генератором статических страниц с открытым исходным кодом согласно StaticGen.
У Netlify есть открытый план, который предоставляет нам отличные возможности для нашего хостинга. Изображения также размещаются на открытом плане Cloudinary. Бесплатный план CloudFlare позволяет нам настроить большое количество правил, которые могут ускорить работу вашего и без того быстрого веб-сайта. Это также позволяет нам решить проблему кэширования браузера Google Analytics. Я тоже не платил за домен, так как использовал бесплатный личный домен, предоставленный государством.
Эта настройка проекта сократила мой бюджет до минимума. Если вам нужны более продвинутые функции для вашего проекта, генератор статических страниц может сэкономить вам несколько долларов.
Обслуживание кэшированных файлов означает снижение использования ЦП и полосы пропускания, что, в свою очередь, означает, что вы можете использовать более дешевые тарифные планы хостинга с менее мощным оборудованием. Мало того, ваш веб-сайт будет намного быстрее, а это означает, что ваши пользователи будут наслаждаться просмотром как на мобильных, так и на настольных устройствах. А поскольку скорость загрузки страницы может повлиять на ранжирование в Google Поиске, ваш сайт будет занимать более высокие позиции, привлекая еще больше посетителей.
Все это означает, что вы можете потратить часть своего бюджета на что-то другое — например, на продвижение своего сайта или создание дополнительного контента, что поможет получить чуть больше дохода.
Случай с генераторами статических сайтов
Переход с WordPress на генератор статических страниц — непростая задача, и это определенно не то, что должен делать каждый пользователь WordPress. Однако Hexo сделал этот переход относительно безболезненным благодаря своим плагинам, отличной документации и простому API.
Прежде чем решить, хотите ли вы перенести свой продукт на статическое решение, вам необходимо знать об ограничениях, связанных с генераторами статических страниц, таких как ограничения контента, кривая обучения Markdown и контроль версий.
Вы также должны знать, что Hexo — это фреймворк для блогов. Он идеально подходит для разработчиков и технических специалистов, умеющих пользоваться текстовым редактором и терминалом. Если вам нравится использовать веб-интерфейс для управления своим контентом, есть плагин, который также обеспечивает эту функциональность. Он называется hexo-admin и довольно популярен.
Если вы уже используете WordPress, вам следует остановиться и подумать, какие функции WordPress вы используете прямо сейчас, а какие необходимы. У вас сложная структура контента? Вы используете управление пользователями? Используете ли вы много плагинов на своем экземпляре WordPress и все ли они необходимы? Довольны ли вы работой вашего сайта?
Если ответ на большинство или все эти вопросы отрицательный, то вы готовы перегрузить свой сайт с помощью генератора статических страниц. В зависимости от варианта использования и ваших требований статические страницы могут помочь максимизировать эффективность при минимальных затратах. Если, с другой стороны, вам нужна гибкость WordPress, вы, вероятно, даже не рассматриваете такой шаг.