こんにちは、夫です！

今回は新しい試みとして、レンタルサーバーを使わずに無料でブログを公開することに挑戦しました。

きっかけはYouTubeの動画

ある日YouTubeを見ていたら、こんな方法を紹介している動画を見つけました。

「レンタルサーバー代が不要になる？Claude Codeを使うだけで実現できる？それならやってみよう！」と思ったのが動機です。

正直に言います：内容はさっぱり理解していません

この記事にはGitHubとか、Cloudflare Pagesとか、静的サイトとか、いろんな専門用語が出てきます。

正直に言うと、私はこれらをほとんど理解していません。

でも、それで全然大丈夫でした。やったことはただ一つです。

わからない画面が出てきたら、スクリーンショットを撮ってAIに見せる。

これを繰り返しただけです。

① Claude CoworkのDesignプラグインでブログを作成

まずClaude CoworkにDesignプラグインをインストールしました。インストールが完了すると、CustomizeにDesignが追加されます。

インストール後、こう指示しました。

シンプルなブログのトップページをHTMLで作成してください。「夫婦でためす、AIな日々」というタイトルで、AIをテーマにした清潔感のあるデザインにしてください。

すると数十秒でブログのデザインが生成されました。コーディングの知識ゼロでも、一言指示するだけでプロ品質のデザインができました。生成されたHTMLのソースコードをコピーしてindex.htmlという名前で保存しました。

② GitHubにHTMLをアップロード

次の壁はGitHubです。そもそもGitHubが何かもわからなかったので、まずAIに聞きました。

私：GitHubって何ですか？なぜ必要なんですか？
AI：コードを管理・保存するサービスです。今回はCloudflare Pagesと連携してサイトを公開するために必要です。まずアカウントを作成してください。

アカウントを作成してログインし、「Create repository」ボタンをクリック。リポジトリを作成してindex.htmlをアップロードしました。

③ Cloudflareアカウントを作成

Cloudflareのアカウント作成でも、途中で選択肢が出るたびにAIに確認しました。英語の画面が出てきても一つひとつAIに確認しながら進めました。

④ Cloudflare Pagesでデプロイ（公開）

ここが一番の山場でした。AIの指示に従い、「Drag and drop your files」からindex.htmlをアップロード。「Deploy site」をクリックすると数秒でデプロイ完了。

エラーが出ても焦らない。スクリーンショットをAIに見せるだけ

デプロイ後にエラーが出ましたが、その都度スクリーンショットを撮ってAIに見せると、原因と対処法をすぐに教えてくれました。404エラーが出たりURLが見つからなかったりとトラブルが続きましたが、こんなやり取りを繰り返しながら少しずつ前に進んでいきました。

完成！ブログが世界に公開されました

アクセスURL：https://fuufu-ai-blog-pages.pages.dev

やってみてわかったこと

今回一番実感したのは、「わからなくても、スクリーンショットを撮ってAIに見せれば進める」ということです。

費用面では、Cloudflare Pagesは完全無料です。独自ドメインを設定する場合は年間1,000〜2,000円程度かかりますが、それだけです。レンタルサーバー代は不要になります。

ただし一点注意があります。今回作ったのは静的なHTMLページなので、WordPressのような記事管理機能はありません。記事を追加するたびにHTMLを更新してアップロードし直す必要があります。

今回のまとめ

次回は、今までWordPressで書いてきた記事をこの静的サイトに移植する作業に挑戦します。