Archive

Blog

Blog

HugoでMarkdownのランダムな位置にGoogle AdSenseのコードを挿入する

📝 2026年アップデート Hugo テンプレート(Go Template)のランダム挿入ロジック自体は 2026年現在も有効です。ただし、Google AdSense の自動広告機能が強化されているため、そちらで十分なケースも多いです。手動制御が必要な場合のみこの記事の手法が有用。 Hugoは静的サイトジェネレーターですが、テンプレート(Go Template)を使用することで、比較的自由にカスタマイズ可能です。このブログも以前はWordPressを使用していましたが、現在はHugoを使用しています。

Blog

Netlify + Hugo + Elasticsearchで静的サイトの全文検索を行う

静的サイトにおけるサイト内全文検索の実装例をご紹介します。個人ブログにおける趣味の範囲内です。また、個人ブログのため、料金を抑える方針で検討します。 WordPressなどのCMSは標準で検索機能を有しています。しかし、静的サイトではビルド時にすべてのページが生成されます。そのため、WordPressのように検索時に毎回動的なページを作成できません。

Blog

Netlify CMS + Netlify DNS + Hugo + AWS SESで独自ドメインのメール送受信環境を構築

Go 言語製の静的サイトジェネレータ Hugo で Netlify に構築したホストで、独自ドメインメールによる安価な送受信環境を整備する方法をご紹介します。 ドメインは「お名前.com」等のレジストラですでに取得済み、DNS サービスは「Netlify DNS」を使用することを前提とします。ただし、「Netlify DNS」は記事執筆時点で β 版です。

Mac

Netlify FunctionsをDockerで実行する

📝 2026年アップデート Netlify Functions は 2026年も現役です。Node.js ランタイムは 2019年当時の v8 から v20 / v22 LTS へと推移しています。本記事の手順のうち Docker ベースイメージだけ更新すれば、現在も問題なく動作します。 以前、Netlify Functions をローカル環境でエミュレートする方法、Netlify にデプロイする方法をご紹介しました。今回は、ローカル環境で開発した Netlify Fucntions をコンテナ技術の理解を深めるために Docker で実行してみます。前回作成したアプリケーションをもとに話を進めますので、まだの方はそちらを一読されてから読み進めることをオススメします。

Blog

【2026年版】無償で始められる Netlify Functions(AWS Lambda)で学ぶサーバレスプログラミング入門

🔁 2026年リライト版 この記事は2019年1月に公開した「無償で利用可能なNetlify Functions(AWS Lambda)で学ぶサーバレスプログラミングの基本」を、2026年時点の Netlify Functions 仕様(Node.js 20/22 LTS、Netlify CLI、Edge Functions の追加)に合わせて全面書き換えしたものです。 Netlify Functions は、サイトのデプロイに付随してサーバレス関数を一緒に動かせるサービスです。バックエンドは AWS Lambda(通常の Functions)と Deno / Vercel Edge Runtime 相当のエッジワーカー(Edge Functions)の2種類があります。

Blog

Hugoのテンプレート構文「template」「partial」「block」「define」のわかりやすい解説

Hugo のオリジナルテーマ作成を勝手に応援する企画、記念すべき第 1 弾はテンプレート構文の基本となる「template」「partial」「block」「define」の違いについてです。以下のバージョンで確認しています。 Hugo Static Site Generator v0.53/extended darwin/amd64 BuildDate: unknown Hugo のテンプレート構文 Hugo にはさまざまなテンプレート構文が用意されています。今回は、その中でも基本となる以下の 4 つについて、とくにつまずきやすい点を中心に解説します。記事の内容に対するご質問やご指摘等はコメント欄でお待ちしております。

Blog

Hugoで記事のアイキャッチ画像を自動的に取得する

📝 2026年補記 Hugo 0.112+ では .Resources.GetMatch / .Page.Resources による Page Bundle の画像取得が標準化され、2018年当時の手動対応よりシンプルに書けるようになりました。Open Graph 用のサムネイル自動生成には resources.GetRemote や image.Resize の組み合わせが推奨されます。 Hugo には、記事執筆時点において、WordPress のような便利なプラグインはありません。しかし、Shortcode やテンプレートの構文を工夫することで、WordPress と同等のプラグイン機能を実現できます。

iPhone

iCloud同期可能でWordPressや静的サイト向けデプロイ機能付きのMarkdownエディター

📦 アーカイブ記事 この記事はWordPress運用時代に公開したものです。MWebエディタ自体は現役ですが、WordPress連携機能の仕様は変更されている可能性があります。本サイトは2019年にHugoへ移行済みです。 📦 2026年アーカイブ注記 この記事は2018年に執筆されたものです。筆者はその後WordPressの運用から離れており、記事中で紹介している手順・プラグイン・ツールは、現在のWordPress(6.8 / 7.0世代 + Block Editor / FSE)や周辺ツールの状況と異なる可能性があります。歴史的記録として残しています。

Blog

【2026年版】Decap CMS(旧Netlify CMS)+ Hugo のテーマをGitで管理してデプロイする

🔁 2026年リライト版 この記事は2018年10月に公開した「Netlify CMS(Hugo)のテーマをGitの使い方を覚えながらカスタマイズしてデプロイしてみよう」を、Decap CMS(2023年にNetlify CMSがフォーク・改名)+ Git 2.40+ + GitHub Actions / Netlify Build 前提で全面書き換えしたものです。 2018年からの主な変化点 Netlify CMS → Decap CMS(2023年2月、Netlifyの開発撤退に伴いコミュニティフォーク) GitHub デフォルトブランチ: master → main(2020年10月以降の新規リポジトリは main) Git認証: パスワード認証廃止 → Personal Access Token / SSH / GitHub CLI (gh) が必須 Slack通知: Netlify 標準のSlack連携が簡略化、または GitHub Actions から直接送信する構成が一般的 デプロイ選択肢: Netlify のほか Vercel / Cloudflare Pages、あるいは GitHub Actions → 任意のCDN の構成も普及 ゴール Hugo サイトのテーマを Git で管理する main ブランチに push すると自動ビルド・デプロイ デプロイの成功/失敗を Slack に通知する Git の準備(2026年版) Git クライアントのインストール ❯ brew install git gh ❯ git --version git version 2.44+ ❯ gh --version GitHub 認証 2021年以降、HTTPS パスワード認証は使えません。GitHub CLI が最も楽です。

Blog

【2026年版】Decap CMS(旧Netlify CMS)+ Hugo でMarkdownで書ける無料ブログを構築する

🔁 2026年リライト版 この記事は2018年10月に公開した「Netlify CMS(Hugo)でMarkdownで記述可能な無料ブログを構築する(構築編)」を、Decap CMS(2023年にNetlify CMSがフォーク・改名)+ Hugo 0.140+ 前提で全面書き換えしたものです。 2018年からの主な変化点 Netlify CMS → Decap CMS(2023年2月): 開発元Netlifyが撤退し、コミュニティフォークのDecap CMSが事実上の後継 Hugo Modules / Page Bundles の普及 代替CMSの台頭: Sveltia CMS(Decap互換の軽量モダン実装)、Tina CMS、Keystatic など選択肢が増加 ホスティング選択肢: Netlify に加え Vercel、Cloudflare Pages が有力に JAMstack → 静的サイト+エッジ関数 という言い方にシフト(JamstackブランドはNetlifyが撤収) 今でもこの構成を選ぶ理由 2026年時点でも、Git ベース + Markdown ファイル + 静的生成 の構成には強みがあります。