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 のインデックスファイルが出力される。
おわりに
これで外部サービスに分散している情報を、一つの検索窓に集約できた。今後の運用で必要があれば随時アップデートしていくつもりだ。