Hugo + Algolia + Instantsearch.jsで、静的サイトに全文検索を導入するまでの一部始終をまとめてみました。 完成版 メニューバー右側のテキストボックスに検索キーワードを入力して、Enterキーを押します。 検索したキーワードにヒットした記事が表示されます。 最低限の実装です。テーマに合わせた検索結果の表示のみこだわりました。しかし、検索したキーワードをハイライトする、そもそも検索したキーワードを表示するなど、改善の余地があります。
CSSフレームワークの「Bulma: Free, open source, and modern CSS framework based on Flexbox」のcolumnsクラスの挙動がおかしい、というお話です。 Columns responsivenessは、Flexboxをベースとしたレスポンシブなレイアウトを簡単に定義できます。ところが、以下のシンプルなコードをみてください。 <html> <body> <div class="columns is-desktop"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> </div> </body> </html> 何の変哲もない、チュートリアルに出てきそうなカラムレイアウトです。一見、何の問題もなさそうに見えます。しかし、本コードには以下の問題があります。
静的サイトの悩みの種、サイト内検索をNetlify Functions＋Hugoで実装してみました。ポイントは、以下の通りです。 クライアントであるブラウザにとって負荷の低い実装方法とする 記事の更新の都度、インデックス等の更新にかかる運用が発生しないようにする（自動的に行う） Hugoの機能、ある程度の月間PVに耐えられるものとする インクリメンタルサーチは実装しない（Netlify Functionsの無料範囲内での実装を目指す） 有名どころでは、Lunr: A bit like Solr, but much smaller and not as brightやModern site search for companies of all sizes | Algoliaがあり、Search for your Hugo Website | Hugoでも紹介されています。今回は、同ページでも紹介されていますが、What is Fuse.js? | Fuse.jsを使った実装方法をご紹介します。（気付いたら、Hugoのページが充実している）