個人ブログをAstro×AIで3日で作った全手順|DeepSeek V4 FlashとZedでかかったお金はドメイン代だけ
個人ブログ「余白研究室」を、AI(DeepSeek V4 Flash)とコードエディタ「Zed」だけで3日で作りました。使ったツールやかかったお金、AstroとCloudflare Pagesのしくみ、実際に作ってみて良かったところ・大変だったところまで、つまずいた場所もふくめてぜんぶ書いています。
記事を読んだほうがいい人
- 個人ブログを作ってみたい人
- プログラミングはよく分からないけど、自分のサイトを持ちたい人
- AIを使って、なるべくお金をかけずに作りたい人
- 「サイトを作るには何十万円もかかる」と思っている人
先に結論
先に結果だけ書いておきます。
- かかった期間:3日
- かかったお金:独自ドメイン代とAPI代(年1,000円台とAPIは数百円)
- 使ったツール:DeepSeek V4 Flash と Zed の2つだけ
「え、それだけでサイトが持てるの?」と思うかもしれません。私も最初は半信半疑でした。でも実際にやってみると、思っていたよりずっとすんなり形になりました。逆に言うと、今まで何も作らなかったのがもったいなかったと感じるくらいです。
この記事では、その手順をぜんぶ書いていきます。
余白研究室とは?
余白研究室は、身のまわりのデジタル体験やライフハック、考えごとの整理をテーマにした個人メディアです。
今回は、サイトの設計もデザインもコーディングも、記事の投稿のしくみまで、ぜんぶAIを使ってゼロから作りました。
この記事では、その作り方と、実際にAIを使ってみて分かった良いところ・気をつけたいところをお伝えします。
使ったツールはたった2つ
使ったツールは、次の2つだけです。
- DeepSeek V4 Flash(使ったAI)
- Zed(コードを書くためのアプリ)
お金をなるべくかけずに、サクサク作っていくなら、この2つが一番いいと思いました。
少し前はCursorやGoogle Antigravityが話題でしたが、使えるモデルが限られていて、無料ではなかなか使えないのが実情でした。
DeepSeek V4 Flash|安いのに賢いAI
安くAIを使ってコードを書いてもらうなら、これが一番コスパがいいです。
DeepSeekは中国で生まれたAIで、一番の特徴は「安いのに賢い」ことです。これは本当でした。
個人的には、Geminiよりずっと賢いという印象です。
しかもDeepSeekのWeb版は課金がなくて、誰でも無料で全部の機能を使えます。無料なのに、コードを書くのが得意で、難しい数学や物理の問題を考えるのも得意です。
DeepSeekはAPIでも使えて、V4 FlashとV4 Proという2つのモデルがあります。
- V4 Flash … 速くて軽い。ふだんのコーディングならこれで十分
- V4 Pro … 時間はかかるけど、複雑な設計や考えるのはこちらが得意
使い分けは、ふだんのコーディングは Flash で十分です。設計をまるごと考えてもらいたいときだけ Pro に切り替える、という使い方がちょうどよかったです。
Zed|AIが最初から入っている軽いアプリ
Zed は、Rust という言葉で作られた軽いコードエディタです。とにかく起動も動きも軽くて、AIと一緒にコードを書くことを前提に作られているのが特徴です。
画面の右側にチャット欄があって、「こういう画面を作って」と日本語でお願いするだけで、ファイルを読んでコードを書き換えるまでやってくれます。
VS Code でもAIの機能は使えますが、Zed は最初からAIが入っているので、設定でつまずくことがありませんでした。
サイトのしくみ|Astro × Cloudflare Pages
できあがったサイトのしくみは、とてもシンプルです。
| 役割 | 使ったもの |
|---|---|
| サイトを作る | Astro |
| 記事を書く | Markdown / MDX |
| 公開する場所 | Cloudflare Pages |
| コードの保管 | GitHub |
| 記事の管理 | AstroCMS |
Astro は、動かないページ(静的なページ)を作るのが得意な道具で、表示が速くて、サーバー代もほとんどかからないのがいいところです。ブログのように記事をじっくり読んでもらうサイトとは、相性がいいと感じました。
公開する場所の Cloudflare Pages は、GitHub にデータを送ると、自動で作って公開してくれます。サーバーの設定を自分でいじる必要がないので、公開までのハードルがとても低いです。
作り方|コマンドはたった3つ
やったことをコマンドで書くと、これだけです。
npm create astro@latest
npm run dev
npm run build
- コマンドで Astro のプロジェクトを作る
- AIに「こんなサイトにしたい」と日本語で伝えながら画面を作る
- GitHub に送って公開する
実際の作業はほぼ2番で、あとはAIとおしゃべりするだけでした。エラーが出たらそのままチャットに貼って、「これはなぜ起きるのか」「どう直せばいいか」を聞きます。これを繰り返して、3日で今の形になりました。
3日間のスケジュール
「3日で作れる」と言っても、どんなペースだったのか気になりますよね。実際の流れはこうでした。
| 日 | やったこと | かかった時間の目安 |
|---|---|---|
| 1日目 | Astroプロジェクトを作って、トップページと記事一覧の骨組みをAIに作ってもらう | 3〜4時間 |
| 2日目 | デザイン、色、フォント、スマホ対応をひたすらAIに指示 | 4〜5時間 |
| 3日目 | 記事ページを整えて、Cloudflare Pages への公開、ドメインをつなぐ | 2〜3時間 |
1日目はとにかく「土台を作る」だけ。2日目が一番時間を使っていて、見た目を納得いくまで作り込んでいました。3日目は公開作業なので、正直ほとんど何もしていません。ダラダラやっても、このくらいの時間で終わります。
かかったお金|ドメイン代だけで個人ブログが作れる
気になるお金ですが、結果は次のとおりです。
| 項目 | お金 |
|---|---|
| Astro | 無料 |
| Cloudflare Pages | 無料 |
| GitHub | 無料 |
| DeepSeek(Web版) | 無料 |
| 独自ドメイン | 年1,000円台 |
かかったのは、独自ドメインの代金だけでした。AIを使うお金も、Web版を使うかぎりは無料です。
「サイトを作るにはお金がかかる」というイメージがありましたが、個人ブログの大きさなら、無料の範囲だけでここまでできてしまいます。
しかもこれ、毎月かかるお金も実質ゼロです。 毎月のサーバー代もかからないので、維持費を気にせず書き続けられます。
AIで作って良かったところ
メリット👍️
- 無料のツールだけなので、最初にかかるお金をドメイン代だけにできる
- 日本語で指示するだけでコードが出てくるので、文法を覚えていなくても形になる
- エラーが出ても、そのまま貼って相談すれば原因と直し方を教えてくれる
- デザインの細かい調整を何度でも頼めるので、1人でも納得いくまで作り込める
- 「これってどうやるの?」という疑問を、その場でぜんぶ聞ける
特に助かったのは、エラーを直すことです。エラーの文をそのまま貼るだけで、原因と直し方を教えてくれます。調べる時間がぐっと短くなりました。
もう1つ大きかったのは、「やってみて、違ったら戻す」を気軽にくり返せることです。レイアウトの変更も色の調整も、指示を1回出すだけ。試行錯誤にかかる手間がほぼゼロになったのが、3日で形にできた一番の理由だと思います。
AIで作って大変だったところ
デメリット👎
- 出てきたコードをそのまま信じすぎると、後から直しづらい部分が出てくる
- 指示があいまいだと、思っていたのと違うものが出てきてやり直しになる
- 同じお願いでも、伝え方で仕上がりの良さが大きく変わる
- AIが混み合っている時間帯は、待たされることがある
一番苦労したのは、「思っていたのと違う」が起きたときの伝え直しです。最初は「いい感じにして」と丸投げしていたので、出てくるものが毎回違って、余計に時間がかかりました。
「どのページの、どこを、どう変えたいのか」をはっきり伝えるようにしてから、やり直しが減りました。AI相手でも、人に仕事を頼むときと同じで、はっきり伝えるのが結局は一番速いというのが結論です。
まとめ|AIで個人ブログは3日で作れる
「コードが書けないとサイトは作れない」という壁は、AIのおかげで確かに低くなりました。むしろ大事なのは、自分がどんなサイトにしたいかを言葉にできることだと感じています。
この記事を読んで「自分もやってみたい」と思った人は、まずは AI に「シンプルなホームページを作って」と一言お願いするところから始めてみてください。意外と、その日のうちに形になります。
よくある質問(FAQ)
Q. プログラミングが未経験でも個人ブログは作れますか?
はい、作れます。この記事の方法では、コードはぜんぶAIが作ってくれて、日本語で指示を出すだけで進めました。文法を覚えていなくても形になります。
Q. AstroとWordPressはどちらがおすすめですか?
表示の速さとサーバー代の安さを大事にするならAstroがおすすめです。記事をじっくり読んでもらうブログとは相性がよく、Cloudflare Pagesと組み合わせればサーバーの設定もほぼいりません。
Q. DeepSeekは本当に無料で使えますか?
Web版を使うかぎりは無料です。APIを使う場合は別でお金がかかりますが、ふだんのコーディングならWeb版で十分でした。
Q. AIにコードを書いてもらうコツはありますか?
「どのページの、どこを、どう変えたいのか」をはっきり伝えることです。あいまいな指示はやり直しの原因になるので、人に仕事を頼むときと同じ感覚で伝えるとスムーズです。