<h2 id="%E6%A6%82%E8%A6%81">
<a class="header-anchor-link" href="#%E6%A6%82%E8%A6%81" aria-hidden="true"></a> 概要</h2>
<a href="https://pagefind.app/" target="_blank" rel="nofollow noopener noreferrer">Pagefind</a> で <a href="https://gohugo.io/" target="_blank" rel="nofollow noopener noreferrer">Hugo</a> 製のブログに検索機能をつけてみた記事です。 
（この記事は<a href="https://blog.84b9cb.info/" target="_blank" rel="nofollow noopener noreferrer">個人ブログ</a>に投稿した記事に加筆したものです。）
<h2 id="%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83">
<a class="header-anchor-link" href="#%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 開発環境</h2>
<ul>
<li>pagefind_extended v1.0.4</li>
<li>hugo v0.120.4</li>
</ul>
<h2 id="%E5%AE%9F%E8%A3%85">
<a class="header-anchor-link" href="#%E5%AE%9F%E8%A3%85" aria-hidden="true"></a> 実装</h2>
<h3 id="%E6%A4%9C%E7%B4%A2-ui-%E5%8F%96%E3%82%8A%E4%BB%98%E3%81%91">
<a class="header-anchor-link" href="#%E6%A4%9C%E7%B4%A2-ui-%E5%8F%96%E3%82%8A%E4%BB%98%E3%81%91" aria-hidden="true"></a> 検索 UI 取り付け</h3>
まずは <a href="https://pagefind.app/docs/" target="_blank" rel="nofollow noopener noreferrer">Getting Started with Pagefind</a> に従って検索 UI をブログに取り付けます。 
<code>&lt;head&gt;</code> 内に下記を追加しました。（CSS を上書きするので、ブログ本体の CSS 読み込みより前に追加する。）
<div class="code-block-container">
<div class="code-block-filename-container">layouts/_default/baseof.html</div>
<pre class="language-html"><code class="language-html">&lt;link href="/pagefind/pagefind-ui.css" rel="stylesheet"&gt;
&lt;script src="/pagefind/pagefind-ui.js"&gt;&lt;/script&gt;
&lt;script&gt;
 window.addEventListener('DOMContentLoaded', (event) =&gt; {
 new PagefindUI({
 element: "#search",
	 showImages: false,
	 translations: {
 clear_search: "消去",
 zero_results: "[SEARCH_TERM]の検索結果はありません",
 alt_search: "[SEARCH_TERM]の検索結果はありませんでした。[DIFFERENT_TERM]の検索結果を表示しています",
 search_suggestion: "[SEARCH_TERM]の検索結果はありませんでした。次のいずれかの検索を試してください",
 }
 });
 });
&lt;/script&gt;
</code></pre>
</div>検索 UI はデフォルトの物を使い、<a href="https://pagefind.app/docs/ui/" target="_blank" rel="nofollow noopener noreferrer">Pagefind UI configuration options</a> を見て一部のオプションを調整しています。
翻訳についてはデフォルトの文言定義が <a href="https://github.com/CloudCannon/pagefind/blob/fd70ca9b6ef78e8480bea7fb2fab2069e13ef8df/pagefind_ui/translations/ja.json" target="_blank" rel="nofollow noopener noreferrer">pagefind_ui/translations/ja.json</a> にあるのですが、結果が０件のときの日本語が不自然に思えたので変更しています。 
（不自然だと感じる自分の日本語感に自信が持てなくて修正の PR を出すに至っていません……。）
あと検索 UI のダークモード対応をするため、<a href="https://pagefind.app/docs/ui-usage/#customising-the-styles" target="_blank" rel="nofollow noopener noreferrer">Using the Default UI</a> を見て CSS 変数を上書きしておきました。
そして検索ボックスを出したい位置に
<div class="code-block-container">
<div class="code-block-filename-container">layouts/_default/baseof.html</div>
<pre class="language-html"><code class="language-html">&lt;div id="search"&gt;&lt;/div&gt;
</code></pre>
</div>を追加しておきます。
<h3 id="%E3%82%A4%E3%83%B3%E3%83%87%E3%83%83%E3%82%AF%E3%82%B9%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#%E3%82%A4%E3%83%B3%E3%83%87%E3%83%83%E3%82%AF%E3%82%B9%E4%BD%9C%E6%88%90" aria-hidden="true"></a> インデックス作成</h3>
次に pagefind の実行ですが、私が Hugo 製のブログを開発している環境には Node.js を入れていないのでバイナリをダウンロードしました。
<iframe id="zenn-embedded__d159795e61717" src="https://embed.zenn.studio/card#zenn-embedded__d159795e61717" data-content="https%3A%2F%2Fgithub.com%2FCloudCannon%2Fpagefind%2Freleases" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/CloudCannon/pagefind/releases" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/CloudCannon/pagefind/releases</a>
<a href="https://pagefind.app/docs/installation/" target="_blank" rel="nofollow noopener noreferrer">Installing and running Pagefind</a> によると
<blockquote>
Pagefind publishes two releases, <code>pagefind</code> and <code>pagefind_extended</code>. The extended release is a larger binary, but includes specialized support for indexing Chinese and Japanese pages.
</blockquote>
とのことですので、pagefind_extended のほうを使います。 
ダウンロード後、展開してブログのルートディレクトリに置きます。
pagefind はビルド結果に対してインデックスを作成するので、一旦 <code>hugo</code> コマンドを打って <code>/public</code> にビルド結果を生成します。
そしてインデックス作成ですが、私は個別の記事だけを検索対象としたいので CLI のオプションで対象を絞ります。 
私のブログでは <code>/logs</code> と <code>/posts</code> の下に個別の記事が存在するので <code>--glob="{logs,posts}/*/*.html"</code> というオプションを付けます。 
<code>{logs,posts}/**/*.html</code> だと一覧ページである <code>/logs/index.html</code> や <code>/logs/page/2/index.html</code> も対象に含まれてしまうので <code>*</code> の数は重要です。
また、この後 <code>hugo server</code> で起動したときに pagefind のファイルを読み込めるよう、結果を <code>/static</code> に吐き出します。
結果的に実行するのは下記のコマンドになります。
<div class="code-block-container"><pre><code>./pagefind_extended --site public --glob="{logs,posts}/*/*.html" --output-path="static/pagefind"
</code></pre></div>これでインデックス作成が完了しました。
<code>hugo server</code> で起動して検索すると下記のような感じになります。
<img src="https://storage.googleapis.com/zenn-user-upload/68e77353e6be-20240121.png" loading="lazy" class="md-img">
<h3 id="%E6%A4%9C%E7%B4%A2%E5%AF%BE%E8%B1%A1%E3%81%AE%E8%AA%BF%E6%95%B4">
<a class="header-anchor-link" href="#%E6%A4%9C%E7%B4%A2%E5%AF%BE%E8%B1%A1%E3%81%AE%E8%AA%BF%E6%95%B4" aria-hidden="true"></a> 検索対象の調整</h3>
あとは <a href="https://pagefind.app/docs/indexing/" target="_blank" rel="nofollow noopener noreferrer">Configuring what content is indexed</a> を参考にしてお好みで検索対象の調整をします。
Hugo 特有の注意点として、テンプレートファイル内で特定の条件で <code>data-pagefind-body</code> を付けたい場合、下記のように <code>safeHTMLAttr</code> を通さないと "zgotmplz" という文字列に強制置換されてしまいます。
<div class="code-block-container"><pre class="language-html"><code class="language-html">&lt;body {{ if .IsPage }}{{ "data-pagefind-body" | safeHTMLAttr }}{{ end }}&gt;
&lt;!-- 中略 --&gt;
&lt;/body&gt;
</code></pre></div>参考: <a href="https://gohugo.io/functions/safe/htmlattr/" target="_blank" rel="nofollow noopener noreferrer">safe.HTMLAttr</a>
<h3 id="%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4">
<a class="header-anchor-link" href="#%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4" aria-hidden="true"></a> デプロイ</h3>
開発が終わったら Cloudflare Pages にデプロイします。 
なおリポジトリの連携等の初期設定は終わっているものとします。
まず .gitignore に <code>static/pagefind</code> と <code>pagefind_extended</code> を追記し、ローカル開発時に使用しただけのファイルはコミットしないようにします。
<div class="code-block-container">
<div class="code-block-filename-container">.gitignore</div>
<pre class="diff-highlight language-diff-ignore"><code class="diff-highlight language-diff-ignore">public/
.hugo_build.lock
+ static/pagefind
+ pagefind_extended.exe
</code></pre>
</div>デプロイ時に pagefind を実行するため <code>pagefind.sh</code> というシェルスクリプトを作成しました。
<div class="code-block-container">
<div class="code-block-filename-container">pagefind.sh</div>
<pre class="language-bash"><code class="language-bash">#!/bin/bash

wget https://github.com/CloudCannon/pagefind/releases/download/v1.0.4/pagefind_extended-v1.0.4-x86_64-unknown-linux-musl.tar.gz
tar -zxvf pagefind_extended-v1.0.4-x86_64-unknown-linux-musl.tar.gz
./pagefind_extended --site public --glob="{logs,posts}/*/*.html"
</code></pre>
</div>npx で pagefind をインストールするのではなくバイナリをダウンロードしているのは私の好みです。 
Cloudflare Pages のデプロイ環境のデフォルトの Node.js のバージョンは非常に古いのでそのまま使いたくないし、だからといって pagefind を入れるために最新の Node.js をダウンロードするのも二度手間っぽいという理由です。 
（それと、時々 Node.js のダウンロードに異常に時間がかかってデプロイが進まないことがある気がします……。）
あとは Cloudflare Pages のビルドコマンドを
<div class="code-block-container"><pre><code>hugo &amp;&amp; chmod +x ./pagefind.sh &amp;&amp; ./pagefind.sh
</code></pre></div>に変更します。
<img src="https://storage.googleapis.com/zenn-user-upload/b6905ee3b36f-20240121.png" loading="lazy" class="md-img">
その後、<code>pagefind.sh</code> もろともソースコードを push すればデプロイ完了です。
<h2 id="%E4%BD%99%E8%AB%87%EF%BC%9A%E6%A4%9C%E7%B4%A2%E7%B5%90%E6%9E%9C%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">
<a class="header-anchor-link" href="#%E4%BD%99%E8%AB%87%EF%BC%9A%E6%A4%9C%E7%B4%A2%E7%B5%90%E6%9E%9C%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> 余談：検索結果について</h2>
たとえば「画像生成」と検索してみると
<img src="https://storage.googleapis.com/zenn-user-upload/7800e1fc60c7-20240121.png" loading="lazy" class="md-img">
実際には「画像」というキーワードで検索されていることがわかります。
あと「した」と検索すると「したら」「したがって」が含まれるものが検索されるのですが
<img src="https://storage.googleapis.com/zenn-user-upload/e9a131f6ff8c-20240121.png" loading="lazy" class="md-img">
この検索結果には「～した。」という文章が含まれている記事は登場しません。
このように、決して入力したキーワードに合致する部分がすべて抽出されるわけではないため、もしプロダクション環境で使うような場合は求めている精度に到達しているか検証する必要があるかもしれません。

Hugo 製のブログに Pagefind で検索機能をつけて Cloudflare Pages でデプロイする

Discussion