BetterLink Logo 比隣
言語を切り替える
中文 English 日本語
テーマを切り替える

AstroブログにPagefind検索を追加：無料・爆速・日本語対応の完全ガイド

正直なところ、ブログの記事が増えてくると「検索機能をつけてほしい」という要望を読者からいただくようになります。「以前書かれていたXXについての記事が見つからない」と言われると、申し訳ない気持ちになります。

私も検索機能をつけたかったのですが、Algoliaは個人ブログには高すぎる（月額数十ドル）し、Elasticsearchを自前で運用するのは面倒で、ずっと先送りにしていました。

しかし数ヶ月前、Pagefind という素晴らしいツールに出会いました。設定は10分足らず、インデックスは数十KB、完全無料で日本語検索もバッチリ。導入して動作確認した瞬間、「なぜもっと早くこれを使わなかったんだ！」と後悔しました。

Pagefindは静的サイト専用の検索エンジンです。ビルド時にインデックスを生成し、検索処理はすべてブラウザ内で行われます。バックエンドもAPIも不要。何より無料です。

この記事では、以下の内容を解説します：

  • なぜAlgoliaよりPagefindが個人ブログに向いているのか
  • 10分で終わる導入手順
  • 日本語検索の最適化設定
  • よくあるトラブルの解決法

Astroでブログを運用していて、お金をかけずに検索機能をつけたいなら、この記事が答えです。

なぜPagefindを選ぶのか

静的検索というアプローチ

Pagefindは「静的検索」を行います。つまり、サイトのビルド時に検索インデックスを作り、静的ファイルとして配信します。

完全無料
Algoliaのように検索回数課金はありません。アクセスが急増しても費用はゼロです。

10分
設定時間
インストールから公開まで
<100KB
インデックス
1万ページでも軽量
無料
月額費用
無制限に使えます

プライバシーファースト
検索クエリが外部サーバーに送信されません。すべてユーザーのブラウザ内で完結するため、プライバシーを気にする読者にも安心です。

バックエンド不要
サーバーもDBも不要。CDNに置くだけで動くので、ブログ本体と同じくらい安定しています。

オンデマンドロード
インデックスは細分化されており、検索した時に必要な部分だけを読み込みます。これにより初期ロード時間を犠牲にせず、快適な検索体験を提供できます。

Pagefind vs Algolia

比較項目PagefindAlgolia
月額費用無料無料枠あり（制限きつい）、有料は高い
データプライバシー完全ローカルデータを外部サーバーへ送信
インデックスサイズ1万ページで300KB以下全量インデックスが必要
ロード方式オンデマンドリアルタイムAPIコール
設定難易度数行のコードAPIキー管理やデータ同期が必要
向き不向き個人ブログ、ドキュメント大規模EC、企業アプリ

Algoliaは確かに強力で、タイポ（入力ミス）耐性などは最強ですが、個人ブログにはオーバースペックです。Pagefindは必要十分な機能を、圧倒的に低いコスト（ゼロ）で提供してくれます。

実績と信頼性

Astro公式サイトのドキュメントテーマ「Starlight」も、デフォルトの検索エンジンとしてPagefindを採用しています。公式が選ぶツールですから、Astroとの親和性は保証済みです。

5ステップで導入完了

では実際に導入してみましょう。本当に簡単です。

Step 1: 依存パッケージのインストール

astro-pagefind と pagefind の2つをインストールします。

npm install astro-pagefind pagefind

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

http://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分で設定完了する、完全無料・サーバーレスな全文検索機能の構築手順

⏱️ Estimated time: 10 min

  1. 1

    Step1: パッケージインストール

    `npm install astro-pagefind pagefind`を実行し、必要なライブラリを追加する。
  2. 2

    Step2: 設定ファイル更新

    `astro.config.mjs`に`import pagefind from 'astro-pagefind'`を追加し、integrations配列に`pagefind()`を加える。
  3. 3

    Step3: UIコンポーネント作成

    PagefindのCSS/JSを読み込み、`new PagefindUI()`で初期化する`Search.astro`コンポーネントを作成する。
  4. 4

    Step4: インデックス範囲の最適化

    記事本文のコンテナ（`<main>`など）に`data-pagefind-body`属性を付与し、ナビゲーションやフッターを除外することで精度を高める。
  5. 5

    Step5: ビルドとテスト

    `npm run build`を実行し、生成された`dist`フォルダで検索機能が動作するか確認する。

FAQ

Algoliaと比べて何が良いですか？
最大のメリットは「完全無料」であることです。また、データが外部サーバーに送信されないためプライバシー面でも優れています。インデックス構築もビルド時に行われるため、サーバー管理の手間が一切ありません。
日本語の検索精度はどうですか？
Pagefindは多言語に対応しており、日本語の分かち書きも自動で行われます。特別な設定なしで、十分に実用的な精度で検索可能です。
検索インデックスが肥大化しませんか？
Pagefindのインデックスは非常に効率的です。1万ページ規模のサイトでも300KB以下に収まることが多く、さらに検索時には必要なチャンク（断片）のみをロードするため、ユーザーの通信量は最小限に抑えられます。

4 min read · 公開日: 2025年12月3日 · 更新日: 2026年1月22日

Easton Easton
技術開発

コメント

GitHubアカウントでログインしてコメントできます

関連記事

N
2026年1月7日 技術開発

Next.js ファイルアップロード完全ガイド：S3/Qiniu Cloud 署名付き URL 直接アップロード実践

Next.js ファイルアップロード S3 Qiniu Cloud 署名付き URL 直接アップロードアーキテクチャ図
2026年1月7日 技術開発

Next.js ファイルアップロード完全ガイド：S3/Qiniu Cloud 署名付き URL 直接アップロード実践

N
2026年1月7日 技術開発

Next.js Eコマース実践：カートと Stripe 決済の完全実装ガイド

Next.js Eコマースカートと Stripe 決済統合の概念図
2026年1月7日 技術開発

Next.js Eコマース実践：カートと Stripe 決済の完全実装ガイド
N
2026年1月7日 技術開発

Next.js ユニットテスト実践：Jest + React Testing Library 完全設定ガイド

Next.js Jest テスト設定の概念図。設定ファイル、テストコード、ターミナル出力を示す
2026年1月7日 技術開発

Next.js ユニットテスト実践：Jest + React Testing Library 完全設定ガイド

広告Vultr - 高性能NVMeクラウドサーバー、世界32拠点、Dockerワンクリック展開対応