ちょっと思い立って、Hugo 用のブログカードを手軽に作成できるショートコードを作成してみました。コードのほとんどは Gemini を使って作成したものの、設計思想のようなものはやはりこちらで考えないといけませんので、そこに工夫があるといえばあります。

まず、Hugo は何度もレンダリングすることが前提ですので、何百とあるリンクのショートコードについてその都度ウェブサイトを読み込んで情報を取得するのは避けたいわけです。

そこで、前段階として Python で指定された URL の情報を取得して、Hugo の data ディレクトリに JSON 形式で情報を蓄積し、日付と時間を鍵にしてそれをショートコードから呼び出すようにします。

make_blogcard_info.py

gist.github.com

すると、JSON ファイルには：

{
  "20260621015324": {
    "url": "https://gist.github.com/mehori/7756e5e31bd82f9a7ef18bf3c493410e",
    "title": "make_blogcard_info.py",
    "description": "GitHub Gist: instantly share code, notes, and snippets.",
    "image": "images/blogcards/20260621015324.jpg"
  }
}

といった情報が書き込まれますので、これをショートコード側から呼び出します。カード自体は：

blogcard.html

gist.github.com

blogcards.css

gist.github.com

のようなショートコードとCSSを作成して、

{{< blogcard "20260621014411" >}}

のように呼べば大丈夫です。

ライフハック Liveshow 664 回「Fable 5」

lifehacking.jp

こうしたリンクが増えてくるとしだいに JSON が大きくなってきますが、数千、数万程度のリンクならば問題ないでしょう。

Gemini のおかげで小一時間でできました。便利！