tanaka101

身につくスキル

  • -Git の基本操作（init, add, commit, diff, restore）を実践できる
  • -GitHub にリポジトリを作成してコードを公開できる
  • -ブランチとプルリクエストを使った開発フローを体験する
進捗: 0 / 8

GitHub に公開する

ローカルのリポジトリを GitHub にプッシュして、コードを公開してみましょう。

からへ

ここまでのレッスンで、（自分のPC）に Git リポジトリを作り、コミットを重ねてきました。

このレッスンでは、そのリポジトリを GitHub にアップロード（プッシュ）します。GitHub に公開すると、こんなメリットがあります。

  • バックアップ — PC が壊れてもコードが残る
  • 共有 — 他の人にコードを見せられる
  • チーム開発 — 複数人で同じコードを編集できる（後半のレッスンで体験します）

GitHub でリポジトリを作成する

GitHub にコードを置くには、まず リモートリポジトリ（GitHub 上の保管場所）を作る必要があります。

1. GitHub にログインする

github.com にアクセスしてログインしてください。
アカウントをまだ作成していない場合は作成してください。

2. 新しいリポジトリを作成する

画面右上の + ボタンから New repository をクリックします。

GitHubで新しいリポジトリを作成する画面

リポジトリ名を入力したら後はデフォルトのままでもOKです。

項目設定値
Repository namemy-profile
Description自己紹介ページ（任意）
Public / PrivatePublic（どちらでもOK）
Initialize this repository with:すべてチェックなし

「Add a README file」「Add .gitignore」「Choose a license」はすべてチェックしないでください。

にすでにリポジトリがあるので、ここで初期ファイルを作ると履歴が衝突してしまいます。

Create repository をクリックすると、セットアップ手順が表示されたページに移動します。

リモートリポジトリを登録する

GitHub 上にリポジトリができたので、の Git に「プッシュ先はここだよ」と教えてあげます。

セットアップページに表示されている 「…or push an existing repository from the command line」 の部分を見てください。 ここに必要なコマンドが書かれています。コピーしてそのままで利用できます。

GitHubリポジトリのセットアップページ

を追加する

git remote add origin https://github.com/あなたのユーザー名/my-profile.git

origin というのは、リモートリポジトリに付ける名前です。「origin（起源）」という意味で、メインの先に付ける慣習的な名前です。

登録できたか確認してみましょう。

git remote -v
origin  https://github.com/あなたのユーザー名/my-profile.git (fetch)
origin  https://github.com/あなたのユーザー名/my-profile.git (push)

fetch（取得用）と push（送信用）の2行が表示されれば OK です。

GitHub にプッシュする

プッシュする前に確認！ パブリックリポジトリにプッシュすると、コミットに記録されたメールアドレスが誰でも見られる状態になります。

個人のメールアドレスを公開したくない場合は、ガイドの「メールアドレスを公開したくない場合」を参考に、GitHub の noreply メールを設定してからプッシュしてください。

いよいよのコミットを GitHub に送ります！

git push -u origin main

各部分の意味を分解すると:

部分意味
git pushのコミットをに送る
-u今後 git push だけで同じ場所に送れるよう紐付ける（初回のみ必要）
origin送り先の名
main送るブランチ名

-u（--set-upstream の省略）を付けると、次回以降は git push だけでプッシュできるようになります。

認証を求められたら

初めてプッシュするとき、GitHub の認証を求められます。

ブラウザが開いて GitHub へのログインを促された場合は、画面の指示に従ってログインしてください。 認証が完了すると、プッシュが実行されます。

プッシュの結果を確認する

Enumerating objects: 9, done.
Counting objects: 100% (9/9), done.
Delta compression using up to 8 threads
Compressing objects: 100% (7/7), done.
Writing objects: 100% (9/9), 1.02 KiB | 1.02 MiB/s, done.
Total 9 (delta 1), reused 0 (delta 0)
To https://github.com/あなたのユーザー名/my-profile.git
 * [new branch]      main -> main
branch 'main' set up to track 'origin/main'.

main -> main と表示されていれば成功です。

GitHub で確認する

ブラウザで https://github.com/あなたのユーザー名/my-profile にアクセスしてみましょう。

  • index.html と .gitignore がファイル一覧に表示されている
  • notes.txt は表示されていない（.gitignore で除外したので正しい動作です）
  • コミット履歴が確認できる

自分のコードがインターネット上に公開されました！

プッシュ後のGitHubリポジトリページ

GitHub のリポジトリページでファイル名をクリックすると、中身を見ることができます。index.html をクリックして、と同じ内容になっているか確認してみてください。

変更をプッシュしてみる

今後の開発の流れを体験するために、もう一度 編集 → コミット → プッシュ のサイクルを回してみましょう。

index.html にフッターを追加してみましょう。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自己紹介</title>
</head>
<body>
    <h1>自己紹介</h1>
    <p>名前: あなたの名前</p>
    <h2>プロフィール</h2>
    <ul>
        <li>好きな食べ物: ラーメン</li>
        <li>住んでいるところ: 東京</li>
        <li>ひとこと: よろしくお願いします！</li>
    </ul>
    <footer>
        <p>GitHub で学習中！</p>
    </footer>
</body>
</html>

保存したら、コミットしてプッシュします。

git add index.html
git commit -m "フッターを追加"
git push

初回のプッシュで -u を付けたので、2回目以降は git push だけで OK です。

GitHub のリポジトリページをリロードして、変更が反映されていることを確認しましょう。コミット履歴にも「フッターを追加」が追加されているはずです。

これが 日常の開発サイクル です。

コードを書く→git add→git commit→git push

この流れを繰り返してプロジェクトを進めていきます。

このレッスンのまとめ

ポイント
  • git remote add origin URL でリモートリポジトリを登録する
  • git push -u origin main で初回のプッシュを行う（2回目以降は git push だけでOK）
  • git remote -v での登録状況を確認できる
  • 編集 → add → commit → push が日常の開発サイクル

次のステップ

次のレッスンでは、引き続きこのリポジトリを使って ブランチ を体験します。ブランチを使うと、メインのコードに影響を与えずに新しい機能を開発できます。