ブログをリニューアルした

カラスがポテチを食っていた。ちょうどスーパーの出口。好きなんだよな、捉えた獲物を盗まれないよう勇足で現場から去っていく動物の姿。今回はポテチか。大丈夫？カロリー。しかものり塩味。食べれるの？８枚くらい。いいな。俺も食べたいよ。

ブログのリニューアルが一段落した。

以前はHugoで静的サイトを生成してFirebaseにホスティングしていた。それはそれで動いていたんだが、テーマのカスタマイズが辛くなってきた。「動いてるコードを触りたくない」という空気が漂い始めると、アウトプットの頻度が落ちる。

Astroに変えた。HugoもSSGだが、AstroはTypeScriptとコンポーネント設計でUIをフルコントロールできる。Cloudflare Pagesへのデプロイは pnpm build して wrangler pages deploy dist するだけ。Firebaseの設定ファイルより断然シンプルだった。

書くことに集中できる環境がほしかった。結果的にスタックが整理された。

工夫した点

Docが埋もれないようにシリーズタグ化した

気軽にアウトプットしたくて、Docは1概念1ファイルにした。1つのMDファイルに何でも詰め込むより、「この概念だけ」を1枚にするほうが書きやすいし読みやすい。

問題はバラバラになること。100枚のファイルが並んでいても関係性がわからない。

frontmatterに series フィールドを持たせて、同じシリーズのDocをウィジェットでつなぐようにした。「Cloudflare Pagesの記事を読んだら、その下にD1やKVの関連記事が並ぶ」みたいな導線ができる。タグとは別の軸で束ねられる。

OGPを自動生成にした

OGPプレビュー

SNSにリンクを貼ると記事ごとにサムネイルが出る、アレ。以前は設定していなかったので、どの記事もデフォルトのアバター画像が出ていた。

Satoriというライブラリを使って、ビルド時に全記事ぶんのPNG（1200×630）を生成している。タイトルと絵文字とタグが入る。手動で画像を作らなくていい。

落とし穴が1つあって、テキストフォントでは絵文字が□になる。NotoSans JPをいくら渡しても絵文字グリフは含まれていない。TwitterがOSSで公開しているTwemoji（SVGの絵文字セット）をCDNから取得して img 要素として埋め込む方法で解決した。

ブログの冒頭に「今日あった出来事」を置いた

カラスのポテチみたいな話は技術と何も関係ない。

でも書き出しにそういうのがあると、「今日あったことを記録する日記」として記事を始められる。技術の話だけを書かなくていい、という構成上の許可になる。アウトプットのハードルを下げるための仕掛け。

「---」で区切って、区切りの前は今日の話、区切りの後は学びや考察、というフォーマットにした。

書く場所が整った。

あとは書くだけだ。カラスみたいに、盗まれる前に食い尽くすくらいの勢いで。