ブログ一覧へ

GitHub + Vercelでサイトを公開する方法

この記事は「WebデザイナーがAIに食われてみた」の関連記事です。

はじめに

「サイトを作ったけど、どうやって公開するの？」

従来は、レンタルサーバーを借りて、FTPでファイルをアップロードして、ドメインを設定して…という手順が必要でした。

GitHub + Vercelを使えば、この流れが大幅にシンプルになります。

全体の流れ

コードを書く → GitHubにpush → Vercelが自動でビルド → サイト公開

一度設定すれば、あとは「コードを書いてGitHubにpushするだけ」で、サイトが自動的に更新されます。

GitHubとは

ひとことで

「コードのバージョン管理と共有ができるサービス」です。

もう少し詳しく

GoogleドライブやiCloudのようなものですが、コードに特化しています。最大の特徴は バージョン管理。「誰が・いつ・何を変更したか」の履歴が全て残ります。

バージョン管理がないと

  • ファイルを上書きしてしまったら戻せない
  • 「昨日まで動いていたのに…」の原因がわからない
  • index_最終版.html、index_最終版2.html、index_マジの最終版.html…

バージョン管理があると

  • いつでも過去の状態に戻せる
  • 変更の差分を確認できる
  • 複数人で同時に作業しても衝突を管理できる

Git と GitHub の違い

  • Git ＝ バージョン管理の仕組み（ソフトウェア）
  • GitHub ＝ Gitを使ってコードを共有するWebサービス

Gitはローカル（自分のPC）で動くツールで、GitHubはそのデータをクラウドに保存・共有するためのサービスです。

基本的な使い方

# 変更をステージング（記録する準備）
git add -A

# 変更を記録
git commit -m "ヘッダーのデザインを修正"

# GitHubにアップロード
git push

最初は覚えることが多く感じますが、よく使うコマンドは上の3つです。

Vercelとは

ひとことで

「GitHubと連携して、自動でサイトを公開してくれるホスティングサービス」です。

従来のホスティングとの違い

従来Vercel
ファイルのアップロードFTPで手動GitHub pushで自動
SSL証明書（https）自分で設定自動
ビルド自分で実行自動
独自ドメインDNS設定が必要管理画面で簡単に設定
料金月額500〜1,000円〜Hobbyプラン（非商用）は無料。商用はProプラン $20/月〜

Next.jsとの相性

VercelはNext.jsを作っている会社のサービスです。そのため、Next.jsのあらゆる機能（サーバーコンポーネント、API Routes、画像最適化など）が追加設定なしで動きます。

セットアップ手順

1. GitHubアカウントの作成

github.com でアカウントを作成します。無料プランで十分です。

2. リポジトリの作成

GitHubにログインして「New repository」をクリック。リポジトリ名（例: my-site）を入力して作成します。

3. ローカルのコードをGitHubにpush

# Gitの初期化（最初の1回だけ）
git init

# リモートリポジトリを登録
git remote add origin https://github.com/あなたのユーザー名/my-site.git

# コードをpush
git add -A
git commit -m "初回コミット"
git push -u origin main

4. Vercelアカウントの作成

vercel.com でアカウントを作成します。GitHubアカウントでサインアップするのが簡単です。

5. プロジェクトのインポート

Vercelのダッシュボードで「Import Project」→ GitHubのリポジトリを選択 → 「Deploy」をクリック。

これだけで、サイトが公開されます。https://your-project.vercel.app のようなURLが自動的に割り当てられます。

6. 独自ドメインの設定（任意）

Vercelの管理画面でドメインを追加し、ドメインのDNS設定でVercelのネームサーバーを指定します。SSL証明書は自動的に発行されます。

環境変数の設定

APIキーなどの秘密情報は、環境変数としてVercelの管理画面で設定します。

Vercelダッシュボード → Settings → Environment Variables
変数名用途
RESEND_API_KEYメール送信用
NEXT_PUBLIC_SANITY_PROJECT_IDSanityのプロジェクトID
NEXT_PUBLIC_SANITY_DATASETSanityのデータセット名
SANITY_TOKENSanityのAPIトークン
CONTACT_EMAILお問い合わせ通知先メールアドレス

ローカル開発では .env.local ファイルに同じ変数を設定します。このファイルは .gitignore に含まれているので、GitHubにアップロードされません（秘密情報の漏洩を防ぐため）。

自動デプロイの仕組み

一度セットアップすれば、以降は：

  1. ローカルでコードを修正
  2. git add -A → git commit -m "修正内容" → git push
  3. Vercelが自動的に検知 → ビルド → 公開

通常1〜2分で反映されます。ビルドに失敗した場合は、前のバージョンが維持されるので安心です。

料金プラン

Vercelの料金プラン：

プラン料金用途
Hobby無料非商用の個人プロジェクト
Pro$20/月〜商用サイト、チーム開発

注意: Hobbyプランは非商用限定です。コーポレートサイトや収益が発生するサイトにはProプランが必要です。

Hobbyプランの主な制限：

  • 帯域: 月100GB
  • ビルド時間: 月6,000分
  • サーバーレス関数の実行時間: 月100GB-hours
  • チームメンバー: 1人（個人利用のみ）

個人の学習目的やポートフォリオなら、Hobbyプランで始めて、商用利用する段階でProに移行するのがおすすめです。

まとめ

ステップやること
1GitHubアカウントを作る
2リポジトリを作ってコードをpush
3Vercelアカウントを作る
4GitHubリポジトリをインポート
5環境変数を設定
6独自ドメインを設定（任意）

以降はコードをpushするだけで自動デプロイ。FTPもサーバー管理も不要です。

📖 メインの記事に戻る → WebデザイナーがAIに食われてみた

ブログ一覧へ戻る