GitHubとVercelで
サイト公開
初心者入門
Webサイトの公開は、昔よりかなり簡単になっています。
コードをGitHubに置き、Vercelと接続すれば、公開、更新、確認URLの発行までかなり自動化できます。
GitHubは、サイトの保管場所。
Vercelは、サイトを公開する場所。
この記事で分かること
この記事では、GitHubとVercelを使ってサイトを公開する基本の考え方を、初心者向けにまとめます。
GitHubとVercelとは
GitHubは、コードやファイルの変更履歴を管理するサービスです。WebサイトのHTML、CSS、JavaScript、Next.jsのコード、画像、READMEなどを置けます。
Vercelは、WebサイトやWebアプリを公開するためのプラットフォームです。GitHubのリポジトリと接続すると、コードが更新されるたびに自動でデプロイできます。
- GitHub: サイトの保管場所
- Vercel: サイトをインターネットに公開する場所
- Git: 変更履歴を残す仕組み
- デプロイ: 作ったサイトを公開状態にする作業
なぜ初心者に向いているのか
GitHubとVercelの組み合わせが初心者に向いている理由は、公開までの作業が分かりやすいからです。
昔ながらのサイト公開では、サーバー契約、FTP、ドメイン設定、SSL証明書、手動アップロードなどを全部理解する必要がありました。今でもそれらは大事ですが、最初の1サイト目で全部覚える必要はありません。
Vercelを使うと、GitHubのリポジトリを選んで、フレームワークを検出して、ビルドして、URLを発行するところまで進められます。
サイト公開までの全体像
1. サイトを作る
2. GitHubリポジトリを作る
3. コードをGitHubへpushする
4. VercelでGitHubリポジトリを選ぶ
5. ビルド設定を確認する
6. Deployを押す
7. 発行されたURLで表示確認する
8. 必要なら独自ドメインを設定するHTMLだけのサイトでも、Next.jsのサイトでも、考え方は同じです。AIエージェントを使う場合は、Claude CodeやCodexに「GitHubへ置きやすい構成にして」「Vercelで動くように確認して」と頼むとスムーズです。
AIに公開準備を頼む
GitHubとVercelで公開する前提で、Webサイトを整えてください。
目的:
- 初心者でもVercelにデプロイできる構成にする
- READMEに公開手順を書く
- 秘密情報やAPIキーをGitHubに含めない
確認してほしいこと:
1. このプロジェクトがHTML/CSS/JSなのか、Next.jsなのか確認
2. package.jsonがある場合はbuildコマンドを確認
3. Vercelで必要な環境変数があるか確認
4. READMEにローカル起動、ビルド、デプロイ手順を追記
5. GitHubに上げてはいけないファイルがないか確認GitHubにコードを置く
GitHubにサイトを置くには、リポジトリを作ります。初心者は、まずGitHubの画面から新しいリポジトリを作るのが分かりやすいです。
git init
git add .
git commit -m "feat: initial site"
git branch -M main
git remote add origin https://github.com/USER/REPO.git
git push -u origin mainAPIキー、パスワード、個人情報、顧客データ、.env の中身はGitHubに上げないでください。
Vercelでサイトを公開する
1. Vercelにログイン
2. Add New Projectを選ぶ
3. GitHubリポジトリを選ぶ
4. Framework Presetを確認
5. Build Commandを確認
6. Environment Variablesがあれば入れる
7. Deployを押す公開が終わると、VercelのURLが発行されます。PCとスマホで表示、画像、リンク、フォーム、CTAを確認してください。
Vercelの便利機能
自動デプロイ
GitHubに変更を反映すると、Vercel側も自動で新しい状態へ更新されます。
プレビューURL
本番へ出す前に、変更ごとの確認URLを出せます。顧客やチームに共有しやすいです。
独自ドメイン
独自ドメインをVercelに設定できます。DNS設定はドメイン会社側とVercel側の案内に従って進めます。
環境変数
APIキーなど、コードに直接書きたくない値をVercelの環境変数に登録できます。
よくあるエラーと対処法
ビルドで失敗する
まずローカルで npm run build が通るか確認します。ローカルで失敗するなら、Vercelでも失敗します。
画像が表示されない
画像パス、大文字小文字、publicフォルダの置き場所、相対パスを確認してください。
環境変数が足りない
VercelのProject SettingsでEnvironment Variablesを確認します。
実務での使い方
LP、講座ページ、AI診断ページ、予約導線、ブログ、資料ページなど、公開URLが必要なものに使えます。Claude CodeやCodexで作り、GitHubへ置き、Vercelで公開する流れができると、Web制作のスピードはかなり上がります。
あわせて読みたい記事
まとめ GitHubとVercelで公開まで進める
GitHubとVercelを使うと、サイト公開はかなり簡単になります。まずは小さなサイトを1つ公開してください。公開までの流れを一度体験すると、AIで作ったページを仕事に使う感覚がかなりつかめます。
よくある質問
GitHubとVercelは無料で使えますか？
無料で始められる範囲があります。料金や制限は変わる可能性があるため、最新情報は公式ページで確認してください。
プログラミング初心者でも使えますか？
使えます。最初はGitHub DesktopやVercelの画面操作から始めても大丈夫です。
独自ドメインは必須ですか？
必須ではありません。最初はVercelのURLで公開し、必要になったら独自ドメインを設定すればOKです。
AIで作ったサイトを公開まで進めます
GitHub、Vercel、独自ドメインで止まっている人は、公式LINEから相談してください。