Astro + Cloudflare Pagesでブログを3日で作った話

このブログはAstro + Cloudflare Pagesで作りました。

開発期間は3日です。

IT系の会社員として普段から開発には携わっていますが、
個人でゼロからブログを立ち上げるのは初めてでした。

今回は、このブログをどうやって作ったのかを
エンジニア向けに書いてみます。

ブログを作ろうと思った理由

きっかけは2つあります。

① 資産形成の記録を残したかった

FIREを目指して資産形成に取り組む中で、
自分の考えや状況を記録に残したいと思うようになりました。

記録することで思考が整理されるし、
振り返ったときに自分の成長も見えるかなと。

② エンジニアとしてのアウトプットの練習

仕事では日々コードを書いていますが、
個人でアウトプットする機会はあまりありませんでした。

ブログを通じて、
技術的なアウトプットの習慣をつけたいと考えました。

技術選定｜なぜAstroを選んだのか

WordPressも検討した

ブログといえばWordPressが一般的です。

実際に検討もしました。
情報も多いし、ブログに特化しているので合理的な選択肢だと思います。

ただ、自分の場合は以下の理由でAstroを選びました。

Astroを選んだ理由

① VSCodeとGitで記事を管理したかった

エンジニアとして、
記事もコードと同じようにVSCodeで書いて、Gitで管理したいと思いました。

Markdownで記事を書き、
GitHubにpushすればデプロイされる。

この開発体験がWordPressにはない大きなメリットでした。

② サーバーが不要で安く済む

Astroは静的サイトジェネレーター（SSG）なので、
ビルドしたHTMLをCDNで配信するだけです。

サーバーを借りる必要がなく、
独自ドメインさえあれば十分です。

WordPressだとレンタルサーバーの費用が月額数百〜数千円かかりますが、
Astro + Cloudflare Pagesならホスティング費用はゼロです。

③ 表示が速い

Astroは不要なJavaScriptを排除した
軽量なHTMLを生成します。

ブログのようなコンテンツサイトでは、
表示速度はSEOにも直結するため重要です。

なぜCloudflare Pagesなのか

ホスティング先としては
Vercel、Netlify、GitHub Pagesなども候補にありました。

Cloudflare Pagesを選んだ理由は、
会社で取り扱ったことがあり、
自分のサービスでも使ってみたかったからです。

実際に使ってみて感じたメリットは

無料枠が十分（個人ブログなら余裕）
デプロイが速い（GitHubにpushするだけ）
CDNが世界中にある（表示が速い）
独自ドメインの設定が簡単（Cloudflare DNSとの連携）

という点です。

技術構成

このブログの技術構成は次の通りです。

項目	技術
フレームワーク	Astro
言語	TypeScript
スタイリング	Tailwind CSS
記事管理	Markdown
ホスティング	Cloudflare Pages
DNS	Cloudflare DNS
ソース管理	GitHub
エディタ	VSCode

記事はMarkdownで書いて、決まったディレクトリに配置するだけです。

GitHubにpushすると、
Cloudflare Pagesが自動でビルド・デプロイしてくれます。

開発で使ったツール

VSCode

メインのエディタです。
Markdownのプレビューも使えるので記事の執筆にも便利です。

Claude Code

開発にはClaude Codeを活用しました。

コンポーネントの実装やスタイリング、
バグの修正などをClaude Codeと一緒に進めました。

ターミナル上で対話しながら開発できるので、
一人で開発しているのにペアプログラミングをしているような感覚でした。

ChatGPT

システムの設計段階ではChatGPTを活用しました。

ディレクトリ構成やURL設計、SEOの方針など、
全体の設計を相談しながら決めていきました。

ChatGPTはスマホでも使えるので、
夜寝る前にベッドの中で「こういうブログにしたい」と要求しながら
設計を詰めていました。

開発なのにPCの前にいなくてもできるのは
すごく気軽で、生成AIならではの体験だと思います。

開発期間は3日

このブログの開発期間は3日です。

内訳はざっくりこんな感じです。

1日目: 設計（ChatGPTと相談）、Astroプロジェクトのセットアップ
2日目: レイアウト、コンポーネント、SEO対応
3日目: 記事の執筆、OG画像生成、デプロイ

AIツールを活用したおかげで、
3日間でブログとして十分な形に仕上がりました。

正直なところ、苦労はあまりありませんでした。

Astro自体がシンプルなフレームワークで学習コストが低く、
分からないことはAIに聞けば解決できたからだと思います。

かかったコスト

このブログの運用にかかっているコストは

項目	費用
Cloudflare Pages	無料
Cloudflare DNS	無料
GitHub	無料
独自ドメイン（.com）	年間約1,500円
合計	年間約1,500円

ドメイン代だけです。

WordPressでレンタルサーバーを借りると
月額500〜1,000円程度かかるので、
年間で見るとかなりの差になります。

やってみて感じたこと

記事の投稿はPCが必要

一つ欠点を挙げるとすれば、
記事の投稿がスマホで気軽にできないところです。

記事を公開するにはGitHubかVSCodeを介する必要があります。

試しにスマホでGitHubのファイル編集をやってみましたが、
操作性がいまいちで、結局PCでやる方がいいなと感じました。

WordPressならスマホのブラウザからでも
記事の投稿や編集ができるので、この点はWordPressの方が優れています。

ただ、自分の場合は記事を書くのもPCの方が集中できるので、
大きな不満にはなっていません。

エンジニアならAstroはおすすめ

VSCode + Git + Markdownという
エンジニアにとって馴染みのあるワークフローでブログが書けるのは
想像以上に快適でした。

WordPressの管理画面にログインして記事を書くよりも、
自分には合っていると感じています。

AIの活用で個人開発のハードルが下がった

設計から実装まで、AIを活用することで
一人でも短期間でブログを立ち上げることができました。

特にClaude Codeは、
コードを書きながらリアルタイムで相談できるので、
個人開発との相性がとても良いと感じました。

まとめ

このブログの構成をまとめると

Astro（静的サイトジェネレーター）
Cloudflare Pages（ホスティング）
Markdown（記事管理）
VSCode + Claude Code（開発）
ChatGPT（設計）
コスト: 年間約1,500円（ドメイン代のみ）
開発期間: 3日

エンジニアでブログを始めたいと思っている人には、
Astro + Cloudflare Pagesの構成はかなりおすすめです。

また、今回の開発はほぼ生成AIの力で進めました。

設計はChatGPT、実装はClaude Code。
自分がやったのは方針の判断と微調整くらいです。

そう考えると、
非エンジニアでも生成AIを活用すれば
同じようなブログを作れる可能性があると思っています。

もちろんGitやターミナルの基本的な操作は必要ですが、
それもAIに聞きながら進められる時代です。

「ブログを作りたいけど技術がない」と思っている人にとっても、
生成AIは大きな味方になるかもしれません。