デモとして、このブログに Pagefind を導入してみました。ヘッダーの検索アイコンをクリックすると検索フォームが表示されるので、キーワードを入力して検索してみてください。 使い方 Pagefind は構築済みの UI ライブラリと、CLI コマンドとしてインデックスを作成するためのツールから構成されています。まずは UI ライブラリの部分から見てみましょう。 UI ライブラリ Pagefind の UI ライブラリは、検索フォームと検索結果を表示するためのコンポーネントから構成されています。この UI は以下のコードを追加するだけで簡単に利用できます。 <link href="/pagefind/pagefind-ui.css" rel="stylesheet" /> <script src="/pagefind/pagefind-ui.js"></script> <div id="s
![静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind](https://cdn-ak-scissors.b.st-hatena.com/image/square/399e585fa66d660bffa9244102b089b82b4b2c4d/height=288;version=1;width=512/https%3A%2F%2Fazukiazusa.dev%2Fblog%2Fogp%2F%25E9%259D%2599%25E7%259A%2584%25E3%2582%25B5%25E3%2582%25A4%25E3%2583%2588%25E5%2590%2591%25E3%2581%2591%25E3%2581%25AE%25E5%2585%25A8%25E6%2596%2587%25E6%25A4%259C%25E7%25B4%25A2%25E3%2582%25A8%25E3%2583%25B3%25E3%2582%25B8%25E3%2583%25B3%25E3%2581%25A8%2520UI%2520%25E3%2583%25A9%25E3%2582%25A4%25E3%2583%2596%25E3%2583%25A9%25E3%2583%25AA%25E3%2581%25AE%2520Pagefind%2Fpagefind.png)