Pagefind で外部コンテンツを楽にインデックスするためのCLIツールを作った
サイト内検索に Pagefind を使用していて、外部サービスの情報も一緒に検索したいと思い Pagefind Hub というツールを作成したので簡単な紹介です。
Pagefind Hub でできること
- サイト内の静的コンテンツと外部コンテンツを一緒に検索するインデックスを構築。
- 外部コンテンツはプロバイダー(例:Bluesky, GitHub, YouTube)を利用または、作成して追加。
- 検索結果の外部リンクを新しいタブで開く。
インストール
npm install @mash43/pagefind-hub pagefindPagefind は v1.4.0 以上で動作確認しています。
pagefind-hub.config.ts で環境変数を使用するために、Node.js v22 以上が必要です。
使い方
1. 設定ファイルの初期化
npx pagefind-hub initこのコマンドを実行して、siteDir や outputDir を入力すると、プロジェクトのルートに 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の実行
npx pagefind-huboutputDir に Pagefind のファイルが出力されます。
おわりに
これで外部サービスに分散している情報を、一つの検索窓に集約できました。今後の運用で必要があれば随時アップデートしていくつもりです。