Claude Codeで個人サイトを作って公開するまで｜Astro×Cloudflare Pages

このHOBNOVA自体、実はClaude Codeと会話しながら作りました。この記事では、そのときに実際にたどった手順をベースに、「Claude Code × Astro × GitHub × Cloudflare Pages」という構成で個人Webサイトを作り、公開するまでの流れを紹介します。

HOBNOVAを作ろうと思った理由はシンプルです。

キャンプやガジェットなど興味のあるテーマについて発信する場所がほしかった
記事だけでなく、データ分析やちょっとしたWebツールも公開したかった
サーバー管理などの運用コストはできるだけ抑えたかった
とはいえ自分でHTML/CSSをすべて書く時間はない。AIの力を借りて開発のハードルを下げたかった

なお、先にお伝えしておくと「完全無料」で作れるわけではありません。ここで紹介する構成は無料の範囲でかなり広く使えますが、独自ドメインを取得する場合などは別途費用がかかります。この記事では、費用が発生しうるポイントもあわせて説明します。

HOBNOVAとは

念のため、この記事のベースになっているサイトについて簡単に触れておきます。

HOBNOVAは「HOBBY（趣味・好奇心）」と「NOVA（新しい発見）」を掛け合わせた個人メディアです。「好奇心から、新しい発見を。」をテーマに、CAMP・GADGET・DATA LAB・DIGITAL MARKETING・TOOLS といったテーマについて、「試す」「調べる」「分析する」「作る」ことで得られた発見を発信しています。詳しくはABOUTページにまとめています。

今回作ったサイトの構成

今回の構成は、次の4つのサービス・ツールを組み合わせたものです。

Claude Code → Astro → GitHub → Cloudflare Pages → 公開

それぞれが担っている役割を整理すると、次のようになります。

サービス	役割	一言でいうと
Claude Code	開発	AIと会話しながらコードを書く・直す開発環境
Astro	開発	高速なコンテンツサイトを作りやすいWebフレームワーク
GitHub	コード管理	サイトのソースコードを保存し、変更履歴を管理する場所
Cloudflare Pages	ホスティング・公開	GitHubのコードをビルドし、Webサイトとして公開するサービス

なぜこの構成にしたのか

Claude Codeを選んだ理由

Claude Codeは、ターミナル上でAIに自然言語で指示しながらコードを書いたり修正したりできる開発ツールです。

「ヘッダーに検索アイコンを追加して」のように自然言語で指示できる
1つのファイルだけでなく、関連する複数ファイルをまとめて扱える
既存のコードやディレクトリ構成を読み取ったうえで、それに沿った形で修正してくれる

この特性のおかげで、HTML/CSSを1行ずつ書く力がなくても、「どんなサイトにしたいか」を言葉で伝えるところからサイト制作を始められます。

ただし注意点もあります。AIが生成したコードを無確認でそのまま公開するのはおすすめしません。後述するように、ビルドが通るか、実際の表示が崩れていないか、SEO関連のタグが正しく入っているかなどは、公開前に必ず確認するようにしています。

Astroを選んだ理由

Astroは、ブログやコーポレートサイトのような「コンテンツ中心のサイト」を作るのに向いたWebフレームワークです。HOBNOVAでは主に次の理由で採用しました。

静的サイト（SSG: Static Site Generation）との相性がよく、表示速度が速い
ページごとに必要な分だけJavaScriptを配信する設計になっており、余計なJavaScriptを送りすぎずに済む
Markdown/MDXで記事を書きつつ、UI部分はコンポーネントとして分離して管理できる
カテゴリやページの種類が増えても拡張しやすい

HOBNOVAでは実際に、記事コンテンツはMarkdown（Astro Content Collections）で、見た目を作るUI部品は.astroコンポーネントで、それぞれ分けて管理しています。

GitHubを使う理由

GitHubは、コードをインターネット上に保存し、変更履歴を管理できるサービスです。

コードのバックアップ先になる
いつ・何を変更したかの履歴が残るので、問題があれば前の状態に戻せる
後述するCloudflare Pagesと連携させることで、自動デプロイの起点にできる

Cloudflare Pagesを選んだ理由

Cloudflare Pagesは、GitHub上のコードをビルドしてWebサイトとして公開できるホスティングサービスです。

静的サイトを手軽に公開できる
GitHubとの連携が数クリックで完了する
GitHubへpushするだけで自動的にビルド・再デプロイされる
個人サイト規模であれば、無料プランの範囲でも十分に運用できる

料金プランや無料枠の詳細な条件は今後変わる可能性があるため、この記事では具体的な数値を断定せず、契約前に必ずCloudflareの公式サイトで最新情報を確認することをおすすめします。

STEP 1｜必要なものを準備する

作業を始める前に、次のものを用意しておきます。

Claude / Claude Code: AIと会話しながらコードを書くための開発環境
Node.js: Astroを動かすために必要なJavaScriptの実行環境。特別な理由がなければLTS（長期サポート）版を使うのが無難です
Git: コードの変更履歴を管理するツール
GitHubアカウント: コードを保存する場所
Cloudflareアカウント: サイトを公開する場所

STEP 2｜Claude Codeでサイトを設計する

いきなりコードを書き始めるのではなく、最初に次のようなことを言葉で整理しておくと、後の手戻りが少なくなります。

サイトのコンセプトは何か
どんなカテゴリを扱うか
サイトマップ・URL構造をどうするか
デザインの方向性（配色・フォントなど）
記事ページに必要な要素（パンくず・目次・関連記事など）

HOBNOVAの場合は、CAMP・GADGET・DATA LAB・DIGITAL MARKETING・TOOLSという5つのカテゴリを軸に設計しました。

また、プロジェクトのルートにCLAUDE.mdというファイルを作り、ブランドカラーやフォント、日本語×英語の表記ルール、ディレクトリ構成、コンポーネントの設計方針、SEOのルールなどをまとめてあります。Claude Codeはこのファイルを読み込んだうえで作業してくれるため、日をまたいで機能を追加していっても、デザインや実装方針がブレにくくなります。

STEP 3｜Astroでサイトを作る

Astroプロジェクトは、大まかに次のような構成になります（HOBNOVAの実際の構成を簡略化したものです）。

src/
├─ components/   見た目を作るUI部品（ヘッダーやカードなど）
├─ layouts/      ページ共通のレイアウト
├─ content/      Markdownで書く記事・データコンテンツ
├─ content.config.ts  コンテンツの型（frontmatterのルール）を定義
├─ pages/        URLに対応するページファイル
└─ styles/       全体のスタイル
public/          そのまま配信される画像などの静的ファイル
astro.config.mjs Astro自体の設定ファイル
package.json     依存ライブラリや実行コマンドの定義

ポイントは、記事などのコンテンツと、見た目を作るUIコンポーネントを分けて管理していることです。たとえばHOBNOVAの記事は、次のようなfrontmatter（記事の付加情報）を持つMarkdownファイルとして管理しています。

---
title: "記事タイトル"
description: "検索結果に表示される説明文"
publishDate: 2026-09-01
category: "camp"
tags: ["タグ1", "タグ2"]
draft: false
---

ここから本文をMarkdownで書きます。

こうしておくと、デザインを変更したいときはコンポーネント側だけを直せばよく、記事を追加したいときはMarkdownファイルを増やすだけで済みます。

STEP 4｜ローカルでサイトを確認する

コードを書いたら、公開前に自分のパソコン上でサイトを確認します。HOBNOVAでは次のコマンドで開発用サーバーを起動しています（package.jsonのscriptsに定義されている実際のコマンドです）。

npm install   # 必要なライブラリをインストール
npm run dev   # 開発用サーバーを起動

起動すると、http://localhost:4321のようなURLが表示されます。localhostは「自分のパソコン自身」を指すアドレスで、まだインターネット上には公開されていません。ここでレイアウト崩れがないか、リンクが正しく動くかなどを確認しながら作業を進めます。

STEP 5｜GitHubにリポジトリを作る

サイトの土台ができたら、GitHubにリポジトリ（コードの保管場所）を作り、ローカルのプロジェクトと接続します。

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/ユーザー名/リポジトリ名.git
git push -u origin main

このとき、.envファイルやAPIキー、パスワードなどの秘密情報を絶対にGitHubへpushしないよう注意が必要です。HOBNOVAでは.gitignoreというファイルに、node_modules（ライブラリの実体）やビルド出力、.env系のファイルなどを登録し、それらが誤ってGitHubに上がらないようにしています。pushする前にgit statusで変更内容を確認する習慣をつけておくと安心です。

STEP 6｜Cloudflare PagesとGitHubを接続する

次に、Cloudflareのダッシュボードから、先ほどのGitHubリポジトリと連携します。おおまかな流れは次のとおりです。

GitHubリポジトリ → Cloudflare Pagesで連携 → ビルド設定 → デプロイ

Astroプロジェクトの場合、ビルド設定は次のようになります（2026年8月時点でHOBNOVAが実際に使っている設定です）。

Framework preset: Astro
Build command: npm run build
Build output directory: dist

Cloudflare Pagesの管理画面の仕様は今後変わる可能性があるため、実際に設定する際はCloudflare Pagesの公式ドキュメントもあわせて確認してください。

STEP 7｜サイトを公開する

設定を保存すると、Cloudflare Pagesが自動的にビルドを行い、サイトを公開してくれます。デプロイが完了すると、まずhttps://プロジェクト名.pages.devという形式のURLでアクセスできるようになります。HOBNOVAの場合、現在は実際に https://hobnova.pages.dev で公開されています。

STEP 8｜更新がかなり楽になる

ここが個人的に一番のメリットだと感じている部分です。一度GitHubとCloudflare Pagesを接続してしまえば、以降の更新はとてもシンプルになります。

Claude Codeで修正 → git commit → GitHubへpush → Cloudflare Pagesが自動ビルド → 公開サイトに反映

最初の環境構築さえ済ませてしまえば、あとは「記事を1本書いて、確認して、pushする」というサイクルを繰り返すだけです。HOBNOVAでも、記事の追加やDATA LABコンテンツの追加は、このサイクルで行っています。

STEP 9｜独自ドメインを設定する

独自ドメイン（example.comのような自分名義のアドレス）は必須ではありません。Cloudflare Pagesが自動で発行してくれる*.pages.devのURLでも、サイトとして問題なく公開できます。

一方で、ブランドとして長く運用したいサイトであれば、独自ドメインの取得も選択肢になります。費用はドメインの種類（TLD）やレジストラによって幅があるため、この記事では金額を断定しません。実際、HOBNOVAも現時点では独自ドメインを取得しておらず、コンテンツが十分に増えたタイミングで検討する予定です。

STEP 10｜Google Search Consoleを設定する

サイトを公開したら、Google Search Consoleにも登録しておくと、検索経由での流入を把握しやすくなります。大まかな流れは次のとおりです。

Google Search Consoleでサイトを登録し、所有権を確認する
サイトマップ（HOBNOVAの場合は/sitemap-index.xml）を送信する
Googleにインデックス（検索結果に登録）されるのを待つ

公開してすぐにGoogle検索結果に表示されるわけではない点には注意してください。インデックスされるまでには数日〜数週間かかることもあります。

実際に作って感じたメリット

AIが実装の細かい部分を担ってくれるので、着手のハードルがかなり下がる
「ここをもう少し余白を空けたい」のような感覚的な指示でもデザインを調整できる
記事だけでなく、DATA LABのようなデータ分析コンテンツや、TOOLSのような独自の計算ツールも同じ仕組みの上に作れる
一度GitHubとCloudflare Pagesをつないでしまえば、その後の更新作業が驚くほど身軽になる

注意したいポイント

AIが生成したコードを無条件に信用せず、内容を確認する
.envやAPIキーなどの秘密情報をGitHubへpushしない
公開前にnpm run build（HOBNOVAではnpx astro checkも）を実行し、エラーがないか確認する
スマートフォンでの表示崩れがないか確認する
リンク切れがないか確認する
画像はWebP/AVIFなど、Web向けに最適化された形式で配信する
title・description・OGPなどのSEO関連情報を設定する
外部サービスの料金・仕様は変更される可能性があるため、契約前に必ず公式情報を確認する

まとめ

以前であれば、個人でWebサイトを作って公開するには、HTML/CSS/JavaScriptの知識に加えて、サーバーの用意やGitの使い方まで理解する必要がありました。Claude CodeのようなAI開発ツールと、Astro・GitHub・Cloudflare Pagesという組み合わせを使うことで、その取り組みやすさは大きく変わってきています。

とはいえ、AIに全部を丸投げすればよいわけではありません。「どんなサイトにしたいか」「何を伝えたいか」を決めるのは、あくまで作り手自身です。HOBNOVAもこの環境をベースに、これからも記事・DATA LAB・TOOLSを少しずつ増やしていく予定です。