はじめに
前回の記事でナビゲーションとフッターを追加し、Webサイトの骨格が完成しました。今回はいよいよそのサイトをインターネットに公開します。使うのは Vercel（ヴェルセル）という無料のホスティングサービスです。GitHubと連携するだけで、コードをプッシュするたびに自動でサイトが更新される仕組みまで整えます。
1. GitHubにコードをアップロードする
1.1 公開までの全体フロー
Vercelを使った公開は「ローカルのファイル → GitHub → Vercel」という3ステップで完了します。一度連携してしまえば、次回以降はコードを保存してGitにプッシュするだけで自動的にサイトが更新されます。
1.2 GitHubアカウントの作成とリポジトリの用意
まだGitHubアカウントを持っていない場合は github.com で無料登録します。登録後、新しいリポジトリ（コードの保管場所）を作成します。
1.github.com にアクセスし、「Sign up」からメールアドレスとユーザー名を登録します。
2.ログイン後、右上の 「＋」→「New repository」をクリックします。
3.Repository name に my-website と入力し、「Public」を選択して「Create repository」をクリックします。
1.3 VS CodeからGitHubにプッシュする
第二弾で学んだGitの知識を活かして、VS Codeのターミナルからコードをアップロードします。VS Codeのメニューから 「ターミナル」→「新しいターミナル」 を開き、以下のコマンドを順番に実行します。
# プロジェクトフォルダに移動（すでにいる場合は不要）
cd my-website
# Gitの初期化（初回のみ）
git init
# 全ファイルをステージング
git add .
# コミット（変更内容にメッセージをつける）
git commit -m “first commit”
# GitHubのリポジトリと紐付け（URLは自分のものに変更）
git remote add origin https://github.com/ユーザー名/my-website.git
# GitHubにアップロード
git push -u origin main
💡 VS CodeのGUI操作でも可能：コマンドに慣れていない場合は、VS Codeの左サイドバーにある「ソース管理」アイコン（分岐マーク）からGUIで同じ操作ができます。変更ファイルの確認・コミットメッセージの入力・プッシュをクリック操作だけで完結できます。
2. VercelでサイトをデプロイしてURLを取得する
2.1 Vercelアカウントの作成とGitHub連携
Vercelは無料プランで十分な機能が使えるホスティングサービスです。GitHubアカウントでそのままログインできるため、別途アカウントを作る手間もありません。
1.vercel.com にアクセスし、「Continue with GitHub」をクリックします。GitHubの認証画面に進むので「Authorize Vercel」で許可します。
2.ダッシュボードが表示されたら 「Add New → Project」をクリックします。
3.先ほど作った my-website リポジトリが一覧に表示されるので「Import」ボタンをクリックします。
4.設定画面が開きますが、静的HTMLサイトの場合は何も変更せずそのまま「Deploy」ボタンを押すだけです。
2.2 デプロイの完了とURLの確認
「Deploy」を押すと自動でビルドが始まります。通常30秒〜1分ほどでデプロイが完了し、インターネット上にサイトが公開されます。
完了画面に表示される https://your-project.vercel.app のURLがあなたのサイトのアドレスです。このURLをブラウザで開くと、世界中からアクセスできる状態になっています。SNSやポートフォリオに貼って共有しましょう。
💡 次回以降の更新は git push だけ：一度Vercelと連携してしまえば、VS Codeでコードを修正して git add . → git commit -m "update" → git push を実行するだけで、自動的にサイトが最新版に更新されます。Vercelのダッシュボードを開く必要すらありません。
3. 公開後の確認と次のステップ
3.1 公開後にチェックすること
デプロイが完了したら、実際のURLを使って以下の項目を確認しておきましょう。ローカルのLive Serverとは異なり、本番環境特有の問題が出ることがあります。
✓ 画像が表示されているか：ファイル名やimages/フォルダのパスが正しいか確認します。大文字・小文字の違いで表示されないことがあります。
✓ スマホ実機で確認する：URLをスマホで開いてレイアウトを確認します。開発者ツールのシミュレーターと実機では見え方が異なる場合があります。
✓ ナビのリンクが動作するか：ハンバーガーメニューの開閉、各リンクのアンカー移動が正しく機能しているか実機で確認します。
✓ ページの読み込み速度：Vercelのダッシュボードには Analytics 機能があります。また Chrome の Lighthouse（開発者ツール内）でパフォーマンスを測定し、スコアを確認してみましょう。
3.2 独自ドメインを設定する（任意）
vercel.app のURLでも十分ですが、yourname.com のような独自ドメインを取得して紐付けることもできます。お名前.comやムームードメインで年間1,000〜2,000円程度で取得でき、Vercelのダッシュボードから数ステップで設定できます。
# Vercel ダッシュボードでの設定手順（コマンド不要）
1. プロジェクト → Settings → Domains
2. 取得したドメインを入力 → Add
3. 表示されるDNSレコード（AレコードまたはCNAME）を
ドメイン管理会社の設定画面に入力
4. 反映まで数分〜数時間待てば完了（HTTPSも自動で設定される）
💡 HTTPS（SSL）はVercelが自動で設定：独自ドメインを設定した場合も、VercelはHTTPSを自動で有効にしてくれます。鍵マーク付きの安全なURLになるため、ユーザーに安心感を与えられます。手動での証明書取得・更新は一切不要です。
まとめ ─ 全6回シリーズ完結！
今回はVercelを使ったデプロイを解説しました。今回のポイントをまとめると：
- 「ローカル → GitHub → Vercel」の3ステップでサイトが公開できる
- GitHubアカウントでVercelにログインするだけで連携完了
- 静的サイトはデプロイ設定不要、「Import → Deploy」の2クリックで公開できる
- 次回以降は
git pushだけで自動的に本番サイトが更新される - 独自ドメインやHTTPS設定もVercelダッシュボードから数ステップで完了する
第1弾から始まったこのシリーズ、お疲れ様でした！プログラミングの基礎学習から始まり、VS Code環境構築・素材の準備・レイアウト実装・ナビとフッターの追加、そして今回のVercel公開まで、本格的なWebサイト制作の一連の流れをすべて体験できました。次のステップとしては、フォームの追加・アニメーションの強化・CSSフレームワークの導入など、さらなる発展にぜひ挑戦してみてください！
コメント