Pagefind Setup Architecture

GitHub Actions + Pagefind + GitHub Pages の構成模式

System Flow
SOURCE & CONFIG OUTPUT & SERVE HTML Files index.html, about.html, docs/*.html pagefind.yml site, glob, exclude_selectors GitHub Actions .github/workflows/pagefind.yml npx pagefind pagefind/ index, wasm, chunks GitHub Pages username.github.io/repo Browser (Client-side Search) fetch /pagefind/pagefind.js push README Auto-update update-readme-html-index.yml HTML file list -> README.md
Source files
Config / Workflow
Output / Deploy

Repository Structure

.
  |-- index.html              # 検索UIページ
  |-- about.html
  |-- docs/guide.html
  |-- pagefind.yml            # Pagefind設定
  |-- .github/
  |   `-- workflows/
  |       |-- pagefind.yml      # インデックス生成
  |       `-- update-readme-html-index.yml  # README更新
  `-- pagefind/              # Actions生成 (デプロイ時)
     |-- pagefind.js
     |-- pagefind-ui.css
     `-- index/              # 検索インデックス

Execution Flow

  1. Developer pushes to main

    HTMLファイル、pagefind.yml、ワークフローファイルをリモートにプッシュ

  2. GitHub Actions triggers

    .github/workflows/pagefind.yml が実行。Node.js環境で npm install -g pagefind

  3. Pagefind reads config

    リポジトリルートの pagefind.yml を読み込み、site: "." の HTML をインデックス化

  4. Search bundle generated

    pagefind/ ディレクトリに WASM + JS + index を出力

  5. Deploy to GitHub Pages

    HTML + pagefind/ バンドルを GitHub Pages にデプロイ

  6. Browser loads search

    ユーザーが index.html を開くと /pagefind/pagefind-ui.js を読み込み、クライアントサイドで検索実行

  7. README auto-updated (optional)

    update-readme-html-index.yml が同時に実行され、HTMLファイル一覧を README.md に書き込み