hello,idea

読了時間: 4 min read

【サイト制作 Vol.3】Astroでのブログ構築Tips

サイト制作Astro技術

技術選定、デザインと続いてきたこのシリーズも、今回で一区切りです。 最後は、Astroでのブログ機能の実装における、ちょっとした工夫（Tips）を紹介します。

Content Collections が便利すぎる

Astro v2以降で導入された Content Collections は、Markdownなどのコンテンツを型安全に扱える最高の機能です。

src/content/config.ts にスキーマ（型定義）を書くだけで、フロントマターの入力ミスをビルド時に検知してくれます。

src/content/config.ts
// src/content/config.ts の例
const blogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    published: z.date(),
    tags: z.array(z.string()).optional(),
    draft: z.boolean().default(false), // ドラフトフラグ
  }),
});

これで post.data.title のように補完が効く状態でデータにアクセスできます。もう「typoしてて日付が表示されない！」なんてことはありません。

Draft機能：未完成を許容する装置

ブログを運営するなら、「書きかけの記事」を本番には出さず、開発環境だけで確認したいですよね。 このサイトでは、draft: true というフラグでこれを制御しています。

実装自体は単純なフィルタリングですが、僕にとってこの機能は**「書くハードルを下げるための装置」**でもあります。

「とりあえず書く」を支える 完璧に書き上がらなくても、とりあえず draft: true でコミットしていい。 この安心感があるからこそ、思いついたアイデアをすぐにファイルに起こすことができます。 このサイトの「100点を目指さない」という哲学を、システム面で支えている重要な機能です。

「あえてやらない」勇気：OGP画像の動的生成

当初は、記事のタイトルに合わせてOGP画像（SNSでシェアされた時に出る画像）を動的に生成しようと考えていました。 satori や @astrojs/og を使えば可能なのですが、今回はあえて見送りました。

理由は、Vol.1でも触れた**「シンプルさの維持」**です。

数千記事あるメディアサイトなら必須かもしれませんが、個人ブログでそこまでのビルド時間増加や複雑さを抱え込む必要があるか？と考えた結果、「No」という結論に至りました。

その代わり、記事ごとに個別の画像 (ogImage: ...) を指定できるようにはしてあるので、本当に気合を入れた記事だけ手動で作る運用にしています。

これからの機能：Likeボタン

サイトは公開しましたが、まだ実装したい機能は残っています。 その筆頭が 「Like（ハート）ボタン」 です。

静的サイトで「いいね」機能をどう実装するか？ Firebaseを使うか、Cloudflare D1を使うか……技術的な検討は必要ですが、読者からのリアクションが見える仕組みは、モチベーション維持のためにも近いうちに実装したいと考えています。

まとめ：旅はまだまだ続きます

3回にわたってお送りしたリニューアル記ですが、実は書きたいことの半分も書けていません（笑）。

「hello,idea」は、単なる情報の置き場ではなく、自分の試行錯誤をそのままさらけ出す場所にしたいと思っています。ですので、今回のシリーズはいったん完結ですが、これからはもっと「このサイトの細かいこだわり」を深掘りしていく予定です。

** 今後の執筆予定（サイト制作・深掘り編）**

  • Pagefind導入編: SSGでも爆速な全文検索を実現した仕組み
  • 色彩設計編: 「目に優しい」と「アナログ感」を両立するテーマカラーの作り方
  • ディテール追求編: フォント選定や微細なアニメーションなど、触り心地へのこだわり
  • CSS Modules活用術: 大規模になっても破綻しないスタイリングの整理術

サイトは公開して終わりではなく、育てていくもの。 「100点を目指さない」と言いつつ、裏側はどんどんアップデートしていくつもりです。

新しい hello,idea で、これからもたくさんのアイデアにハローしていきます。

次回もお楽しみに！