EXERCISE 60分

ストーリー

Webページが完成した。でも、まだローカルの自分のPCにしかない。

先
先輩
GitHubにプッシュして公開しないと、先輩も確認できないな

月2で学んだリモートリポジトリの操作を思い出す。

でもその前に、月8で学んだコミット前チェックをやっておこう。

ミッション概要

コミット前チェックを行った後、GitHubにリポジトリをプッシュしてください。

達成条件

  • コミット前チェックリストを確認した
  • GitHubにリポジトリを作成した
  • リモートリポジトリを設定した
  • プッシュが成功した

Part 1: プッシュ前チェック（月8の復習）

タスク 1-1: 現在の状態を確認

cd ~/projects/internal-tools-page

# 状態確認
git status

# コミット履歴確認
git log --oneline

タスク 1-2: コミット前チェックリスト

プッシュする前に、以下の項目を確認してください。

#チェック項目確認方法OK?
1未コミットの変更がないかgit status → “working tree clean”[ ]
2.gitignoreが正しく設定されているかcat .gitignore[ ]
3秘密情報が含まれていないかパスワード、APIキーがないか確認[ ]
4データベースファイルが除外されているかgit ls-files に .db がないこと[ ]
5HTMLがブラウザで正しく表示されるかブラウザで確認[ ]
6コミットメッセージが適切かgit log --oneline[ ]

タスク 1-3: 追跡ファイルの確認

# Gitが追跡しているファイル一覧
git ls-files

期待される出力（dbファイルが含まれていないこと）：

.gitignore
data/.gitkeep
data/create_tables.sql
data/insert_data.sql
data/queries.sql
docs/analysis.md
docs/daily/day1.md
docs/daily/day2.md
docs/daily/.gitkeep
docs/report/.gitkeep
docs/tool_list.txt
docs/url_check.md
index.html
style.css
ヒント: もし .db ファイルが追跡されている場合 
# 追跡から外す（ファイル自体は削除しない）
git rm --cached data/tools.db
git commit -m ".gitignoreに従いDBファイルを追跡から除外"

Part 2: GitHubリポジトリの作成

タスク 2-1: GitHubでリポジトリを作成

方法A: GitHubのWebサイトで作成

  1. https://github.com にアクセスしてログイン
  2. 右上の「+」→「New repository」をクリック
  3. 以下を設定：
    • Repository name: internal-tools-page
    • Description: 社内ツール紹介ページ
    • Public / Private: どちらでもOK
    • Initialize with README: チェックしない（ローカルに既にある）
  4. 「Create repository」をクリック

方法B: gh コマンドで作成

# GitHub CLIがインストールされている場合
gh repo create internal-tools-page --public --description "社内ツール紹介ページ" --source=. --remote=origin
ヒント: gh コマンドがない場合

方法Aの WebサイトでリポジトリをGitHub上に作成してください。 その後、方法Aの手順に従ってリモートリポジトリを設定します。

Part 3: リモートリポジトリの設定とプッシュ

タスク 3-1: リモートリポジトリを設定

# リモートリポジトリを追加（URLは自分のものに置き換え）
git remote add origin https://github.com/あなたのユーザー名/internal-tools-page.git

# リモート設定の確認
git remote -v

期待される出力：

origin  https://github.com/あなたのユーザー名/internal-tools-page.git (fetch)
origin  https://github.com/あなたのユーザー名/internal-tools-page.git (push)
ヒント: SSHで接続する場合 
git remote add origin git@github.com:あなたのユーザー名/internal-tools-page.git

SSH接続の場合は、事前にSSH鍵の設定が必要です。

タスク 3-2: プッシュ

# メインブランチをプッシュ
git push -u origin main
ヒント: ブランチ名が master の場合 
# ブランチ名を確認
git branch

# masterの場合はmainに変更
git branch -M main
git push -u origin main
ヒント: 認証を求められた場合

HTTPS接続の場合:

GitHubのユーザー名とパスワード（またはPersonal Access Token）を入力します。

2021年以降、パスワード認証は使えません。Personal Access Tokenが必要です。

  1. GitHub → Settings → Developer settings → Personal access tokens
  2. 「Generate new token」でトークンを作成
  3. パスワードの代わりにトークンを入力

SSH接続の場合:

SSH鍵のパスフレーズを入力します。

タスク 3-3: プッシュの確認

# プッシュ後の状態確認
git status

期待される出力：

On branch main
Your branch is up to date with 'origin/main'.

nothing to commit, working tree clean

Part 4: GitHubで確認

タスク 4-1: ブラウザで確認

GitHubのリポジトリページを開いて、以下を確認してください。

https://github.com/あなたのユーザー名/internal-tools-page

確認チェックリスト

#チェック項目OK?
1リポジトリが表示される[ ]
2ファイル一覧が正しい[ ]
3.db ファイルが含まれていない[ ]
4コミット履歴が表示される[ ]
5index.html の中身が表示できる[ ]

プッシュのフローまとめ

graph LR
    subgraph Local["ローカル"]
        L1[".gitignore"]
        L2["index.html"]
        L3["style.css"]
        L4["data/\ncreate_*.sql\ninsert_*.sql"]
        L5["tools.db ←（除外）"]
        L6["docs/"]
    end
    subgraph Remote["GitHub"]
        R1[".gitignore"]
        R2["index.html"]
        R3["style.css"]
        R4["data/\ncreate_*.sql\ninsert_*.sql"]
        R6["docs/"]
    end
    Local -- "git push" --> Remote
    style Local fill:#dbeafe,stroke:#2563eb,stroke-width:2px,color:#1e40af
    style Remote fill:#d1fae5,stroke:#059669,stroke-width:2px,color:#065f46
    style L1 fill:#dbeafe,stroke:#2563eb,color:#1e40af
    style L2 fill:#dbeafe,stroke:#2563eb,color:#1e40af
    style L3 fill:#dbeafe,stroke:#2563eb,color:#1e40af
    style L4 fill:#dbeafe,stroke:#2563eb,color:#1e40af
    style L5 fill:#fee2e2,stroke:#dc2626,color:#991b1b
    style L6 fill:#dbeafe,stroke:#2563eb,color:#1e40af
    style R1 fill:#d1fae5,stroke:#059669,color:#065f46
    style R2 fill:#d1fae5,stroke:#059669,color:#065f46
    style R3 fill:#d1fae5,stroke:#059669,color:#065f46
    style R4 fill:#d1fae5,stroke:#059669,color:#065f46
    style R6 fill:#d1fae5,stroke:#059669,color:#065f46

まとめ

操作コマンド
リモート追加git remote add origin URL
リモート確認git remote -v
プッシュgit push -u origin main
状態確認git status
  • プッシュ前チェックを完了した
  • GitHubにリポジトリを作成した
  • リモートリポジトリを設定した
  • プッシュが成功した
  • GitHubでファイルを確認した

次のステップへ

GitHubへの公開が完了しました。先輩も見られる状態になりました。

次のセクションでは、Day 3の日報を書きます。 今日の大きな成果を報告しましょう。

推定所要時間: 60分