4-2 サイトを GitHub にアップロードする

このレッスンで身につくこと

前のレッスンで GitHub Pages を選びました。ここから先は 自分のサイトのファイルをインターネット上の置き場所に上げる 作業に入ります。その置き場所が GitHub で、ファイルを送り込む手段が Git です。

所要時間 — 約 20 分（GitHub の登録に時間がかかる人で 30 分） 難易度 — ★★☆☆☆（コマンドは Claude Code が打ってくれます）

Git とは何か — タイムマシンと共同作業ノート

Git はファイルの 変更履歴を残してくれる仕組み です。一言でいうと、ファイル版のタイムマシン です。

[今日の home.html] ── 編集 ──▶ [明日の home.html]
       ▲                          │
       └────── git で戻れる ──────┘

普通にファイルを編集すると、上書き保存した瞬間に 前のバージョンは消えてしまいます。Git はその「前の状態」を全部記録しておいてくれるので、「あれ、昨日の文章のほうが良かったな」と思ったら いつでも戻せます。

もう 1 つ大事な役割は 複数人で同じファイルを編集しても衝突しない ように整理してくれることです。会社で 3 人がメールで index.html をやり取りすると、すぐに「最新版がどれか分からない」状態になります。Git があれば、それぞれの変更を 自動でマージ してくれます。

このコースでは一人で作業するので「タイムマシン」のほうがメイン用途です。将来チームで作る時にも同じ仕組みがそのまま使える、と覚えておくと便利です。

GitHub とは — Git の置き場所

Git は 自分の PC の中だけで 動く道具です。それだと「他の人に見せられない」「PC が壊れたら全部消える」という弱点があります。

そこで登場するのが GitHub です。GitHub は Git で管理しているプロジェクト（リポジトリ）を インターネット上に保管してくれるサービス です。

[あなたの PC]                  [GitHub]
 my-website/  ── push ──▶  github.com/you/my-website
              ◀── pull ──

GitHub に上げておけば次のメリットがあります。

• PC が壊れても 別の PC で続きから作業できる
• 友人やチームに URL 1 本で見せられる
• GitHub Pages でそのまま Web サイトとして公開できる（次のレッスン）

「Git＝仕組み」「GitHub＝その仕組みを使った Web サービス」と覚えると混乱しません。Email と Gmail の関係 と同じです。

GitHub アカウントの作成

ブラウザで https://github.com を開いて右上の 「Sign up」。メールアドレス、パスワード（15 文字以上推奨）、ユーザー名 を入力します。ユーザー名は URL の一部に表示される ので慎重に選びます。公開するサイトの URL は https://taro-cafe.github.io/cafe-blue-website/ のような形になります。

メール認証コード（8 桁）を入力して仮登録を済ませたら、二段階認証は絶対に設定 してください。Settings → Password and authentication から Enable、スマホで Google Authenticator か 1Password の QR を読み込んで 6 桁を入力します。recovery codes は必ずパスワードマネージャに保存。

Git のインストール確認

Mac には Git が 標準でほぼ入っています。ターミナルで確認しましょう。

git --version
# git version 2.x.x が表示されれば OK

「Xcode Command Line Tools をインストールしますか？」というダイアログが出たら、Install をクリックして 3〜5 分待ちます。

Windows は Git が 標準で入っていません。https://git-scm.com/download/win から Git for Windows をダウンロードして、すべてデフォルトのまま Next でインストール。完了後、コマンドプロンプトを開き直して git --version で確認します。

Git の初期設定

最初に 1 回だけ、自分の名前とメールアドレス を Git に教えます。これがコミットの「作者」として記録されます。

git config --global user.name "Taro Sato"
git config --global user.email "taro@example.com"

メールアドレスは GitHub に登録したものと同じ にしてください。

リポジトリを作る — Public か Private か

GitHub 右上の 「+」 → 「New repository」 から作成。入力項目は次のとおりです。

GitHub Pages 無料プランは Public リポジトリでしか使えない ので、Public 一択です。「ソースコードを誰でも見られる」のは、パスワードや API キーを入れなければ 問題ありません。Bootstrap も React も Tailwind も、世界の有名サイトのソースはほぼ Public です。

「Create repository」 をクリックすると空のリポジトリが完成します。URL は https://github.com/あなたのユーザー名/cafe-blue-website です。

Personal Access Token を作る

ローカルと GitHub をつなぐ方式は HTTPS と SSH の 2 つありますが、このコースでは HTTPS で進めます。HTTPS で push する時、パスワードの代わりに使うトークン を発行します。

1. GitHub 右上アイコン → Settings → 左メニュー一番下の Developer settings
2. Personal access tokens → Tokens (classic)
3. Generate new token (classic) をクリック
4. Note に「My Mac for cafe-blue」、Expiration は 90 days、Scopes は ==repo== にチェック
5. Generate token

ghp_xxxxxxxxxxxxxxxxxxxx のようなトークンが表示されます。ここでしか表示されない ので、必ずパスワードマネージャに保存してください。

初回 push — 7 ステップ

ここからが本番です。ローカルのサイトを GitHub に送り込みます。Claude Code に頼めば全部やってくれる ので、まずは手順の意味を理解しましょう。

<Steps items={[{"title":"ターミナルでサイトのフォルダに入る","body":"cd ~/Documents/cafe-blue-website のように、index.html がある場所に移動します。Windows なら cd C:\\Users\\YourName\\Documents\\cafe-blue-website。"},{"title":"Git で管理を開始する（git init）","body":"git init を実行。これで現在のフォルダが Git リポジトリに変わります。隠しフォルダ .git ができますが、触らないでください。"},{"title":"アップロード対象のファイルを選ぶ（git add）","body":"git add . で「このフォルダの全部のファイル」を対象にします。. はカレントディレクトリ（今いる場所）を意味します。"},{"title":"コミットを作る（git commit）","body":"git commit -m \"initial commit\" で、選んだファイル群に「初回アップロード」というラベルを付けて記録します。-m の後がコミットメッセージです。"},{"title":"リモート（GitHub）の住所を登録する（git remote add）","body":"git remote add origin https://github.com/あなたのユーザー名/cafe-blue-website.git で、GitHub 上のリポジトリと結びつけます。origin は「メインのリモート」を意味する慣習名です。"},{"title":"メインブランチの名前を main にする","body":"git branch -M main で、デフォルトブランチ名を main に統一します。古い Git では master という名前でしたが、現在は main が標準です。"},{"title":"GitHub にアップロード（git push）","body":"git push -u origin main で送信。初回はユーザー名とパスワードを聞かれます。パスワード欄には さきほど作った Personal Access Token を貼り付けてください。"},{"title":"ブラウザで確認","body":"https://github.com/あなたのユーザー名/cafe-blue-website を開いて、index.html などのファイルが表示されていれば成功です。"}]} />

Claude Code に全部任せる

7 ステップを全部覚える必要はありません。Claude Code に日本語で頼むだけ で、git init から .gitignore 生成、git add commit remote add push まで自動で進めてくれます。

> このプロジェクトを Git で管理して、
> GitHub にアップロードして。
> リポジトリ名は cafe-blue-website で、
> 私のユーザー名は taro-cafe です。

途中で「認証情報を入力してください」と聞かれるので、ユーザー名と Personal Access Token を貼り付ければ完了です。

コミットメッセージの書き方

git commit -m "..." の -m の後ろに書く文章を コミットメッセージ といいます。後から履歴を見た時に「何を変えたか分かる」 ように書くのがコツです。

良い例と悪い例を並べます。

良い例: add menu page / fix typo in about page / update phone number
悪い例: update / fix / asdf / ファイル更新

「update」だけだと、3 ヶ月後に見返した時に 何の update か全く分かりません。Claude Code に書かせれば自動で良い感じのメッセージにしてくれるので、それを真似する と上達が早いです。

.gitignore — アップロードしてはいけないもの

.gitignore という名前のファイルをプロジェクトのトップに置くと、そこに書いたファイルやフォルダは Git の管理から外せます。Web サイト制作で最低限書いておきたい内容は次のとおりです。

# 依存パッケージ（容量が大きく、再生成可能）
node_modules/

# 秘密情報（API キー等）
.env
.env.local
*.env

# OS が勝手に作るファイル
.DS_Store
Thumbs.db

# エディタの一時ファイル
.vscode/
.idea/

# ビルド成果物（公開時は別途設定）
dist/
build/
.cache/

特に重要な 2 つ は次のとおりです。

1. ==.env — API キーや DB パスワードを書くファイル。絶対にコミットしない==
2. ==node_modules/ — npm でインストールしたパッケージ。容量が数百 MB になることもあり、Git に上げると重い==

.gitignore も Claude Code に頼めば作ってくれます。

> Web サイト用の .gitignore を作って

これだけで、上のような内容を自動で書き出してくれます。

よくあるエラーと対処

エラー① push が拒否される（rejected）

! [rejected]        main -> main (fetch first)
error: failed to push some refs to '...'

原因 — GitHub 側に、ローカルにない変更がある（README を最初に作ってしまった等）。

解決 — git pull origin main --rebase で GitHub 側の変更を取り込んでから、もう一度 git push。Claude Code に「push が rejected されたので解決して」と頼むのが一番速いです。

エラー② 認証失敗（Authentication failed）

remote: Support for password authentication was removed on August 13, 2021.
fatal: Authentication failed

原因 — GitHub のパスワードをそのまま入力した。GitHub は パスワード認証を廃止 しているので、Personal Access Token を入れる必要があります。

解決 — もう一度 push して、パスワード欄に ghp_xxxxxx... で始まる Personal Access Token を貼り付けます。

エラー③ ファイルサイズが大きすぎる

原因 — 動画や RAW 画像など 100 MB を超えるファイル をコミットした。

解決 — そのファイルを .gitignore に追加し、git rm --cached 大きいファイル名 で除外。動画は YouTube に上げて埋め込む ほうがサイトも軽くなります。

エラー④ API キーをコミットしてしまった

解決 — まず Anthropic Console / GitHub Settings でキーを失効（revoke）。これが最優先です。その上で .gitignore に .env を追加し、git rm --cached .env で履歴から外します。完全に履歴から消したい場合は Claude Code に「==.env を Git 履歴から完全に削除して==」と頼むと安全に処理してくれます。

2 回目以降の更新は 3 行

最後にメンタルモデルを整理しておきます。

[PC: cafe-blue-website/]  ── git push ──▶  [GitHub] ── Pages 機能 ──▶  [公開 URL]

自分の PC で編集 → コミット → push の 3 ステップを繰り返すのが、Web サイト運用の基本リズムです。2 回目以降の更新は 3 行で済みます。

git add .
git commit -m "update menu price"
git push

Claude Code に「今の変更を GitHub に上げて」と頼めば、この 3 行も自動で実行してくれます。

まとめ

このレッスンで押さえてほしいことを 6 つ並べます。

1. Git は変更履歴のタイムマシン、GitHub はその置き場所。混同しないこと
2. GitHub アカウントは 二段階認証 + recovery codes 保存 まで必ずやる
3. Web サイト公開用のリポジトリは Public で作る（GitHub Pages 無料プランの条件）
4. HTTPS で push する時のパスワードは Personal Access Token。GitHub のパスワードは使えない
5. ==.gitignore== で .env と node_modules/ を必ず除外する
6. Claude Code に 「GitHub にアップロードして」 と頼めば、初回の 7 ステップも 2 回目以降の 3 ステップも全部やってくれる

<Checklist items={["GitHub アカウントを作って二段階認証を有効化した","recovery codes をパスワードマネージャに保存した","git --version でバージョンが表示される","Personal Access Token を発行してパスワードマネージャに保存した","cafe-blue-website リポジトリ（Public）を作成した",".gitignore を作って .env と node_modules/ を除外した","git push に成功して GitHub のページに index.html が表示された"]} />

<Quiz question="Git と GitHub の関係として最も正しいものは？" options={["Git も GitHub も同じ会社が作った同じツール","Git は変更履歴を管理する仕組み、GitHub はその仕組みを使った Web サービス","GitHub は Git の有料版で、無料では使えない"]} answer={1} />

<Quiz question="GitHub Pages 無料プランでサイトを公開するために必要なリポジトリ設定は？" options={["Private リポジトリにして招待リンクを発行する","Public リポジトリにする","Private でも Public でも GitHub Pages は無料で使える"]} answer={1} />

次のレッスン 4-3: サイトを公開する では、いま GitHub にアップロードしたリポジトリを GitHub Pages で実際に公開します。数分で URL が発行され、世界中の誰でもサイトを見られる状態になります。