Astro で技術ブログを作ってみた

ずっと「ブログ書きたいな」と思いながら後回しにしてたんですが、ようやく重い腰を上げてブログ（takeisa.dev）を作りました。

今回はClaude Code（CC）と一緒にやりました。技術選定から実装とデザイン調整をしてリリースまで2日ちょっとでした。

設計壁打ちと方針変更などの判断のみで、実装は殆どやってくれました。凄い時代ですね。

使った技術

• Astro — フレームワーク。コンテンツサイト向けで速い
• Keystatic — ローカルファイルベースの CMS。記事をブラウザから編集できる
• Tailwind CSS — スタイリング
• Vercel — ホスティング。GitHub 連携で push するだけでデプロイ

なぜ Astro？

Next.js は昔少し触っことがあるんですが、ブログに使うにはちょっとオーバースペックかなと。

Astro はコンテンツサイト向けに特化されてて、デフォルトで JavaScript をほぼ出力しない。つまりめちゃくちゃ速い。それだけで採用理由として十分でした。

セットアップはこれだけ

npm create astro@latest . -- --template blog

テンプレートを使えば MDX サポートやサイトマップ生成が最初から入った状態で始められます。ここからカスタマイズしていく感じ。

記事の管理

src/content/blog/ に MDX ファイルを置くだけ。frontmatter にタイトルと日付を書けば記事として認識されます。

---
title: 記事タイトル
pubDate: 2026-03-01
tags:
  - Astro
---

ここに本文を書く

シンプルでいい。

管理画面（Keystatic）

ファイルを直接触るのもいいけど、せっかくなので CMS も入れました。Keystatic というツールで、記事を /keystatic というパスのブラウザ上の GUI から書いたり編集したりできます。

ファイルの実態は MDX のままなので、Git でそのまま管理できるのがいい。「CMS を使う」と「直接ファイルを触る」を気分で使い分けられる。

データベースは不要で、記事はすべてリポジトリ内のファイルとして保存されます。本番でも使えるように GitHub 認証をかけてます。

その他に拘ったポイント

全体的にシンプルなデザインにしました。

個人的に活力溢れるオレンジ色が好きなので、アクセントカラーに使いました。

デプロイは Vercel に投げる

GitHub リポジトリを Vercel に連携するだけで完了。push するたびに勝手にビルドして反映してくれます。

ただ Keystatic の管理画面を本番で使えるようにするのが地味に大変でした。

まず Keystatic の GitHub 連携には OAuth App ではなく GitHub App が必要でした。最初 OAuth App で設定したんですが、認証後に Authorization failed が出て詰まりました。原因はトークンのレスポンスに refresh_token が含まれないため。GitHub App に切り替えて解決しました。

他にも Vercel のサーバーレス環境では内部的なホストが localhost になるため、redirect_uri が https://localhost/... になってしまう問題もありました。Astro の security.allowedDomains に本番ドメインを指定することで解決。

地味にはまりポイントが多かったので、同じ構成で詰まってる人の参考になれば。

作ってみて

思ってたより全然ラクでした。デザインをゼロから作るのが一番時間かかったくらいで、Astro 自体は詰まるところがほぼなかったです。