ちょっと思い立って、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 id="20260621014411" url="https://example.com" >}}

のように呼べば大丈夫です。URL 欄は使っていないのですが、JSON ファイルが失われた場合のための予防策になっています。

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

lifehacking.jp

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

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

(アイキャッチ： Hal Gatewoodが撮影した写真のHal Gatewoodが撮影したイラスト素材)