HugoにGoogleカスタム検索エンジンを組み込んでみた

HugoにはよくあるCMSのサイト検索機能が実装されていないようです

サイト検索機能

コンテンツの全文検索機能を実装する

Hugoは静的サイトジェネレータなので、サーバーサイドの全文検索は行なえません
そのため全文検索をするためには、クライアント側にインデックスファイルをダウンロードして、ブラウザ内で全文検索を行う処理を書く必要があります

Googleのカスタム検索エンジンを利用する

もう面倒なことはGoogleにおまかせ
今回はこの方法を使います

Googleのカスタム検索エンジンを組み込む

Googleカスタム検索エンジンに登録する

Googleカスタム検索エンジンサイトにアクセスする
Googleカスタム検索エンジン
[カスタム検索エンジンの作成]ボタンをクリックする
Step01
必要な情報を入力して[作成]ボタンをクリックする
Step02
[コードを取得]ボタンをクリックする
Step03
これでページに貼るべきコードが取得できた

取得したコードをHugoに取り込む

今回はWidgetを作成して対応してみた

nano  partials/widgets/search.html

search.htmlの中身はこんな感じ

{{ if .Site.Params.widgets.search }}
<div class="widget-search widget">
  <script>
    (function() {
      var cx = '000000000000000000000:rlfdsffo-oo';
      var gcse = document.createElement('script');
      gcse.type = 'text/javascript';
      gcse.async = true;
      gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(gcse, s);
    })();
  </script>
  <div id="g-cse">
    <gcse:search />
  </div>
</div>
{{ end }}

取得したコードをコピペするだけのの簡単な作業です

作成したWidgetをサイドバーに表示させてみた

nano layouts/partials/content/sidebar.html

sidebar.htmlの中身はこんな感じ

<div class="sidebar">
  {{ partial "widgets/search" . }}
  {{ partial "widgets/tag_cloud" . }}
</div>