Pagefind による検索

(2024-03-30)

Pagefind というパッケージを使って記事内容の検索をおこないます。

Pagefind のインストール

Terminal window
npm add pagefind @pagefind/default-ui

ビルドします。

Terminal window
npm run build

インデックス作成。

Terminal window
npx pagefind --site dist

コマンド画面で以下のように表示されます。

Terminal window
[Building search indexes]
Total:
  Indexed 1 language
  Indexed 9 pages
  Indexed 484 words
  Indexed 0 filters
  Indexed 0 sorts

Search.astro の作成

src/components に Search.astro を作成します。

---
import "@pagefind/default-ui/css/ui.css";
---


<div class="search"></div>


<script>
  import { PagefindUI } from "@pagefind/default-ui";


  new PagefindUI({
    element: ".search",
  });
</script>

src/pages/index.astro を編集します。

 ---
 import Search from "../components/Search.astro";
 ---
 ...
 <h2>全文検索</h2>


  <p>
    以下のウィンドウにキーワード入力すると検索されます。
  </p>


  <Search />

本来はこれだけで動くようですが、私のローカル環境ではどうしても動きません。
ちょっとハマりました。

Firefox なのでブラウザのウェブ開発ツールからコンソールを確認すると、

MIME タイプ (“text/html”) が許可されていないため、“http://localhost:4321/pagefind/pagefind.js” からのモジュールの読み込みがブロックされました。

linux mint 21.3 + Firefox という環境ですが、アレコレやってみても解決しません。

で、ふと思ったのはローカル環境ではダメでもサーバーにデプロイすれば動くかもしれない…。

試しにデプロイすると見事に動きました。

ビルド時にインデックスを作成

ビルドしてデプロイする時にインデックスを自動で作成します。

package.json のビルドを以下のように変更します。

{
  "scripts": {
    "build": "astro build && pagefind --site dist"
  }
}