Zenn
🔍

Jekyllで構築した静的サイトにPagefindを導入する

2024/03/07に公開
Jekyll
GitHub Actions
pagefind
tech

PageFind導入の経緯

静的サイト内の全文検索、したいですよね。

https://tenax66.net

わたしはGithub Pagesでブログを書いており、そのサイト内検索用にlunr.jsを利用していました。しかしこのライブラリには

など、気になる点がいくつかあります。そのため、別のライブラリで検索機能を置き換えることにしました。
そこで候補にあがったのがPageFindです。

PageFind

https://pagefind.app/

PageFindは2023年9月にv1.0.0がリリースされたばかりの比較的あたらしいライブラリです。CloudCannonというCMS企業によって開発されているOSSで、Rustが採用されています。

公式サイトの記述によると、10000ページのサイトに対してPageFindのペイロード[2]は300kB以下になるそうです。
デフォルトで日本語を検索できるのもいい点です。[3]

Jekyllサイトへの導入

PageFindの導入は、公式サイトのQuick Startに沿って簡単に実施できます。
検索ボックスを導入したい場所に、以下のコードを貼りつけるだけです[4]。

<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        new PagefindUI({ element: "#search", showSubResults: true });
    });
</script>

実際に検索機能を動かすには、サイト直下のpagefind/ディレクトリにインデックスが生成されている必要があります。Github Actions経由でインデックス生成を実行する方法をみていきましょう。

Github Actionsからpagefindを実行

以下の記述は、Github Actionsを利用して[5]Github Pagesのデプロイができていることを前提とします。

公式のQuick StartではサイトがHugoをもちいて生成され、ビルド結果がpublic/ディレクトリに出力されることを前提としています。Jekyllの場合は通常_siteディレクトリに出力されるので、リポジトリ直下にpagefind.ymlを配置して以下の設定をいれます。

pagefind.yml
site: _site

次はインデックス構築の設定です。
workflowでnode.jsを導入し、npx -y pagefindコマンドを実行します。
このとき、インデックスを出力した_siteディレクトリが上書きされるのを避けるため、pagefindのインデックス構築がJekyllビルドより後に実行されるようにしてください。

- name: Setup Node.js
  uses: actions/setup-node@v4
  with:
    node-version: "20"

# Jekyllのビルドより後に実行されるようにする

- name: Run pagefind command
  run: npx -y pagefind

これで導入は完了です。

脚注

  1. いちおう、lunr-languagesなどを導入して対応させられる。 ↩︎

  2. indexにくわえ、PageFindのjavascriptそのものも含む。 ↩︎

  3. デフォルトで日本語の検索自体はできるが、ステミングには対応していない。そのため、他言語より検索精度が悪い部分はあるようである。個人ブログの範囲ではそこまで気にならなかった。 ↩︎

  4. PagefindはデフォルトでUIをもっているので、設定はこれだけでよい。ただし、ヘッダーに検索ボックスを置いている場合などはとうぜん表示が崩れるので、わたしはモーダルウインドウで対応した。 ↩︎

  5. Deploy from a branchではなく。 ↩︎

Discussion