技術· 約6分で読めます

Claude に全部作ってもらった、はじめてのブログ（Astro × Cloudflare Pages）

このブログ「hiruのしゃべり場」は、AI の Claude と会話しながら作りました。コードは、ほぼ一行も自分で書いていません。

使ったのは、はじめて触る Astro と、公開先の Cloudflare です。

この記事では、作ってから公開するまでの流れと、途中でつまずいたところをまとめておきます。同じようにブログを作ろうとしている人の参考になればうれしいです。

最初の一言は「自分のブログサイトを作りたい」

Claude に最初に送ったのは、この一言だけです。

すると、いきなり作り始めるのではなく、まず次の 3 つを聞かれました。

  • どの方法で作るか（Astro／Next.js／素の HTML）
  • ブログの主なテーマ
  • デザインの雰囲気

Astro がおすすめと書いてあったので、そのまま Astro・技術ブログ・シンプル を選びました。あとは Claude が Astro の公式ブログテンプレートを元に、日本語のブログに作り変えてくれました。

最初の時点で、次の機能がそろっていました。

  • 記事一覧とタグ
  • ライト／ダークモードの切り替え
  • コードの色分け表示
  • RSS とサイトマップ

デザインは「案を出してもらって選ぶ」

デザインを「どう思う？」と聞くと、意見をくれます。「案をいくつか挙げて」と頼むと、4 つの案を小さなプレビュー付きで見せてくれました。

  • A. 温かみミニマル
  • B. ノート風
  • C. チャット風
  • D. ターミナル風

ここから A 案を選びました。その後は、こんな流れで少しずつ形にしていきました。

  1. タイトルを「hiruのしゃべり場」に決める
  2. 技術以外のことも書きたくなったので、「技術・日常・雑記」のカテゴリを追加
  3. タイトルにアイコンを付けたくなって、吹き出し → ヤギ（正面）→ ヤギの横顔 と変更
  4. ヤギに合わせて、配色を 牧場カラー（ミルク色の背景と牧草の緑）に変更

自分の中にはっきりした完成形がなくても、「もう少しリアルに」「ヤギに合わせて」くらいのふわっとした頼み方で形にしてくれるのが、すごく楽でした。

はじめての Astro で分かったこと

Astro は、ブログのような「中身が決まっているサイト」を作るのが得意なフレームワークです。触ってみて分かったのは、次のようなことです。

記事は Markdown ファイルを置くだけ

src/content/blog/ に .md ファイルを置くと、それが 1 つの記事になります。ファイル名がそのまま URL になります。

src/content/blog/first-camp.md  →  /blog/first-camp/

記事の情報は先頭にまとめて書く

ファイルの先頭に、タイトルや日付を書きます（フロントマターと呼ぶそうです）。

---
title: '記事のタイトル'
description: '一覧に出る紹介文'
pubDate: '2026-10-25'
category: tech
tags: ['Astro']
draft: false
---

項目の型が決められているので、タイトルを書き忘れたりすると、エラーで教えてくれます。draft: true にすると下書きになって、公開版には出ません。

最後は HTML ファイルの集まりになる

npm run build を実行すると、dist フォルダに HTML などのファイルがまとめて出力されます。サーバーで何かを動かす必要がなく、このファイルを置けばそのままサイトになります。この仕組みが、あとで出てくる Cloudflare Pages と相性がいいところです。

GitHub に置く

作ったブログは、git で管理して GitHub に置きました。

Claude はコマンド（GitHub CLI）でつなぐ方法を提案してくれました。ただ、正直ターミナルに慣れていなくて怖かったので、「ブラウザでやりたい」と伝えました。苦手なことは苦手と言えば、別の方法を出してくれます。

Cloudflare で公開する：Workers と Pages の違い

一番つまずいたのがここです。

Cloudflare のダッシュボードで「Workers & Pages」から作成を始めると、最初に Workers の作成画面が出てきます。そのまま進めると、こんな項目が並んだ画面になります。

  • Build command：npm run build
  • Deploy command：npx wrangler deploy

一見それっぽいので Deploy を押しそうになりました。でもこれは Workers 用の画面で、静的なブログを公開したいなら Pages を選ぶのが正解でした。

そもそも何が違うのか

Pages Workers
向いているもの ブログなど、中身が決まっているサイト ログインや画像生成など、アクセスのたびに処理が必要なアプリ
例えるなら 本棚に並べた本を見せる 注文を受けてから料理を作る
設定 ビルドしたファイルを置くだけ 設定ファイルが必要なことが多い
URL ○○.pages.dev ○○.(アカウント名).workers.dev

このブログは、ビルドした時点で全ページが出来上がっています。あとはそれを見せるだけなので、Pages が合っています。

Pages への入り方

  1. 「Workers & Pages」→「Create application」を開く
  2. 画面の下のほうにある「Looking to deploy Pages? Get started」を押す（文字が小さいので見落としやすい）
  3. 「Import an existing Git repository」を選んで、GitHub のリポジトリを選ぶ
  4. ビルドの設定をする

Astro の場合の設定はこうなります。

項目 設定値
Framework preset Astro
Build command npm run build
Build output directory dist

「Deploy command」の欄がなく、「Build output directory」の欄がある画面なら、ちゃんと Pages の画面です。

公開前にやっておいたこと

Claude が先に準備してくれていて助かったのが、次の 3 つです。

  • 公開 URL の設定：astro.config.mjs の site に、公開先の URL（https://yagi-blog.pages.dev）を入れておく。RSS やサイトマップの URL に使われる
  • Node.js のバージョン指定：.node-version ファイルに 24 と書いておく。Cloudflare 側のビルドで、手元と同じバージョンが使われる
  • 404 ページ：これがないと、存在しない URL を開いたときにトップページが表示されてしまう

設定が終わると、あとは GitHub に push するだけで、1〜2 分で自動的にサイトに反映されます。

やってみた感想

自分でコードを書かずに、会話だけでブログを公開まで持っていけたのは驚きでした。

一方で、任せきりにするのではなく、ちゃんと見ていたほうがいいと感じた場面もありました。

  • 頼んでいない作業を先回りでされたときは、「勝手にやめて」と伝えた
  • サンプル記事に架空の体験談が入っていて、そのまま公開すると自分の実体験として読まれてしまうところだった（公開前に確認してくれたので、下書きにした）

「何をしたいか」と「何が嫌か」をはっきり伝えるほど、思いどおりのものに近づきます。

これから、技術のことも日々のことも、ここで気ままにしゃべっていこうと思います。

← 記事一覧へ