AstroにPagefindの導入してサイト内検索を実装する

このサイト（motomura-it.com）のページ内検索に、Pagefind（https://pagefind.app/）を実装する。

※ホームのみに設置をしている。→ ホームへ（https://motomura-it.com/）

Pagefindは、ビルド後のHTMLファイルからデータを収集し、検索用のインデックスを生成する。

参考：Pagefindでお手軽！静的HTML検索導入（Astro編）

まずはライブラリのインストールを行う。

npm install pagefind @pagefind/default-ui

package.jsonファイルの記述を見つけて

"build": "astro build",

下に、"postbuild": 〜を追加する。

"build": "astro build", 
"postbuild": "pagefind --site dist",

componentsにSearchForm.astroを作成する。

---
import '@pagefind/default-ui/css/ui.css'
---

<div id="search"></div>

<script>
  import { PagefindUI } from '@pagefind/default-ui'
  new PagefindUI({
  element: '#search',
})
</script>

検索ボックスを表示したいページに、importする。

---
import SearchForm from "@/components/Search/SearchForm.astro";
---

（中略）

<SearchForm />

buildする。

npm run build