Hugo + Algolia + Instantsearch.jsで、静的サイトに全文検索を導入するまでの一部始終をまとめてみました。 完成版 メニューバー右側のテキストボックスに検索キーワードを入力して、Enterキーを押します。 検索したキーワードにヒットした記事が表示されます。 最低限の実装です。テーマに合わせた検索結果の表示のみこだわりました。しかし、検索したキーワードをハイライトする、そもそも検索したキーワードを表示するなど、改善の余地があります。
当ブログは、Netlify + Hugoで構築してます。GitHubへMarkdownで記述したコンテンツをコミットすると、Netlifyにより自動ビルドが走り、記事が公開されます。しばらくは、このフローで問題ありませんでしたが、基本的に横着な自分なので、ある理由によりブログ更新が滞るようになりました。 Netlify + Hugo構成はiPhoneから管理できない 「GitHubへコミットする」、この行為が意外とめんどうだったのです。WordPressを使用していた時は、公式アプリやサードパーティのアプリを用いることで、どこからでもiPhoneから記事の公開ができていました。Netlifyにも簡易的なCMS機能はあるのですが、管理画面がレスポンシブ対応しておらず、使い勝手は良いとは言えません。また、GitHubへのコミットという行為が追加された事も大きなネックでした。記事を公開するには、iPhoneではなくMacやPCをわざわざ用意する必要があったのです。
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>タグで明示的に指定可能です。
静的サイトの悩みの種、サイト内検索を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年リライト版 この記事は2020年4月に公開した「NetlifyのDeploy結果をDiscordへ通知する」を、Netlify の現行管理UI（2025年版）と Discord のウェブフック URL 形式に合わせて全面書き換えしたものです。 2020年からの主な変化点 Netlify UI が刷新。「Deploy notifications」の場所が Site configuration → Build & deploy → Deploy notifications に整理された Discord Webhook URL に /slack サフィックスを付ける方法 は今も健在（Slack 互換ペイロードの解釈） Netlify の Slack / Discord / Webhook 通知タイプ がドロップダウンから直接選べるように Pull Request Deploy Preview / Branch Deploy の通知が細かく分けられるようになった Netlify 以外のホスティング（Vercel / Cloudflare Pages）でも同様の手順が使える 手順 1. Discord でウェブフックを作成 通知したいチャンネル → 歯車 → 連携サービス → ウェブフック → 新しいウェブフック ウェブフックURL をコピー https://discord.com/api/webhooks/<id>/<token> 2. URL 末尾に /slack を付与 Netlify の Slack integration は Slack 形式のペイロード を送信します。Discord はこの Slack 互換ペイロードを URL サフィックス /slack で受け取れます。
🔁 2026年リライト版 この記事は2020年4月に公開した「Netlify CMS + HugoでPage Bundles（コンテントと画像を同じ場所に配置）に対応する」を、2026年時点の Decap CMS（2023年の Netlify CMS フォーク / リネーム）前提で書き換えたものです。 2026年の状況 — Netlify CMS は Decap CMS にフォークされた Netlify CMS は、2023年2月に元運営元 Netlify の開発撤退にともない、コミュニティで Decap CMS としてフォーク・改名されました。パッケージ名も netlify-cms から decap-cms へ移行しています。
🔁 2026年リライト版 この記事は2020年4月に公開した「GitHubのイベントをDiscordのチャンネルに通知する」を、Discord UI刷新（2023〜2024）、GitHub Actions 経由の通知、スレッド自動生成 を踏まえて全面書き換えしたものです。 2020年からの主な変化点 Discord の UI が刷新: 「サーバー設定 → 連携サービス → ウェブフック」という現行パス /github（/api/v1/github）エンドポイント は以前と同じく GitHub Webhook URL の末尾に追加する方式で動く GitHub Actions が普及: 柔軟な通知ペイロードなら Webhook 直結より Actions ワークフローから送る方が自由度が高い Discord Forum Channel / スレッド: PR・Issue ごとにスレッドを自動作成する設計がチーム運用で一般的 Slack 連携と同じ感覚で使える: Discord の GitHub 連携は2020年当時より安定化 方法A: GitHub Webhook を直接 Discord に送る（最速） 1. Discord 側でウェブフックを作成 通知したいチャンネルの 歯車アイコン → 連携サービス → ウェブフック → 新しいウェブフック 名前・アイコン・チャンネルを指定して ウェブフックURLをコピー 2. URL 末尾に /github を付与 Discord のウェブフック URL は以下の形式です。
🔁 2026年リライト版 この記事は2020年4月に公開した「ローカルホストでGitHubの環境を汚さずにNetlify CMSをテストする」を、2026年時点の Decap CMS（2023年に Netlify CMS がリネーム・フォーク）前提で書き換えたものです。 2026年の状況 — Netlify CMS → Decap CMS Netlify CMS は、2023年2月に元運営元 Netlify が開発撤退し、コミュニティで Decap CMS としてフォーク・改名されました。パッケージ名も netlify-cms から decap-cms へ変わっています。ローカルで動かすためのプロキシサーバも netlify-cms-proxy-server から decap-server に名称が変わりました。
📝 2026年アップデート Netlify の Deploy Preview 機能は 2026年現在も提供中です。主ブランチの名称が master → main に変わった 点と、Netlify Dev CLI で手元プレビューが取れるようになった点以外は、本記事の運用がそのまま通用します。 弊ブログは、Netlify + Hugoで運営しています。テーマのソースコードや、記事本文（Markdown）は、GitHubで管理しています。NetlifyとGitHubのリポジトリを連携させることで、masterブランチにコミットされると、自動的にNetlifyにデプロイされます。