Hugo + Algolia + Instantsearch.jsで、静的サイトに全文検索を導入するまでの一部始終をまとめてみました。 完成版 メニューバー右側のテキストボックスに検索キーワードを入力して、Enterキーを押します。 検索したキーワードにヒットした記事が表示されます。 最低限の実装です。テーマに合わせた検索結果の表示のみこだわりました。しかし、検索したキーワードをハイライトする、そもそも検索したキーワードを表示するなど、改善の余地があります。
Google Search Consoleに追加された新たな指標値 Google Search Consoleに新たな指標が追加されました。すべて、ウェブに関する主な指標レポートに記載の通りです。必ずしも早急な対処が必要なものではありません。ただし、これらの指標に対応することで、必然的にUI/UXの向上が期待できます。 LCP (Largest Contentful Paint) FID (Fist Input Delay) CLS (Cumulative Layout Shift) LCP (Largest Contentful Paint) LCPは、「ビューポート内に表示される最大の画像またはテキストブロックのレンダリング時間」を表し、Largest Contentful Paint (LCP)に具体例が掲載されています。ビューポートは、「モバイルデバイスでコンテンツを表示する幅」を示します。ビューポートは、<meta>タグで明示的に指定可能です。
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年の定番です。
📝 2026年アップデート Hugo テンプレート（Go Template）のランダム挿入ロジック自体は 2026年現在も有効です。ただし、Google AdSense の自動広告機能が強化されているため、そちらで十分なケースも多いです。手動制御が必要な場合のみこの記事の手法が有用。 Hugoは静的サイトジェネレーターですが、テンプレート（Go Template）を使用することで、比較的自由にカスタマイズ可能です。このブログも以前はWordPressを使用していましたが、現在はHugoを使用しています。
Hugo のオリジナルテーマ作成を勝手に応援する企画、記念すべき第 1 弾はテンプレート構文の基本となる「template」「partial」「block」「define」の違いについてです。以下のバージョンで確認しています。 Hugo Static Site Generator v0.53/extended darwin/amd64 BuildDate: unknown Hugo のテンプレート構文 Hugo にはさまざまなテンプレート構文が用意されています。今回は、その中でも基本となる以下の 4 つについて、とくにつまずきやすい点を中心に解説します。記事の内容に対するご質問やご指摘等はコメント欄でお待ちしております。
📦 アーカイブ記事 この記事はWordPress運用時代（〜2019年3月）に公開したものです。本サイトは2019年にHugoへ移行しており、この記事の内容は現在のサイト運用には使用されていません。当時のメモとして残していますが、WordPressの最新バージョンでの動作は検証していません。 📦 2026年アーカイブ注記 この記事は2018年に執筆されたものです。筆者はその後WordPressの運用から離れており、記事中で紹介している手順・プラグイン・ツールは、現在のWordPress（6.8 / 7.0世代 + Block Editor / FSE）や周辺ツールの状況と異なる可能性があります。歴史的記録として残しています。
📝 2026年補記 本記事で紹介している URL スキームの調査手法は iOS 26 でも基本的に有効ですが、2018年以降は ショートカットアプリ（Shortcuts） が標準化され、URLスキームの代替として 「x-callback-url」 や 「アプリを開く」 アクションが多用されるようになりました。多くのアプリが Shortcuts 対応で URL スキームの依存度は下がっています。
📝 2026年補記 PopClip は2026年も現役で、拡張機能のフォーマットは2020年以降 YAML ベースの .popclipext が推奨になっています。本記事の JS カスタマイズの考え方は今も応用可能ですが、新しい拡張機能は JavaScript + YAML 定義で書くのがベストプラクティスです。 WordPress のテーマ開発、ブログの執筆作業を効率化する方法のまとめでもご紹介している「PopClip」ですが、拡張機能を使用する事で、さまざまな用途に用いる事のできる、1 回使うと離れられない便利ツールです。