作ったページを世界に公開しよう — GitHub + Vercelで無料デプロイ

自分のサイトに「URL」を持とう

前回の記事では、Claudeとの会話だけで自己紹介ページを作りました。ブラウザで開けたときは、ちょっと感動しましたよね。

でも、あのページは今のままだとあなたのパソコンの中にしかありません。友達に「見て！」と言いたくても、画面を直接見せるしかない。

今回は、そのページをインターネットに公開して、URLを送るだけで誰でも見られる状態にします。「自分のWebサイトがあるよ」って言えるようになる回です。

しかも、お金はかかりません。使うのはGitHubとVercelという2つの無料サービスだけ。そして面倒な操作は、今回もClaudeにお任せです。

GitHubとVercelってなに？

いきなり知らない名前が2つ出てきたので、簡単に説明します。

GitHub（ギットハブ）

ファイルをインターネット上に保管できるサービスです。プログラマーがコードを管理するために使っていますが、今回はHTMLファイルの保管場所として使います。Googleドライブにファイルを置くような感覚です。

Vercel（ヴァーセル）

GitHubに保管したファイルを、Webサイトとして公開してくれるサービスです。GitHubにファイルを置くだけでは誰にも見せられませんが、Vercelを使うと自動的にURLが発行されて、誰でもアクセスできるようになります。

つまり、流れはこうです。

1. Artifactsで作ったコードを保存する
2. GitHubにアップロードする
3. VercelがGitHubを見て、自動でWebサイトにしてくれる
4. URLが発行される

「2と3が難しそう…」と思いますよね？でも**ここをClaudeが全部やってくれるので大丈夫です！**あなたがやるのは、アカウントを作ることと、Claudeに「お願い」することだけです。

ステップ1: Artifactsからコードをダウンロードする

まずは、前回Claudeで作ったページのコードを手元に保存します。

1. Claudeを開いて、自己紹介ページを作った会話を見つける
2. Artifactsのプレビュー右上にあるダウンロードボタンをクリック
3. ダウンロードされた index.html をデスクトップに移動しておく

本来場所はどこでもいいのですが、デスクトップに置いておくと、このあとClaudeにお願いするときに場所を伝えやすくなります。

ステップ2: GitHubのアカウントを作る

次に、GitHubのアカウントを作りましょう。ここだけは自分でやる必要があります。

GitHub

GitHub公式 — アカウントを作成

github.com

1. 右上の 「Sign up」 をクリック
2. メールアドレス、パスワード、ユーザー名を入力
3. 認証を完了すれば登録完了

ユーザー名で悩む人が多いんですが、あとから変えることもできるので気楽に決めちゃってOKです。

ステップ3: Vercelのアカウントを作る

GitHubはOK。もう1つだけアカウントを作ったら、いよいよClaudeの出番です。

Vercel

Vercel公式 — 無料でWebサイトを公開

vercel.com

1. 「Start Deploying」 をクリック
2. 「Continue with GitHub」 を選ぶ
3. GitHubとの連携を許可する

GitHubアカウントでログインするので、新しいパスワードを覚える必要はありません。

ここまでの準備は以上です。あとはClaudeに任せます。

ステップ4: Claudeに「公開して」とお願いする

いよいよ本番です。ここでちょっとだけ新しい話をします。

これまでClaudeには「教えて」「作って」とお願いしてきましたが、実はClaude Desktopには、チャットで答えるだけでなく、あなたのパソコン上で操作を実行してくれる機能があります。今回はこれを使って、GitHubへのアップロードからVercelでの公開まで、Claudeに全部やってもらいます。

Claude Desktopを開いて、新しいチャットでこんなふうにお願いしてみてください。専門用語が並んでいますが、意味がわからなくても大丈夫です。このままコピーして送ってください。

するとClaudeが、必要な操作をあなたのパソコン上で実行してくれます。GitHubへのアップロードも、Vercelでの公開も、Claudeが順番に進めてくれるんです。

途中で「この操作を実行していいですか？」と聞かれることがあります。内容を確認して「許可」を押すだけ。

ステップ5: URLを確認して共有する

Claudeの作業が終わると、チャットの中にこんな感じのURLが表示されます。表示されない場合はVercelの中から確認可能です。

https://my-profile-xxxxx.vercel.app

このURLをブラウザに貼り付けてみてください。あなたが作った自己紹介ページが、インターネット上に公開されています。

このURLを友達にLINEで送れば、相手のスマホからもあなたのページが見れますし、少し時間をおけばGoogle検索で表示されるはずです。

これからfirstpromptでは、ゲームや便利ツールなど色々なものを一緒に作っていきますが、公開するときはいつもこの手順と同じです。難しくなっていく気がするかもしれませんが、やることは変わりません。

ページを更新したくなったら

公開できたら次に気になるのは、「あとから直したいときどうするの？」ですよね。これも同じです。Claudeに頼むだけ。

1. まずClaudeに自己紹介ページの修正をお願いする
2. 新しいコードを index.html に上書き保存する
3. Claudeに「GitHubを更新してVercelに反映して」とお願いする

Claudeが全部やってくれて、数秒で最新版が公開されます。

firstpromptも基本的にはClaudeで開発を行っており、今回紹介した方法と全く一緒です。この手軽さは本当に便利です。

うまくいかないときは

途中でエラーが出たり、うまくいかないこともあるかもしれません。そんなときも慌てなくて大丈夫です。

エラーメッセージをそのままClaudeに見せてください。 「こういうエラーが出ました。どうすればいいですか？」と聞けば、原因と解決方法を教えてくれます。

わからないことはClaudeに聞く。 このシリーズでずっとやってきたこと、そのままですね。

まとめ

今回やったことをおさらいします。

• GitHubはファイルの保管場所、Vercelはそれを公開してくれるサービス
• アカウントを作ったら、あとはClaudeに「公開して」とお願いするだけ
• エラーが出てもClaudeに見せれば解決してくれる
• ページの更新も同じ流れでできる

ここまでで、「はじめの一歩」シリーズは完了です。 AIとの会話だけでWebページを作り、それをインターネットに公開するところまでできました。

大事なのは、全部を自分で覚える必要はないということです。わからないことはClaudeに聞けばいい。GitHubもVercelも、最初は「よくわからないけどClaudeに頼んだらできた」で全然OKです。使っていくうちに、少しずつ理解が追いついてきます。

「自分のWebサイトを持ってる」って、なかなかいい響きじゃないですか？