Skip to content
Mash+

Pagefind で外部コンテンツを楽にインデックスするためのCLIツールを作った

サイト内検索に Pagefind を使用していて、外部サービスの情報も一緒に検索したいと思い Pagefind Hub というツールを作成したので簡単な紹介です。

Pagefind Hub でできること

  1. サイト内の静的コンテンツと外部コンテンツを一緒に検索するインデックスを構築。
  2. 外部コンテンツはプロバイダー(例:Bluesky, GitHub, YouTube)を利用または、作成して追加。
  3. 検索結果の外部リンクを新しいタブで開く。

インストール

Terminal window
npm install @mash43/pagefind-hub pagefind

Pagefind は v1.4.0 以上で動作確認しています。
pagefind-hub.config.ts で環境変数を使用するために、Node.js v22 以上が必要です。

使い方

1. 設定ファイルの初期化

Terminal window
npx pagefind-hub init

このコマンドを実行して、siteDiroutputDir を入力すると、プロジェクトのルートに pagefind-hub.config.ts が生成されます。

2. 設定ファイルの構成

import { defineConfig } from "@mash43/pagefind-hub";
import { bluesky, github, youtube } from "@mash43/pagefind-hub/providers";
export default defineConfig({
// オプション: Pagefindでインデックス化する静的HTMLファイルがあるディレクトリ。
// 省略した場合は、プロバイダから取得した外部レコードのみのインデックスを作成します。
siteDir: "dist",
// オプション: 生成されたPagefindインデックスの保存先ディレクトリ。
// 指定されていない場合、siteDirが指定されていれば `<siteDir>/pagefind` がデフォルトになります。
// outputDir: "dist/pagefind",
providers: [
bluesky({
identifier: "your-handle.bsky.social",
}),
github({
username: "your-github-username",
}),
youtube({
channelId: "UCXXXXXXXXXXXXXXX",
apiKey: process.env.YOUTUBE_API_KEY,
}),
],
});

3. CLIの実行

Terminal window
npx pagefind-hub

outputDir に Pagefind のファイルが出力されます。

おわりに

これで外部サービスに分散している情報を、一つの検索窓に集約できました。今後の運用で必要があれば随時アップデートしていくつもりです。