Сообщество RSS DEV
Подписаться
Журнал сборки: Перестройка моего блога на Astro, Cloudflare Pages и Umami
Автор перестроил свой личный веб-сайт, используя Astro, сосредоточившись на определенных принципах. К ним относятся поддержание SEO, владение всеми активами, минимизация JavaScript и обеспечение конфиденциальности и свободы от привязки к поставщику. Посты управляются как файлы Markdown в репозитории Git, с сохранением "слагов" для соответствия старым URL-адресам для непрерывности SEO. Процесс миграции включал скрипт для импорта постов, удаления ненужного контента, локальной загрузки изображений и их оптимизации.
SEO было критически важным аспектом, решенным путем внедрения канонических URL-адресов и 301 редиректов для старых путей блога на основной домен. Это консолидировало сигналы ранжирования на одном хосте. Возникла постоянная ошибка из-за оставшегося сервис-воркера Gatsby, который обслуживал кэшированный контент. Решением стал новый сервис-воркер "kill-switch" для отмены регистрации старого и принудительного обновления до живого сайта.
Функциональность поиска была реализована на стороне клиента с использованием статического JSON-индекса, что исключило необходимость в серверной части. Небольшая проблема с ограниченными стилями Astro была решена путем корректировки размещения CSS для динамически генерируемых элементов. Диаграммы Mermaid рендерятся явно на стороне клиента после асинхронного импорта, чтобы обеспечить их правильную загрузку. Для лучшей читаемости диаграмм была добавлена функция "клик для увеличения".
Гигиена тегов была решена путем консолидации тегов, используемых один раз, и дублирующихся тегов в канонические, при этом страницы с менее чем двумя постами были помечены для noindexing. Аналитика без использования файлов cookie была реализована с помощью Umami, с прокси первого лица через Cloudflare Pages Functions для обхода блокировщиков рекламы. В Umami было добавлено отслеживание событий для кликов по ссылкам.
View Transitions в Astro требуют повторной инициализации скриптов при каждой навигации, поскольку `transition:persist` не сохраняет прикрепленные к скриптам слушатели. Наконец, было установлено, что Rocket Loader от Cloudflare является причиной сбоев сайта в Safari, и он был отключен.
