Hugoカスタマイズ Vol.1 サイト内検索

前回BloggerからHugoを使ったSSGへの移行の話しをさせていただきました。 今回は、Hugoに切り替えた際の具体的なカスタマイズについて書いていこうかと思います。

但し、Hugoに関する日本語のサイトもだいぶ増えていますので、基本的なところは先人たちの記事を探してみてもらった方が よいかと思いますので、ここでは当サイトのベースとして使用させていただいている「Blonde」テーマを用いて、ちょっと変えたところをメインに カスタマイズVol.1としてお届けします。

Blondeテーマを選んだ理由

当サイトのベースとなっているBlondeテーマを選んだ理由です。

1. レイアウトとして従来から使っているブログテーマに近い構造であったこと
2. レスポンシブ対応であったこと
3. Google Analytics、Google Adsenseが組み込まれていたこと
4. 構造が理解しやすかったこと

です。

但し、オリジナルのBlondeテーマだと、ちょっと物足りない部分もあるので、いろいろなカスタマイズをしています。

レイアウトのカスタマイズ

Hugoのテーマをカスタマイズする場合は、themes配下のテーマファイルから必要なものをカレントディレクトリにおいて、修正します。 テーマの中身なので、基本的にはlayoutフォルダになります。 そこに変更したいファイルを作成することで、オリジナルのレイアウトが利用されます。

では、具体的に変更した箇所ですが、

1. サイト内検索機能の変更　googleサイト内検索からPagefindに
2. フッターのデザイン変更
3. コンテンツ記事に目次を付ける
4. 問い合わせページを作る

まだまだ、細かいところに手を入れていますが、大きくはこんな感じのカスタマイズをしています。

Vol.1では、１番目の検索機能の変更について、簡単に説明します。

サイト内検索機能

オリジナルの検索機能は、サイドバーの一番右上に検索窓があります。
この検索は、Googleのサイト内検索を使うようになっています。
当サイトだと、旧サイトはBloggerだったりするので、サイト内検索だと旧サイトのコンテンツが表示される可能性が高いので、 別の方法を考える必要がありました。

Pagefind は、HugoなどのSSG系ととても相性がよく、静的ファイルを生成するときに合わせてPagefindの インデックスなどのメタデータを生成します。

検索時、PagefindのJavascriptを利用して生成されたメタデータから検索したページの情報を検索結果に表示するという感じになります。

では、HugoとPagefindを使う場合のインプリメントは、どうするのか？　ですが、、 参考にしたサイトを見ていただいた方が分かりやすいので、ご紹介させていただきます。

特に、Hugo+PagefindのサイトをCloudflare Pagesで構築している場合は、ほぼほぼ同様の手順でいけると思います。

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

undefined

zenn.dev

Hugo、Pagefindのバージョンは最新のものを指定するのがよいでしょう。

検索結果の部分は、それぞれのcssに合わせて修正が必要となる場合があります。
当サイトでは、tailwind.cssがベースなので、そのあたりは修正しています。

特にダークモード時の表示は、なかなか難しいところでした。

ということで、まずはカスタマイズのVol.1としてPagefindによるサイト内検索についてでした。