Переезд сайта с wordpress на hugo

Перенос сайта работающего на движке Wordpress в статический генератор сайтов Hugo. Конвертация html в markdown. Не просто, но игра стоит свеч

Предпосылки

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

Первые трудности и план действий

Встал вопрос, как перекодировать уже существующие страницы из html в markdown причем массово так сказать нажатием одной кнопки? Ответ был, но по каким то причинам не сработал. Точнее сработал % на 25, но и этот результат вообще не то что ожидал увидеть. Копать и выяснять, совсем не хочется. Поскольку в наличии не так уж и много записей, да и те что были, требовали некоторой редакции и дополнений. Да и структуру сайта в процессе эксплуатации захотелось поменять, что бы все было так сказать по полочкам разложено. И реализовать еще страницы с переводом на инглиш. Все это нужно закладывать на начальных этапах создания,чтоб потом не рыскать по всем страницам и исправлять их под один шаблон. Поэтому весь перенос произошел в полуавтоматическом режиме. Можно сказать практически в ручную. Так что у кого ооочень много постов, вас ждет гемор 😂, а может и повезет 😏. Так же необходимо было сделать перенаправление со страниц, которые были уже в индексе поисковиков. Чтобы не потерять так сказать ссылочную массу, которой походу и нет 😁, но сделать надо. А так же править внутренние ссылки в постах по новому месторасположению. Но это малая проблема, для этого можно написать скрипт переправляющий ссылки. Про конвертацию таблиц это вообще отдельный разговор. Зато потом писать посты одно удовольствие, хоть на коленке со смартфона и прочих гаджетов. А можно и не писать, просто надиктовывать.

Автоматическое конвертирование

Сначала попробовал единственный плагин для Wordpress, под названием WordPress to Hugo Exporter, но этот опыт был не удачным. Может кому повезет. Про применение и установку написано доходчиво в репозитории этого плагина.

После того, как уже реорганизовал сайт, нашел и опробовал скрипт по конвертации найденный на гитхабе. Ранее натыкался на него, но в каком то посте прочел какие то сомнения были у человека и не стал пробовать. Там доходчиво написано, что нужно установить, как запустить. Результат работы этого скрипта порадовал, не на все 100%, но все-таки лучше чем плагином и быстрее, чем ручками. Все посты хорошо конвертировались в Markdown, но ссылки соответственно нужно править, если посты поменяют свое местоположение. Но жирный минус - это таблицы их просто не стало, просто строки и все. Поэтому таблицы придется править в ручную. И такая беда со всеми конверторами, которые протестировал да же которые онлайн.

Для работы этого скрипта понадобится Node.js v12.14 и выше. При установке по умолчанию соглашаемся со всем и не надо ставить галочку когда спросят про какую-то автоматическую установку иначе подтянется питон и визуал студию с еще кучей библиотек. Это касаемо виндовс. На линукс не пробовал, пока.

Полуавтоматическая конвертация

Можно сказать, ручная работа. Для этого использовались конверторы онлайн.

Конвертация html to markdown

Для удобоваримости открывал запись для редактирования. Нажать три точки в правом верхнем углу Настройки выбрать Редактор кода или сразу нажать комбинацию клавиш Ctrl+Shift+Alt+M обратное переключение к визуальному редактору такое же. Поместить курсор в любую строчку кода выделить все Ctrl+A скопировать Ctrl+C перейти по ссылки на конвертор https://codebeautify.org/html-to-markdown вставить в левое окно. В правом окне будет текст в формате Markdown, который копируем. Единственное, цитируемый код помечается не между трех обратных кавычек, а отступом четырех пробелов. Как бы без разницы, результат отображения один и тот же, но все таки лучше будет переделать на обратные кавычки, в тексте более понятнее с такой маркировкой. Поэтому все таки плюс в карму скрипта на яве.

Конвертация Таблицы в markdown

Самая так сказать беда для всех встретившихся мне конверторов это таблицы. Их правил так же через онлайн конвертор. Так же в открытом редакторе кода нажать поиск Ctrl+F вставить текст поиска <!-- wp:table выделить и скопировать таблицу, пример таблицы в wordpress:

<!-- wp:table {"className":"is-style-stripes"} -->
<figure class="wp-block-table is-style-stripes"><table><tbody><tr><td>1с</td><td>5с</td><td>30с</td><td>1м</td><td>5м</td><td>10м</td><td>15м</td><td>30м</td><td>1ч</td><td>2ч</td><td>6ч</td><td>12ч</td><td>1д</td></tr><tr><td>1</td><td>5</td><td>30</td><td>60</td><td>300</td><td>600</td><td>900</td><td>1800</td><td>3600</td><td>7200</td><td>21600</td><td>43200</td><td>86400</td></tr></tbody></table></figure>
<!-- /wp:table -->

Все это помещаем в онлайн конвертор https://tableconvert.com/ru/html-to-markdown.Что то можно с удобством отредактировать. Если таблица широкая со множеством столбцов, поплывший результат исправляется масштабом страницы Ctrl+Колесо мыши результат выделяем и копируем, пример:

| 1с | 5с | 30с | 1м | 5м  | 10м | 15м | 30м  | 1ч   | 2ч   | 6ч    | 12ч   | 1д    |
|----|----|-----|----|-----|-----|-----|------|------|------|-------|-------|-------|
| 1  | 5  | 30  | 60 | 300 | 600 | 900 | 1800 | 3600 | 7200 | 21600 | 43200 | 86400 |

Результат:

1с	5с	30с	1м	5м	10м	15м	30м	1ч	2ч	6ч	12ч	1д
1	5	30	60	300	600	900	1800	3600	7200	21600	43200	86400

Конвертация markdown в BBCode

Эта темка мне на память. Решил продублировать посты на форуме подобрал не плохой онлайн конвертор под движок форума, которым пользуюсь. Без доп. редактирования естественно не обошлось, а как же без доработки напильником после сборки? 😀

Скопировать текст поста в markdown и вставить в левое окошко конвертора https://mm2bc.ustc-zzzz.net/ , справа будет результат. Есть не большое несоответствие в указаниях размера шрифта. Дабы не ковырять код движка форума проще скриптом подправить. Скрипт на линукс, мне так проще было побыренькому. Создать файл font-size.sh в отдельной папочке с содержимым

sed -ie 's/size=32px/size=200/g' *.md
sed -ie 's/size=24px/size=150/g' *.md
sed -ie 's/size=20px/size=125/g' *.md
sed -ie 's/size=16px/size=100/g' *.md

Так же создать файл любой, главное что бы расширение было .md и в него вставить содержимое правого окна онлайн конвертора, копировать надо только кнопкой в правом верхнем углу COPY OUTPUT. Сделать скрипт font-size.sh исполняемым. Запустить его, на выходе будут два файла. Открыть тот который создали для конвертированного текста BBCode, там будет готовый результат для форума.

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

Онлайн конвертор не принимает код написанный в обратных кавычках, пример:

Идет текст потом обратные кавычки с текстом `text`

Выглядеть на сайте будет так:

Идет текст потом обратные кавычки с текстом text

Так вот слово text будет заключено в такие тэги, которые движок форума не понимает, хотя они логичны.

[font=Monaco,Consolas,'Lucida Console','Courier New',serif][backcolor=#f6f8fa]text[/backcolor][/font]

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

Перенаправление старых ссылок на новые (redirect)

Необходимо чтобы модуль mod_rewrite был включен. Проверить это можно с помощью Webmin Службы - Веб сервер Apache вкладка Глобальная настройка - Configure Apache Modules в появившемся списке должна стоять галка в строке rewrite

С помощью терминала еще меньше телодвижений

sudo apachectl -M | grep rewrite

Если установлен на выходе будет:

rewrite_module (shared)

Если нет ничего, установить:

sudo a2enmod rewrite

Можно добавить в корень сайта файл .htaccess в нем прописать такие строки:

<IfModule mod_rewrite.c>
RewriteEngine On
# Перечислить все ссылки для перенаправления с начало старая потом новая
Redirect 301 /install-fastpanel/ https://wildserver.ru/category/server/install-fastpanel/
# И так далее все адреса
</IfModule>

В старом адресе прописывается не полный путь т.е. без указания домена /install-fastpanel/ в новом полностью весь путь.

Строка перенаправления строится по такой формуле Redirect 301 /старый адрес без указания домена/ https://домен.ru/новый путь/

Может можно и красивее сделать, но мне так удобнее и надежнее. Все адреса берутся из файла sitemap который генерируется плагином Wordpress например Yoast SEO или чем то специально для этого сделанное, не важно чем, главное удобно все ссылки собрать в кучу и перенаправить. Движок Hugo то же создает в корне сайта файл sitemap.xml их и будем сопоставлять со старыми адресами.

Поскольку сервер мой то нет надобности создавать в корне сайта файл .htaccess, нечего напрягать apache. Добавить редирект сразу в конфиг виртуального хоста. Так же после RewriteEngine on перечислить все редиректы.

После всех изменений конфига виртуального хоста сделать перезагрузку Apache Команды управления Apache

sudo systemctl reload apache2

Проверка перенаправления страницы

Для проверки правильного перенаправления страниц, воспользоваться одним из онлайн сервисов например:

https://redirectdetective.com/

Проверка работы перенаправления для примера взят тестовый сайт со страницы к которой обращаемся происходит редирект на основной сайт.

Перейти по ссылке выше и вставить в поле Enter URL to check for redirects... адрес с которого должно произойти перенаправление для примера в конфиге виртуального хоста прописал:

# Тест редиректа при смене адреса страницы, для перехода на хуго с вордпресс
Redirect 302 https://wildserver.gq/category/server/apache-install-debian/ https://wildserver.ru/webmin-install/

Для большей наглядности поставил 302 редирект

301 redirect – это постоянный редирект. Он указывает поисковым системам, что страница переехала на новый URL адрес и передаёт 90-99% ссылочного веса. 302 redirect – это временный редирект. Он не передаёт ссылочный вес и сообщает поисковым системам, что страница временно перемещена на другой URL адрес.

Вот что происходит если набрать адрес wildserver.gq/category/server/apache-install-debian/

Виден первый редирект - это переход на https, таким же будет результат, если в начале будет www или http, или без косой черты в конце, это другая история про настройку виртуального хоста. Второй переход это и есть новое местонахождение записи. Для наглядности изменим запрос на https://wildserver.gq/category/server/apache-install-debian/

Это значит все замечательно перенаправляется.

Сохранение старого сайта Wordpress

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