AstroブログにPagefind検索を追加：無料・爆速・日本語対応の完全ガイド
正直なところ、ブログの記事が増えてくると「検索機能をつけてほしい」という要望を読者からいただくようになります。「以前書かれていたXXについての記事が見つからない」と言われると、申し訳ない気持ちになります。
私も検索機能をつけたかったのですが、Algoliaは個人ブログには高すぎる（月額数十ドル）し、Elasticsearchを自前で運用するのは面倒で、ずっと先送りにしていました。
しかし数ヶ月前、Pagefind という素晴らしいツールに出会いました。設定は10分足らず、インデックスは数十KB、完全無料で日本語検索もバッチリ。導入して動作確認した瞬間、「なぜもっと早くこれを使わなかったんだ！」と後悔しました。
Pagefindは静的サイト専用の検索エンジンです。ビルド時にインデックスを生成し、検索処理はすべてブラウザ内で行われます。バックエンドもAPIも不要。何より無料です。
この記事では、以下の内容を解説します：
- なぜAlgoliaよりPagefindが個人ブログに向いているのか
- 10分で終わる導入手順
- 日本語検索の最適化設定
- よくあるトラブルの解決法
Astroでブログを運用していて、お金をかけずに検索機能をつけたいなら、この記事が答えです。
なぜPagefindを選ぶのか
静的検索というアプローチ
Pagefindは「静的検索」を行います。つまり、サイトのビルド時に検索インデックスを作り、静的ファイルとして配信します。
完全無料
Algoliaのように検索回数課金はありません。アクセスが急増しても費用はゼロです。
プライバシーファースト
検索クエリが外部サーバーに送信されません。すべてユーザーのブラウザ内で完結するため、プライバシーを気にする読者にも安心です。
バックエンド不要
サーバーもDBも不要。CDNに置くだけで動くので、ブログ本体と同じくらい安定しています。
オンデマンドロード
インデックスは細分化されており、検索した時に必要な部分だけを読み込みます。これにより初期ロード時間を犠牲にせず、快適な検索体験を提供できます。
Pagefind vs Algolia
| 比較項目 | Pagefind | Algolia |
|---|---|---|
| 月額費用 | 無料 | 無料枠あり（制限きつい）、有料は高い |
| データプライバシー | 完全ローカル | データを外部サーバーへ送信 |
| インデックスサイズ | 1万ページで300KB以下 | 全量インデックスが必要 |
| ロード方式 | オンデマンド | リアルタイムAPIコール |
| 設定難易度 | 数行のコード | APIキー管理やデータ同期が必要 |
| 向き不向き | 個人ブログ、ドキュメント | 大規模EC、企業アプリ |
Algoliaは確かに強力で、タイポ（入力ミス）耐性などは最強ですが、個人ブログにはオーバースペックです。Pagefindは必要十分な機能を、圧倒的に低いコスト（ゼロ）で提供してくれます。
実績と信頼性
Astro公式サイトのドキュメントテーマ「Starlight」も、デフォルトの検索エンジンとしてPagefindを採用しています。公式が選ぶツールですから、Astroとの親和性は保証済みです。
5ステップで導入完了
では実際に導入してみましょう。本当に簡単です。
Step 1: 依存パッケージのインストール
astro-pagefind と pagefind の2つをインストールします。
npm install astro-pagefind pagefindastro-pagefind はビルド時に自動でインデックスを作るための統合機能、pagefind は検索UIなどのコア機能を含んでいます。
Step 2: astro.config.mjs の設定
設定ファイルに統合を追加します。
import { defineConfig } from 'astro/config';
import pagefind from 'astro-pagefind';
export default defineConfig({
integrations: [pagefind()],
});これで npm run build を実行するたびに、自動的にサイト内検索インデックスが生成されるようになります。
Step 3: 検索コンポーネントの作成
src/components/Search.astro を作成します。
---
// src/components/Search.astro
---
<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<script>
window.addEventListener('DOMContentLoaded', () => {
new PagefindUI({
element: "#search",
showSubResults: true,
showImages: false
});
});
</script>View Transitionsを使っている場合は、ページ遷移で検索UIが消えないように transition:persist をつけます。
<div id="search" transition:persist></div>Step 4: ページへの配置
ヘッダーや専用の検索ページに配置します。個人的には専用ページ（/search）を作るのがおすすめです。
src/pages/search.astro:
---
import Layout from '../layouts/Layout.astro';
import Search from '../components/Search.astro';
---
<Layout title="検索">
<main>
<h1>記事を検索</h1>
<Search />
</main>
</Layout>Step 5: テスト
ビルドして動作確認します。
npm run build
npx pagefind --site dist --servehttp://localhost:1234 にアクセスして検索してみましょう。日本語で検索して結果が出れば成功です！
高度な設定と日本語最適化
インデックス範囲の制御
デフォルトではページ内の全テキストが検索対象になりますが、ナビゲーションやフッターなどの共通部分は除外したいですよね。
data-pagefind-body 属性を使います。
<body>
<nav data-pagefind-ignore>
<!-- 検索対象外 -->
</nav>
<main data-pagefind-body>
<!-- ここだけ検索対象になる -->
<article>
<h1>{title}</h1>
<Content />
</article>
</main>
<footer data-pagefind-ignore>
<!-- 検索対象外 -->
</footer>
</body>これをやるだけで、検索結果の精度が劇的に向上し、インデックスサイズも30〜50%削減できます。
メタデータと重み付け
検索結果に表示されるタイトルや画像を指定できます。
<!-- タイトル指定 -->
<h1 data-pagefind-meta="title">Astro検索機能ガイド</h1>
<!-- 優先度（重み）の調整 -->
<h1 data-pagefind-weight="10.0">重要ワード</h1>
<p data-pagefind-weight="1.0">普通のテキスト</p>日本語対応について
「海外ツールだけど日本語OK？」と心配になりますが、Pagefindは多言語対応しており、日本語も設定なしでかなり正確に分かち書き（単語区切り）してくれます。
「Astro 検索」でも「Astroの検索機能」でもヒットします。
唯一の弱点は「ピンイン検索（ローマ字入力）」ができないことですが、技術ブログなら困ることはほぼないでしょう。
よくあるトラブルと解決策
1. 検索結果のタイトルがおかしい
Pagefindは最初のH1をタイトルとして認識しますが、構造によっては誤認します。data-pagefind-meta="title" を明示的に指定して解決しましょう。
2. View Transitionsで動かない
ページ遷移後に検索ボックスが反応しなくなる場合、初期化コードが実行されていない可能性があります。
document.addEventListener('astro:page-load', () => {
new PagefindUI({ element: "#search" });
});DOMContentLoaded の代わりに astro:page-load イベントを使います。
3. デプロイ先で404エラー
/pagefind/pagefind.js が見つからないエラーが出る場合、ビルドコマンドを確認してください。astro-pagefind を使っていれば自動ですが、手動の場合は astro build && pagefind --site dist のように明示的に実行する必要があります。
まとめ
Pagefindは、個人ブログにとって「ちょうどいい」検索ソリューションです。
- コストゼロ
- 設定簡単
- 必要十分な機能
Algoliaの高機能さに憧れる気持ちもわかりますが、まずはPagefindを試してみてください。その軽快さと手軽さに、きっと満足するはずです。
AstroブログへのPagefind検索導入フロー
10分で設定完了する、完全無料・サーバーレスな全文検索機能の構築手順
⏱️ 目安時間: 10 分
- 1
ステップ1: パッケージインストール
`npm install astro-pagefind pagefind`を実行し、必要なライブラリを追加する。 - 2
ステップ2: 設定ファイル更新
`astro.config.mjs`に`import pagefind from 'astro-pagefind'`を追加し、integrations配列に`pagefind()`を加える。 - 3
ステップ3: UIコンポーネント作成
PagefindのCSS/JSを読み込み、`new PagefindUI()`で初期化する`Search.astro`コンポーネントを作成する。 - 4
ステップ4: インデックス範囲の最適化
記事本文のコンテナ（`<main>`など）に`data-pagefind-body`属性を付与し、ナビゲーションやフッターを除外することで精度を高める。 - 5
ステップ5: ビルドとテスト
`npm run build`を実行し、生成された`dist`フォルダで検索機能が動作するか確認する。
FAQ
Algoliaと比べて何が良いですか？
日本語の検索精度はどうですか？
検索インデックスが肥大化しませんか？
4 min read · 公開日: 2025年12月3日 · 更新日: 2026年4月20日
Astro 完全ガイド
検索からこのページに来た場合は、前後の記事もあわせて読むと同じテーマの理解がかなり早く深まります。
前の記事
Astro画像最適化の完全ガイド：読み込み速度を50%改善する5つの実践テクニック
Astroを使った画像最適化手法を徹底解説。Imageコンポーネントの設定、WebP/AVIFの使い分け、遅延読み込み戦略、Cloudflare CDNの活用まで。実測でLCPを6秒から1.8秒に短縮した全工程。
第 15 / 18 記事
次の記事
Hugo/Hexo/Next.jsからAstroへの移行ガイド：3日で完了する手順書
既存のブログをHugo、Hexo、あるいはNext.jsからAstroへ移行するための完全ガイド。3つの主要フレームワークごとの具体的な移行ステップ、落とし穴、そしてパフォーマンスがどれほど改善するかを詳細解説。
第 17 / 18 記事
関連記事
Astroとは？「ゼロJS」「アイランド」そして「コンテンツ優先」の真の意味を3分で解説
Astroとは？「ゼロJS」「アイランド」そして「コンテンツ優先」の真の意味を3分で解説
ゼロから作るAstroブログ：トップページからデプロイまで、1時間で完成させる完全ガイド
ゼロから作るAstroブログ：トップページからデプロイまで、1時間で完成させる完全ガイド
Astro Content Collections完全ガイド：概念からSchema検証の実践まで
コメント
GitHubアカウントでログインしてコメントできます