Как создать статическую HTML-копию вашего сайта на WordPress

Приветствую!

Сегодня я бы хотел рассказать вам как из динамического сайта на WordPress сделать простой статический HTML сайт.

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

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

Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится - тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.

Поехали!

Почему вы можете использовать простой статический веб-сайт

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

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

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

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

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

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

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

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

Знакомство с WP Static HTML Output Plugin

WP Static HTML Output Plugin существует уже долгое время и не зря. Этот плагин позволяет создавать полностью статическию копию всего вашего сайта на WordPress и развертывать их на других платформах.

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

WP Static HTML Output также упаковывает все ваши медиафайлы при экспорте вашего сайта. Вы также можете использовать его для хранения прошлой копии вашего сайта в качестве резервной копии.

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

Ключевые особенности:

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

Цена: бесплатно, доступна премиум-версия

Как создать статическую HTML-копию вашего сайта WordPress (и использовать ее с помощью GitHub)

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

Шаг 1 — Создайте статическую HTML-копию вашего сайта

Для этого шага мы собираемся использовать плагин WP Static HTML Output, который я представил ранее. Сначала вам нужно установить его и активировать на своем веб-сайте. После этого перейдите на вкладку «Инструменты — WP Static HTML Output» на своем сайте.

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

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

Продолжив, вы можете включить настройки для экспорта веб-сайта в виде zip-файла, который можно загрузить с панели мониторинга. В противном случае плагин просто экспортирует ваши новые файлы в директорию wp-content/uploads/. Здесь вы можете увидеть каталог с парой полных экспортов нашего сайта. Можно также выбрать, следует ли сохранить последний созданный экспорт для использования в качестве резервной копии:

Если вы хотите изменить папку, в которую плагин экспортирует ваши страницы, вы можете сделать это в разделе «Переопределить выходной каталог»:

Наконец, есть варианты, чтобы заменить ваши пути по умолчанию WordPress именами по вашему выбору. Идея заключается в том, чтобы скрыть тот факт, что ваш сайт был создан с помощью WordPress:

Использовать ли эту функцию или нет, зависит от вас, так как она никак не повлияет на функциональность экспортируемой страницы. Как только вы будете готовы создать статические копии ваших страниц WordPress, нажмите на кнопку «Start static site export»:

Теперь плагин выполнит свою работу, и вы сможете отследить его прогресс через журнал экспорта в нижней части вкладки:

Как только процесс будет завершен, вы увидите строку в Журнале экспорта около самого верха, в котором говорится, что «ZIP CREATED», включая ссылку справа:

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

Шаг 2 — Загрузите свой статический сайт на GitHub

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

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

После того как вы настроили учетную запись GitHub, вам нужно создать новый репозиторий. Введите описание, если вы хотите, чтобы ваш репозиторий был установлен в Public, затем нажмите кнопку «Создать репозиторий»:

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

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

Выберите ранее созданный репозиторий из списка и установите его «Локальный путь» в любую нужную папку. Вы собираетесь использовать эту папку для добавления файлов WordPress, поэтому убедитесь, что она находится там, чтобы вы могли вспомнить:

Разархивируйте экспортированный файл с шага номер один и извлеките его содержимое в папку локального репозитория, которую вы установили на шаге 2. Как только вы это сделаете, настольное приложение GitHub обнаружит изменения в репозитории. Укажите имя для первого фиксации, а затем нажмите кнопку «Commit to master»:

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

На данном этапе вы почти готовы получить доступ к своей странице. Однако сначала нам нужно настроить GitHub на распознавание вашего репозитория как веб-сайта. Для этого перейдите в настройки репозитория и найдите раздел «Страницы GitHub». В разделе «Источник» выберите параметр «Основной ветвь» и нажмите кнопку «Сохранить»:

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

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

Вывод

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

Вот как сделать работу и опубликовать ваши статические страницы бесплатно, всего три этапа:

Используйте плагин WP Static HTML Output для создания статической копии вашего сайта.
Загрузите свои статические страницы в GitHub.
Теперь у вас есть готовый статический сайт, который работает практически также как и на WordPress

У вас есть вопросы по созданию статических страниц WordPress? Давайте поговорим о них в разделе комментариев ниже!

До скорых встреч!

Юрич:

Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.