Переезд личного блога с Eleventy на Nuxt Content

Зачем переезжать?#

Чем ещё заняться в отпуске, кроме отдыха? Конечно — давно запланированным переездом личного блога на Nuxt Content.

Некоторое время назад решил переехать с Eleventy и посматривал в сторону Next.js, Nuxt и Astro. В итоге выбрал Nuxt потому, что хотелось быть ближе к текущему рабочему стеку на Vue.js. И ещё в Nuxt существует модуль Nuxt Content, который позволяет организовать file-based CMS и работать с каталогом markdown файлов.

Сам Nuxt меня привлёк относительной простотой и возможностью простой настройки SEO оптимизации для поисковых систем. Работая с Drupal мне приходилось много времени проводить над скучной настройкой метатегов и микроданных, поэтому в новом движке хотелось уменьшить время настройки SEO до минимума и сконцентрироваться на самом процессе работы над блогом.

Чем меня лично не устраивал Eleventy?#

В Eleventy версии 0.X приходилось использовать множество костылей, чтобы заставить нормально работать многоязычность (i18n). Также могу отметить неудобную работу с темплейтами и CSS файлами для отдельных компонентов.

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

Основные вызовы Nuxt Content#

i18n#

Было непросто правильно настроить i18n. Из документации неочевидно, что настройки языков нужно добавлять сразу в 3-х местах: @nuxtjs/i18n настраивается отдельно, для Vue I18n существует отдельный конфигурационный файл. И также надо не забыть добавить переключение языка в Nuxt Content. Причём настройки, такие как список языков и язык по умолчанию необходимо писать 3 раза. По сути эти настройки пересекаются. Почему бы это не унифицировать, непонятно.

RSS feed#

Не нашёл рабочего модуля, который полностью делает всю магию, поэтому пришлось написать получение данных для RSS вручную. В этой статье я описал, как подключить RSS ленту к сайту на Nuxt Content.

Sitemap#

С реализацией sitemap.xml попробовал несколько сторонних модулей и только один из них заработал. Пришлось немного подтюнить настройки, но в конце концов всё получилось.

Дубликаты страниц со слэшем в конце#

В Nuxt 3 нет простого способа сделать редиректы со ссылок с завершающим слэшем, как в Nuxt 2, а редирект с помощью Netlify не отдавал код 301 для страницы. Пришлось писать для этого отдельный middleware. Вот ссылка на пост с решением.

Что понравилось в Nuxt#

Работа с i18n#

После некоторой настройки всё начинает очень даже хорошо работать. Другие модули для SEO — Sitemap, Schema.org, подхватывают настройки языка и делают всю магию под капотом. В Eleventy приходилось это же делать вручную.

Работа с Content#

Ничем не отличается от работы с контентом в Eleventy. Разве что наличием специального MDC синтаксиса, с помощью которого можно втыкать компоненты Vue прямо в файлы markdown. В настройках можно включить Document-Driven mode, что значит, что не нужно писать запросы на получение данных. Nuxt Content делает это сам, требуется просто указать, из какой папки эти данные брать. В моём случае этот режим не подошёл. Насколько я понял, это работает только для очень простых сайтов, без i18n.

Работа с изображениями#

Для этого пригодился модуль Nuxt Image. Отличное решение для оптимизации и масштабирования изображений. Автоматически сжимает, делает обрезку картинок и складывает в отдельные папки кэша на сервере. Вся магия делается в режиме сборки.

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

Schema.org#

Модуль для Schema.org сильно упрощает работу с микроданными. В наличии есть шаблоны для большинства схем, причём нужно только указать основные значения, всё остальное модуль сделает сам.

Server Side Rendering#

Улучшает производительность сайта и делает его оптимальным для SEO оптимизации.

Color mode#

Использование цветовых схем в Nuxt работает проще простого. Для этого используется модуль Nuxt Color Mode. После простой настройки всё работает как часы. В Eleventy приходилось писать переключение темы вручную.

CI/CD#

Отличная интеграция с Netlify. По сути ничего не нужно делать, просто указать репозиторий Git, дальше всё происходит автоматически.

Что не понравилось в Nuxt#

• В каталоге множество модулей. Часть из них работает, часть нет. Часть давно мертвы, хотя и работают (пока). Не всегда указывается для какой версии Nuxt этот модуль написан, приходится каждый раз лезть в исходники и смотреть.
• Неочевидная настройка i18n. Повторяющиеся настройки в 3-х местах.
• При переключении i18n наблюдались проблемы с инициализацией сторонних скриптов и Vue плагинов. Частично с этим разобрался.
• Нет простого способа из коробки сделать редиректы со ссылок с завершающим слэшем, как было в Nuxt 2. Наличие таких дублей страницы, негативно влияет на SEO.

Итог#

Nuxt Content — хорошее решение для Git-based блога. Новый функционал легко наращивается сторонними модулями, или дописывается вручную. По производительности блога не заметил различий с Eleventy — server side rendering справляется со своей задачей. Большой плюс Nuxt — это возможность добавление динамического контента — лайков или комментариев.

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

Больше информации о Nuxt и Nuxt Content можно почерпнуть на официальных сайтах.

Ссылки:

• Eleventy — попробуйте найти здесь кнопку документации, надеюсь у вас получится 😃
• Nuxt
• Nuxt Content