てきとーなブログ

静的サイトでも日本語の全文検索がしたい

ブログ運営#Pagefind#検索

静的サイト化で一番困るのが検索機能。WordPress なら標準で付いてくるが、S3 に HTML を置くだけの構成では検索サーバがない。

そこで Pagefind を使ってみた。ビルド時に HTML を走査して静的な検索インデックスを生成し、ブラウザ側で必要な断片だけを取得して検索する仕組み。日本語もそれなりに分割してくれる。

npx pagefind --site dist

これだけでインデックスが dist/pagefind/ に出力される。あとは検索ページで UI を読み込むだけ。

検索のたびにインデックス全体をダウンロードするわけではないので、記事が数百件あっても軽快に動くのが良い。