Представляем Pagefind: Статический поиск с низкой пропускной способностью в масштабе

Лиам Бигелоу

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

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

Наша серия «SSGs сквозь века» посвящена истории этого пространства, и одной из тенденций, которую мы наблюдаем, является переход все более крупных проектов на статические сайты, чему отчасти способствует эффективность генераторов статических сайтов, таких как Hugo. Мы создаем множество таких сайтов для себя — документация CloudCannon не заслуживает внимания — а также для наших корпоративных партнеров, и каждый день наши клиенты создают еще больше сайтов на нашей платформе. По мере роста масштабов мы сталкиваемся с новыми и интересными проблемами. В прошлом мы выпустили инструменты с открытым исходным кодом для компонентно-ориентированной разработки, интернационализации, пагинации и переносимости. Теперь мы нацелились на поиск.

Проблема

Вы только что создали большой сайт документации и готовы к запуску, но сначала вы хотите, чтобы люди могли искать по вашему сайту. Что вы выберете?

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

Лично мне нравится идея внешнего поиска. Это означает, что мне не нужно содержать дополнительные серверы или интегрироваться с третьей стороной, и я могу продолжать предоставлять полностью статичный сайт, содержащийся в своем хранилище. Это также соответствует этике CloudCannon, основанной на Git-контенте. Точно так же, как вы продолжаете владеть своим контентом через Git, вы будете продолжать владеть своим поиском.

К сожалению, большинство библиотек статического поиска работают только на достаточно маленьких сайтах; фронтальный поиск требует отправки поискового индекса пользователю, а с существующими инструментами один индекс может занимать много мегабайт для большого сайта. Это большая проблема для наших пользователей на устройствах с низкой пропускной способностью, и даже если ваш поиск хорошо работает сейчас, что будет, когда ваш сайт вырастет? Кроме того, создание локального индекса может стать тяжелым занятием, которое часто похоже на перекомпоновку контента в другой формат. 

Именно эти ограничения часто заставляют разработчиков подключать сторонние платформы или создавать собственный поисковый индекс. Это решит проблему масштабирования, но тогда у вас появятся внешние зависимости от дополнительной инфраструктуры или стороннего поставщика, и вы начнете терять первоначальные преимущества полностью статического сайта. 

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

Наше решение: Pagefind

Именно здесь на помощь приходит Pagefind, который аккуратно решает проблемы, с которыми мы сталкиваемся каждый день, и даже добавляет несколько удобных функций. Pagefind отлично работает на самых маленьких сайтах, которые у вас есть под рукой, и с комфортом масштабируется до самых больших статических сайтов, о которых вы только можете подумать — мы можем запустить полнотекстовый поиск по всему MDN, занимающий менее 300 КБ, включая саму библиотеку Pagefind. Для большинства сайтов это будет ближе к 100 КБ. И все это без использования какой-либо выделенной инфраструктуры.

Pagefind существует как две половины. Во-первых, Pagefind — это CLI-приложение, которое запускается после создания сайта и индексирует отрисованный HTML, автоматически внедряя в статическое содержимое все необходимое для поиска. Этот рабочий процесс вписывается в методологию, которую мы называем «Static Site Chaining» — генераторы статических сайтов, которые сами принимают статический сайт в качестве входных данных. Это позволяет вам начать работу с нулевой конфигурацией и контролировать, что индексируется, а что нет, непосредственно из ваших существующих шаблонов. 

Вторая половина Pagefind — это поисковая библиотека, которая обращается к индексу и выполняет запросы к нему. Волшебство происходит в передаче данных между этими двумя половинами, и в первую очередь в том, как Pagefind выводит куски индекса. Вместо того чтобы создавать один большой поисковый индекс, Pagefind разбивает пространство поиска на упорядоченные фрагменты. Это означает, что при поиске слова «CloudCannon» не нужно загружать область индекса, содержащую слово «Jamstack». Кроме того, полный текст и метаданные результатов хранятся еще в одном месте, что дает вам возможность контролировать, сколько информации загружается по сети в определенный момент времени. Еще лучше то, что поскольку Pagefind занимается внедрением библиотеки на ваш сайт и ее загрузкой в браузер, эта внутренняя структура не является чем-то, с чем вы когда-либо взаимодействуете.

Чтобы дать вам представление о том, насколько простым может быть поиск, вот как индексировать сайт Hugo после его создания:

    hugo
    npx pagefind --source public 
Войдите в полноэкранный режим Выход из полноэкранного режима

Или Jekyll:

    jekyll build
    npx pagefind --source _site 
Войдите в полноэкранный режим Выйти из полноэкранного режима

Действительно, любая статическая папка с HTML-файлами может быть проиндексирована Pagefind. А с помощью скрипта постбилда CloudCannon вы можете автоматически индексировать свой сайт при каждой сборке.

Теперь выполним поиск по нашему сайту в браузере:

    let pagefind = await import("/_pagefind/pagefind.js");
    let search = await pagefind.search("nice");
    let result = await search.results[0].data();
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Или, чтобы получить самый простой опыт поиска на планете, просто вставьте фрагмент пользовательского интерфейса Pagefind в ваш шаблон, настройте переменные CSS, и пусть он делает свое дело.

Вы можете проверить, как быстро Pagefind ищет в блоге CloudCannon.

Сказать, что мы все в восторге от этого, значит преуменьшить. Кроме того, помимо простых поисковых запросов Pagefind поддерживает «поиск точных цитат», тегирование и фильтрацию контента, ранжирование по частоте терминов и многое другое. И все это в том же пакете с низкой пропускной способностью, который позволяет нам твердо стоять на ногах в #leanweb. 

Чтобы начать работу с Pagefind, всю документацию можно найти на сайте pagefind.app.

Мы рады видеть, как все больше людей используют Pagefind, и еще больше рады получить обратную связь! Так что если у вас возникли проблемы или есть идеи по улучшению Pagefind, откройте проблему или обсуждение в репозитории GitHub, и мы будем готовы помочь.

Оцените статью
devanswers.ru
Добавить комментарий