Админ-мастерская — переход с WordPress на Hugo

Оглавление

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

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

Этот блог был создан 19 лет назад под названием «Mis Cosas Geek», используя термин «Geek» для человека, увлечённого технологиями, однако в последние годы этот термин всё чаще ассоциируется с поп-культурой, видеоиграми, комиксами, фильмами и культовой музыкой, а также с научной фантастикой и фэнтези, и это не цель этого блога, поэтому с этого момента этот сайт будет называться «Мастерская администраторов», и мы продолжим говорить о электронных неудачах, разработке и некоторых новых темах, таких как домашняя автоматизация и 3D-печать.

Новый Stack
#

Это изменение названия не могло быть единственной новшей, и из-за этого оно также было перенесено на технологический уровень для генерации статического HTML, причинами этого изменения являются предотвращение поддержания базы данных и написания в Markdown, а также улучшения SEO, производительности, доступности и безопасности (в основном, потому что это статический html :D).

wp2hugo как инструмент для выполнения миграции.
Хьюго как генератор статичных сайтов.
Blowfish тема
Действия на Github
Microsoft Translator с бесплатным уровнем (Azure F0) для переводов на другие языки и 2 миллионами символов в месяц.
Работники Cloudflare
[Brevo](Para Newsletter)
Купи мне кофе
Pholo Проверка сайта для любителей RSS, как я, но обновлено с помощью ИИ

Выбор статического генератора сайтов
#

Выбор был на Hugo, на новом этапе я хочу сосредоточиться на написании текстов, а не на поддержании плагинов, обновлений, SEO и т.д., при этом сохраняя при этом наивысшую производительность. Hugo обладает преимуществами по сравнению с аналогичными технологиями, такими как Astro, Jekyll или Next.js.

У него нет зависимостей
Кривая обучения низкая.
Её скорость очень высокая.
Он современный, прежде всего по сравнению с Джекиллом
Простота

Следующий шаг — выбрать тему, которая насыщенная, хорошо продуманная, с встроенными функциями и не перегружена, после сравнения нескольких существующих тем Blowfish, был выбран.

Экспорт
#

Для миграции первым делом нужно извлечь содержимое и файлы из старого Wordpress** с помощью одной из библиотек, доступных на Github. После сравнения множества инструментов, таких как wordpress-export-to-markdown,markdown-exporter-for-wordpress и wp2hugo, последний явно выиграл благодаря следующим преимуществам:

Комментарии к выпискам
Он позволяет скачать не только ссылки на изображения и файлы, но и все существующие в WordPress
Корректно трансформируйте HTML Wordpress, включив блоки кода
Позволяет настраивать структуру файлов и папок в новом блоге
Поддерживает wordpress и GUID слаги

Процесс развертывания
#

Что касается развертывания, хотя в профессиональной жизни я использовал Jenkins, шаблоны Gitlab CI/CD и Azure Devops, я никогда не пользовался Github Actions, и опыт оказался замечательным.

Для «хостинга» сайта использовался](https://www.cloudflare.com/products/workers/) [Cloudflare Workers, который позволяет бесплатно развёртывать даже в приватных репозиториях, неограниченное количество запросов, 20 000 файлов, 25 Мб на файл, реальные 301 перенаправления (для поддержания редиректов старых RSS-лент Wordpress), 404 страницы на язык и прочее.

Всё в коде: .github/workflows/publish.yml (Действие «Опубликовать») и Cloudflare wrangler.jsonc (Рабочий).

Каждый толчок основного запускает Действие, которое выполняет две задачи подряд:

1. Перевод
#

Я хотел бы, чтобы блог охватил больше людей, для этого я выбрал самые распространённые языки в мире, и публикации будут автоматически переведены на них:

Испанский
Английский
Китайский мандарин
Хинди
Испанский
Французский
Арабский
Бенгальский
Португальский
Русские

Для этого я использую translate.py , который переводит новые или изменённые посты с помощью Microsoft Translator бесплатно и загружает переводы в репозиторий. Если ничего нет, скрипт заканчивается за секунды без каких-либо затрат. - Если перевод не удаётся или квота заканчивается: он всё равно отображается, поэтому пост на испанском всё равно публикуется. - Вы можете возобновить ожидающие переводы или переразвернуть вручную: Actions → Publish → Run workflow. - Секреты GitHub: AZURE_TRANSLATOR_KEY, AZURE_TRANSLATOR_REGION, CLOUDFLARE_API_TOKEN (“шаблон Edit Cloudflare Workers”, зона talleradmin.com) и CLOUDFLARE_ACCOUNT_ID.

2. Развертывание
#

Собрать с помощью Hugo (последняя версия с поддержкой Blowfish) и развернуть с помощью wrangler.jsonc в Worker Cloudflare.

Информационный бюллетень
#

Я не уверен, живы ли ещё рассылки или умирают, поэтому создал одну с помощью [Brevo](Para Newsletter) , чтобы протестировать её. Меня удивило, что функция, которая 20 лет назад предоставляла сотни бесплатных сайтов вебмастерам, теперь стала ультра-ограниченным платным сервисом. Тем не менее, согласно тому, что я нашёл в исследованиях, Claude and I Brevo, похоже, предлагает лучший бесплатный тариф с автоматизацией RSS.

Другие темы, рассмотренные и перенесённые
#

Доступность
Adsense
Google Search Console: перенести блог, так как домен также сменился rubeninfante.com на talleradmin.com
Партнерские ссылки на Aliexpress и Amazon

Оптимизировать изображения

sudo apt install optipng jpegoptim
find static/wp-content -iname '_.png' -print0 | xargs -0 -P"$(nproc)" -n4 optipng -o2 -strip all -quiet
find static/wp-content -iname '_.jp\*g' -print0 | xargs -0 jpegoptim --strip-all --all-progressive -q

Обзор robots.txt
Обзор акцентов в категориях и тегах
В моём случае я очищал теги и категории с помощью файла static/_redirects
Очистка неиспользованных файлов
Я добавил изображения на каждую страницу и один универсальный для случаев, когда нет static/img/social-default.jpg и assets/img/background.jpg
Проверьте плагины Wordpress перед миграцией и отключите все, кроме самых необходимых.
Модифицировать и создавать перенаправления с rubeninfante.com на talleradmin.com

В повседневной работе
#

Командование
#

Создать новый элемент
```
hugo new posts/mi-nuevo-articulo/index.md
```
- Если изображение в папке mi-nuevo-articulo называется feature.[jpg,png,webp] оно будет использоваться как основное изображение, заголовок и социальные сети
Проверьте наличие сломанных ссылок
- Создайте lychee.toml файл у корня сайта с содержимым
```
  # lychee.toml — enlaces que no se comprueban (expresiones regulares)
  exclude = [
    "#nolychee$",   # la marca de evitar enlaces
    "https://web.archive.org/web/*",
    "reddit.com/submit",
    "facebook.com/sharer",
    "linkedin.com/shareArticle"
  ]
  exclude_path = ["^public/(en|zh-cn|hi|fr|ar|bn|pt-br|ru)/"]
```
- Выполните команду:
```
  hugo --gc --cleanDestinationDir
  lychee --root-dir "$PWD/public" 'public/**/*.html' --format markdown --output informe.md
```
- Обзор informe.md
  - Добавьте https://web.archive.org/web/в начало URL, если ссылка больше не существует
  - Добавьте #nolychee в конце ссылки или в lychee.toml файл, если обнаружение некорректно из-за антиботов или других причин

Чтобы обновить тему
#

Обновить тему

  cd themes/blowfish
  OLD=$(git rev-parse HEAD)                                  # para comparar después
  git fetch --depth 1 origin main && git checkout -B main origin/main

Прочитайте файлы, которые вы переписали по этому вопросу

  cd ../..
  for f in $(cd layouts && find . -type f); do git -C themes/blowfish diff --quiet $OLD HEAD -- "layouts/${f#./}" 2>/dev/null || echo "Revisar: layouts/${f#./}"; done

Изображения
#

Важно знать маршруты хранения изображений блога:

assets изображения, которые использует тема и которые может оптимизировать: фон (по умолчаниюBackgroundImage), избранное изображение по умолчанию (defaultFeaturedImage) и фото автора. Вот почему background.jpg там нормально: тема уменьшает её, и 3,4 МБ не отображаются.
static для которых нужен фиксированный и неизменённый URL: фавиконы, ads.txt, PDF-файлы, файлы для скачивания или изображения, на которые вы ссылаетесь извне. В качестве примера я social-default.jpg разместил его туда, потому что WhatsApp и X просят стабильный URL.
Imágenes de un post concreto: В папке самого поста (page bundle).
ПРИМЕЧАНИЕ В hugo.toml я также настроил static как ассеты. Вот почему статические изображения оптимизируются, когда тема использует их как обложку. Это исправление миграции с WordPress.
```
  [[module.mounts]]
    source = "static"
    target = "assets"
```

Добавить язык
#

Файлы, которые подлежат изменению и добавлению

  config/_default/languages.xx.toml
  config/_default/menus.xx.toml
  i18n/xx.toml (Sólo en el caso del que el tema no incluya el idioma)

Модифицировать /config/_default/params.toml

  newsletter.formAction]
    es = "https://..."
    xx = "https://..."

Новый Stack#

Выбор статического генератора сайтов#

Экспорт#

Процесс развертывания#

1. Перевод#

2. Развертывание#

Информационный бюллетень#

Другие темы, рассмотренные и перенесённые#

В повседневной работе#

Командование#

Чтобы обновить тему#

Изображения#

Добавить язык#

Понравилось? Подпишитесь, чтобы ничего не пропустить.