こんにちは、夫です！
今回は新しい試みとして、レンタルサーバーを使わずに無料でブログを公開することに挑戦しました。
きっかけはYouTubeの動画
ある日YouTubeを見ていたら、こんな方法を紹介している動画を見つけました。
- Claude Coworkのデザイン機能でブログのHTMLを作成
- Cloudflare Pagesで無料ホスティング
- 必要な費用は独自ドメイン代（年間1,000〜2,000円程度）だけ
「レンタルサーバー代が不要になる？Claude Codeを使うだけで実現できる？それならやってみよう！」と思ったのが動機です。
正直に言います：内容はさっぱり理解していません
この記事にはGitHubとか、Cloudflare Pagesとか、静的サイトとか、いろんな専門用語が出てきます。
正直に言うと、私はこれらをほとんど理解していません。
でも、それで全然大丈夫でした。やったことはただ一つです。
わからない画面が出てきたら、スクリーンショットを撮ってAIに見せる。
これを繰り返しただけです。以下にその実際のやり取りをご紹介します。
① Claude CoworkのDesignプラグインでブログを作成
まずClaude CoworkにDesignプラグインをインストールしました。(下記の”Claude Cowork”をクリック）
インストールが完了すると、CustomizeにDesignが追加されます
インストール後、こう指示しました。
私： シンプルなブログのトップページをHTMLで作成してください。「夫婦でためす、AIな日々」というタイトルで、AIをテーマにした清潔感のあるデザインにしてください。
すると数十秒でブログのデザインが生成されました。
AI： 清潔感のあるAIテーマのブログトップページを作成しました。やわらかい紫〜シアンのグラデーション、6枚のサンプル記事カード、モバイル対応のレスポンシブレイアウトになっています。
コーディングの知識ゼロでも、一言指示するだけでプロ品質のデザインができました。生成されたHTMLのソースコードをコピーしてindex.htmlという名前で保存しました。
② GitHubにHTMLをアップロード
次の壁はGitHubです。そもそもGitHubが何かもわからなかったので、まずAIに聞きました。
私： GitHubって何ですか？なぜ必要なんですか？
AI： コードを管理・保存するサービスです。今回はCloudflare Pagesと連携してサイトを公開するために必要です。まずアカウントを作成してください。
アカウントを作成してログインしたら、この画面になりました。
私： （スクリーンショットを送って）この画面、次に何をすればいいですか？
AI： 左上の「Create repository」ボタンをクリックしてください。
リポジトリを作成してindex.htmlをアップロードしました。
私： （スクリーンショットを送って）こうなりましたが、合ってますか？
AI： 完璧です！index.htmlがGitHubに保存されました。
③ Cloudflareアカウントを作成
Cloudflareのアカウント作成でも、途中で選択肢が出るたびにAIに確認しました。
私： 「How would you like to get started?」という画面が出ました。何を選べばいいですか？
AI： 「Build and scale apps globally」を選択してください。サイトをデプロイするのが目的なので、これが一番合っています。
こんな感じで、英語の画面が出てきても一つひとつAIに確認しながら進めました。
④ Cloudflare Pagesでデプロイ（公開）
ここが一番の山場でした。そして一番つまずいた部分でもあります。
まずAIの指示に従って進めていくと、この画面になりました。
私： （スクリーンショットを送って）この画面になりました。次はどうすればいいですか？
AI： 「Drag and drop your files」の「Get started」をクリックしてください。GitHubを経由せず、直接HTMLファイルをアップロードする方法で進めます。こちらの方がシンプルで確実です。
プロジェクト名を入力して、index.htmlをアップロードしました。
「Deploy site」をクリックすると数秒でデプロイ完了です。
エラーが出ても焦らない。スクリーンショットをAIに見せるだけ
実はデプロイ後、こんなエラーが出ました。
私： （スクリーンショットを送って）こんなエラーが出ました。どうすればいいですか？
AI： 心配しなくて大丈夫です。最初にWorkersとしてデプロイしてしまったのが原因です。「Drag and drop your files」からPagesとして再デプロイしてください。
その後も404エラーが出たり、URLが見つからなかったりと、トラブルが続きました。でもその都度スクリーンショットを撮ってAIに見せると、原因と対処法をすぐに教えてくれました。
私： （404エラーの画面を送って）またエラーです…
AI： フォルダごとアップロードし直してみてください。
こんなやり取りを繰り返しながら、少しずつ前に進んでいきました。
完成！ブログが世界に公開されました
そしてついにこの画面が表示されました。
アクセスURL：https://fuufu-ai-blog-pages.pages.dev
やってみてわかったこと
今回一番実感したのは、「わからなくても、スクリーンショットを撮ってAIに見せれば進める」 ということです。
英語の画面、見慣れない専門用語、突然出てくるエラー。どれも一人だったら確実に詰まっていました。でもAIに画面を見せながら一個一個確認していけば、知識ゼロでも前に進めます。
費用面では、Cloudflare Pagesは完全無料です。独自ドメインを設定する場合は年間1,000〜2,000円程度かかりますが、それだけです。レンタルサーバー代は不要になります。
ただし一点注意があります。 今回作ったのは静的なHTMLページなので、WordPressのような記事管理機能はありません。記事を追加するたびにHTMLを更新してアップロードし直す必要があります。
今回のまとめ
- Claude CoworkのDesignプラグインで本格的なHTMLデザインが生成できた
- GitHub＋Cloudflare Pagesで費用ゼロでブログを公開できた
- 専門知識ゼロでもスクリーンショットをAIに見せながら進めれば大丈夫
- エラーが出ても焦らずAIに聞けば解決できた
次回は、今までWordPressで書いてきた記事をこの静的サイトに移植する作業に挑戦します。どうやってHTMLページとして記事を追加していくか、その方法をAIと一緒に考えていく予定です。お楽しみに！
コメント