静的サイトジェネレータHugoで作成した技術ブログに検索機能を実装したかったので調べてみました。
静的サイト(SSG)向けの検索ライブラリだとpagefindが良さそうでした。完全に静的な全文検索ライブラリな為、サーバホスティングする必要なくhtmlファイルがあればそれらに対して検索することができます。
また検索UIも用意されているので導入も簡単です。

npxコマンドでpagefindライブラリ導入 見出しへのリンク

以下コマンド実行する。

npx pagefind --source "public"

フロントエンドへコード追加 見出しへのリンク

<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>

ローカルサーバでの動作確認 見出しへのリンク

  • hugoコマンドでhtmlファイル生成
hugo
  • httpサーバー起動
python3 -m http.server -d public

通常hugoはhugo server -Dコマンドでローカルサーバー起動するが、このコマンドだとpublic配下のコードを見ない為pagefindライブラリが機能しない。その為、pythonコマンドでサーバーを起動しpublic配下のコードを見る様にした。
ローカルサーバー起動後上手く表示されない場合は、themeのconfig.tomlで設定しているベースURLを修正すると正常化の可能性がある。

# 例
baseurl = "http://localhost:8000/"
  • 動作確認

pagefindの検索フォームが存在することを確認し全文検索をする。

Github Actions 見出しへのリンク

Work flowとしてGithub Actionsを利用していたので、hugoコマンドでサイト生成後にnpx pagefind –source “public"を実行する

,
,
,
- name: 'Build HUGO'
run: hugo --minify

- name: Index pagefind
run: npx pagefind --source "public"
,
,
,