Pagefind で検索機能を付ける

Pagefind で Hugo 製のブログに検索機能を付けて Cloudflare Pages でデプロイする。

開発環境

pagefind_extended v1.0.4
hugo v0.120.4

本文

静的サイト向けの検索ライブラリである Pagefind を使って Hugo 製の当ブログに検索機能を追加し、Cloudflare Pages でデプロイする。

ローカル開発

私が当ブログを開発している環境には Node.js をインストールしていないので、下記からバイナリをダウンロードする。

https://github.com/CloudCannon/pagefind/releases

pagefind と pagefind_extended があり、Installing and running Pagefind によると

Pagefind publishes two releases, pagefind and pagefind_extended. The extended release is a larger binary, but includes specialized support for indexing Chinese and Japanese pages.

とのことなので pagefind_extended のほうを使う。

ダウンロードして tar.gz を展開したらルートディレクトリに配置する。

pagefind はビルド後の html に対してインデックス作成を行うため、

hugo

で一度ビルドする。

そしてインデックス作成だが、今回は各記事ページだけをインデックス対象にしたいので

./pagefind_extended --site public --glob="{logs,posts}/*/*.html" --output-path="static/pagefind"

として /logs と /posts 以下のパスにある個別記事を対象にインデックスを作成する。

/static/pagefind に配置するのはあくまでもローカル開発に使うためなので .gitignore に追記して push しないようにしておくと良い。

あとは hugo server で起動しつつ下記を参考にして適当に調整する。

Cloudflare Pages でデプロイ

ビルド後に pagefind でインデックスを作るようにするため、pagefind.sh というシェルスクリプトを作成した。

#!/bin/bash

wget https://github.com/CloudCannon/pagefind/releases/download/v1.0.4/pagefind_extended-v1.0.4-x86_64-unknown-linux-musl.tar.gz
tar -zxvf pagefind_extended-v1.0.4-x86_64-unknown-linux-musl.tar.gz
./pagefind_extended --site public --glob="{logs,posts}/*/*.html"

npx でダウンロードしてもいいのだが、Cloudflare Pages のデフォルトの Node はバージョンが古すぎて使いたくない。
しかし最新の node をダウンロードするとき、そこそこの頻度で異常にダウンロードが遅いときがある気がしているので、バイナリをダウンロードすることにした。

あとは Cloudflare Pages のビルドコマンドを

hugo && chmod +x ./pagefind.sh && ./pagefind.sh

に変更すれば完成である。

検索精度について

日本語の検索についてはちょっと微妙だなと思っているが、技術ブログなのでプログラミング言語名などがそれなりに検索出来ればいいかなと思っている。

以上