DanLevy.net

Уроки обновления блога

Astro, Tailwind, MDX, Pagefind и многое другое!

Недавно я начал процесс обновления своего сайта на Gatsby v1, которому больше 8 лет.

Этот пост расскажет о том, какие уроки я вынес в ходе этой работы и какие интересные технологии я исследовал.

Содержание

Требования к проекту

Перед началом обновления я определил набор требований:

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

Кроме того, мне нужно было сохранить существующий контент и функции сайта, включая:

Выбор правильной технологической стеки

В течение лет я работал с множеством инструментов для статических сайтов, от Jekyll, Hugo, Slate и Gatsby. А также с множеством фронтенд-фреймворков: Ember, Knockout, Angular, Vue и, конечно, React.

Именно из-за этого у меня оказалось слишком много вариантов, которые я в конечном итоге сузил до Remix, Next.js и Astro,

Я мог бы написать целую серию статей о процессе оценки, но здесь я кратко изложу его:

Я выбрал Astro, потому что смог быстро делать значимые вещи.

Их дизайн API поразительно прост. Это хороший баланс между гибкостью и хорошими дизайнерскими решениями.

Было немного успокаивающе, что Astro не имеет явного предпочтения облачным решениям или амбиций фреймворка.

Astro не была единственной технологией, которую я использовал. Вот полный перечень стека:

Astro: Кривая обучения и ключевые особенности

Astro быстро стал основой моего обновления.

Вот некоторые ключевые особенности, которые я нашёл особенно полезными:

Некоторые вещи оказались немного неожиданными, например, работа с встроенными стилями Astro и эффект от display:contents.

<style>astro-island,astro-slot,astro-static-slot{display:contents}</style>

Сравнение .astro и клиентских компонентов

Компоненты Astro — это по сути HTML-шаблоны с мощным паттерном компонентов и пропсов. Они могут запрашивать данные во время сборки, обращаться к ресурсам бэкенда и скрывать определённую чувствительную информацию.

Лучший способ понять компоненты .astro — сравнить их с клиентскими компонентами. (React, Vue, Svelte и т. д.)

Что вам нужно сделать?Компонент .astroКлиентский компонент
Генерировать HTML с мощным шаблоном+паттерном компонентов✅❌
Запрашивать данные во время сборки✅❌
Обращаться к ресурсам бэкенда (напрямую)✅❌
Скрывать чувствительную информацию (токены доступа, API-ключи и т. д.)✅❌
Сокращать клиентский JavaScript✅❌
Использовать клиентские компоненты (React, Vue, Svelte и т. д.)✅✅
Добавлять интерактивность и обработчики событий (onClick(), onChange() и т. д.)❌✅
Использовать состояние и эффекты (useState(), useReducer(), useEffect() и т. д.)❌✅
Использовать API, доступные только в браузере❌✅
Использовать пользовательские хуки, зависящие от состояния, эффектов или API браузера❌✅

Современный CSS: Удивительно

Возвращаясь к разработке фронтенда, я был впечатлён прогрессом в нативном CSS:

Поиск: Pagefind

Реализация поиска по сайту без использования сторонних сервисов или хостинга баз данных казалась интересной задачей. В конце концов, у меня не 10 000 постов, которые нужно проиндексировать (пока что.)

Гуляя по интеграциям сообщества Astro, я наткнулся на потрясающий инструмент, о котором пожалел, что не знал раньше: Pagefind.

Мало каких инструментов решают задачу так хорошо, как Pagefind решает локальный поиск по сайту.

Простота внедрения Pagefind доставляет удовольствие. Его можно интегрировать с ЛЮБЫМ статическим контентом сайта, а вы можете выбрать, хотите ли вы использовать стандартный интерфейс или создать что-то кастомное по своему усмотрению.

Он аккуратно решил всё, что мне нужно. Интеграция заняла всего несколько минут, и большая часть работы заключалась в добавлении тега <div id="search"></div> и некоторого стилизования!

Комментарии: Utterances

К сожалению, мне пришлось попрощаться с Disqus и с накопленными годами комментариями.

Мне нужен был лучший контроль и прозрачность относительно сторонних скриптов на моем сайте.

Кроме того, всё должно быть простым и поддерживаемым.

Это привело меня к выбору отличного сервиса Utterances. Его система комментариев на основе GitHub-обсуждений хорошо соответствует моей аудитории. Плюс, он прост в настройке и бесплатен.

Tailwind: Сожаления

Есть только один инструмент, использование которого я всё больше сожалею: Tailwind.

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

Заключение

Обновление моего старого сайта на Gatsby v1 до современной стеки, построенной вокруг Astro, было увлекательным опытом. 10/10 рекомендую.

Если вы рассматриваете возможность обновления старого сайта или создания нового статического (или гибридного) сайта, настоятельно рекомендую изучить Astro. Кривая обучения может быть крутой в некоторые моменты, но преимущества в плане производительности, опыта разработчика и устойчивости проекта к будущим изменениям полностью оправдывают усилия.

Loading comments...