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のページが充実している）
🔁 2026年リフレッシュ Hugo 0.140+ / KaTeX v0.16+ でも基本的な組み込み方法は変わりません。ただし Hugo 0.126 以降は Goldmark の Passthrough 拡張（[params.markup.goldmark.passthrough]）を有効にすると、Markdown パーサが $...$ / $$...$$ を無加工でそのまま出力してくれるため、エスケープ処理がシンプルになります。KaTeX アセットは npm install katex でなく CDN（cdn.jsdelivr.net/npm/katex@0.16）を使うのが2026年の定番です。
Hugo のオリジナルテーマ作成を勝手に応援する企画、記念すべき第 1 弾はテンプレート構文の基本となる「template」「partial」「block」「define」の違いについてです。以下のバージョンで確認しています。 Hugo Static Site Generator v0.53/extended darwin/amd64 BuildDate: unknown Hugo のテンプレート構文 Hugo にはさまざまなテンプレート構文が用意されています。今回は、その中でも基本となる以下の 4 つについて、とくにつまずきやすい点を中心に解説します。記事の内容に対するご質問やご指摘等はコメント欄でお待ちしております。
📝 2026年補記 Hugo 0.112+ では .Resources.GetMatch / .Page.Resources による Page Bundle の画像取得が標準化され、2018年当時の手動対応よりシンプルに書けるようになりました。Open Graph 用のサムネイル自動生成には resources.GetRemote や image.Resize の組み合わせが推奨されます。 Hugo には、記事執筆時点において、WordPress のような便利なプラグインはありません。しかし、Shortcode やテンプレートの構文を工夫することで、WordPress と同等のプラグイン機能を実現できます。
📝 2026年補記 Mission Control 関連の defaults 設定は、macOS Tahoe 26 / Sequoia 15 でも多くが有効です。ステージマネージャ（Stage Manager、macOS Ventura 13〜） 関連の新キー（com.apple.WindowManager）も追加されているため、組み合わせて使うとさらに細かい制御が可能です。 システム環境設定をターミナル（defaultsコマンド）から設定する方法（一般）に引き続き、defaultsコマンドシリーズです。今回は、「Mission Control」編です。ニッチな機能、追求するのがムダな機能は割愛しています。
📦 アーカイブ記事 この記事はWordPress運用時代に公開したものです。本サイトは2019年にHugoへ移行済みです。Amazonアソシエイトの Product Advertising API は2020年以降 v5 に移行、売上基準も厳格化されているため、本記事の手順のまま動作する保証はありません。 📦 2026年アーカイブ注記 この記事は2016年に執筆されたものです。筆者はその後WordPressの運用から離れており、記事中で紹介している手順・プラグイン・ツールは、現在のWordPress（6.8 / 7.0世代 + Block Editor / FSE）や周辺ツールの状況と異なる可能性があります。歴史的記録として残しています。
📦 アーカイブ記事 この記事はWordPress運用時代（〜2019年3月）に公開したものです。本サイトは2019年にHugoへ移行しており、この記事の内容は現在のサイト運用には使用されていません。ショートコード API は WordPress 6.x でも有効ですが、Gutenberg ブロックへの置き換えが推奨されています。 📦 2026年アーカイブ注記 この記事は2016年に執筆されたものです。筆者はその後WordPressの運用から離れており、記事中で紹介している手順・プラグイン・ツールは、現在のWordPress（6.8 / 7.0世代 + Block Editor / FSE）や周辺ツールの状況と異なる可能性があります。歴史的記録として残しています。
📝 2026年補記 MarsEdit は2026年時点でも活発に更新されており、MarsEdit 5 が Apple Silicon + macOS Tahoe 26 対応で提供されています。プレビューのカスタマイズ機能も維持されており、本記事で紹介している highlight.js 連携の考え方は今も有効です。 MarsEdit は、macOS で動作する WordPress や MovableType などの主要な CMS に対応しているエディターで、とくにリアルタイムプレビューや AppleScript との連携は非常に便利です。