GitHubにリモートリポジトリを作成し、ローカルリポジトリをコミットするまでの流れ


開発環境はWindows 10 Pro(64bit)。

今回は、ローカル環境に作成したLaravelをリモートリポジトリへコミットするまでの流れを記事にします。

### ローカルリポジトリを作成
以下の記事を参考にLaravelのプロジェクトを作成。

https://qiita.com/koi-ken/items/9105679cb190c29a8a5d

### リモートリポジトリを作成
1. [GitHub](https://github.com/)へアクセスし、ログインする
:::note info
GitHubにログインする際は、メールアドレスとパスワードを入力した後に、自分の場合は、二要素認証で事前に登録したうえで、スマホアプリのMicrosoft Authenticatorで現在表示されている6桁の数字を入力してログインしました。
:::

2. **New repository**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/3563b820-a56e-7d9c-3f12-884ca1a01217.png)

3. **Repository name**にリポジトリ名を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/0a8ecdbe-9317-d4dc-6500-ea9c04b87352.png)

4. **Desicription**を入力(今回は何も入力せず)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/57e36889-b255-64eb-be7f-68e387ef6f96.png)


5. **Public**か**Private**かを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/52190a16-ecbc-fae1-6808-b2f9d400dc02.png)

6. **Initialize this repository with**の部分を入力(今回は何もせず、デフォルトのまま)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/345e6940-ee6a-d50b-bbdb-7463c4bdf831.png)

7. 右下のボタンをクリックして、完成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/d49aed6a-0eda-55b6-8437-2761fafffb62.png)

### 作成したプロジェクトをリモートリポジトリにプッシュする
1. Gitをパソコンにインストールする

2. プロジェクトのあるディレクトリに移動し、以下のコマンドを1行ずつ入力し、プッシュする
```powershell
git init .
git add -A
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/～.git
```

3.GitHub上に、プッシュするためのアクセストークンの設定するため、画面右上のアイコンをクリックし、**Settings**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/2c6c1b63-a9ba-59a2-1c21-56cd78ed0d82.png)

4.左サイドの一番下の**Developer settings**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/74f536c9-3baa-da75-caea-5d5e0fc05bd0.png)

5.左サイドの**Personal access tokens**の**Fine-grained tokens**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/6718a1ad-2614-4c7b-14d6-4313feb2f193.png)


:::note info
使用する際は、2要素認証を求められることがあるので、コードを入力する必要があります。自分の場合は、GitHubで、2要素認証を設定した際に、Microsoft Authenticatorというスマホのアプリを使用していたので、それを呼び出して、そこに現時点で表示される6桁の数字をスペースなしで入力すると認可されました。
:::

6.右上の**Generate new token**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/4be19f0b-d717-60f4-b5f4-c064a6ded465.png)

7.**Token name**と**Expiration**を入力して、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/6358558b-e2bb-d1b2-5527-408460df9572.png)

8.**Only select repositories**にチェックを入れて、指定のリポジトリを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/4c488ed1-3039-43f0-527c-be900b0fbab8.png)

9.認可したい機能を選択します。今回は、プッシュだけしたいので、**Contents**の項目のみ、**Read and write**にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/3d67712a-e636-4f18-d04c-f01e6fc5949c.png)

10.**Generate token**ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/81c0787d-0e9f-211f-fa78-b1ee785c1795.png)

11.下記に表示されるコードを別の場所にコピーしておいてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/507a4ae0-f2b4-1ac3-8ea1-b9188acded65.png)

12.以下のコマンドを1行ずつ入力し、プッシュする
```powershell
git push -u origin main
```
:::note alert
もし、以前、別のリポジトリでpushしていて、403 のエラーが出現した場合は、以下の記事を参考にしてみてください。自分の場合は、一度、Windowsの資格情報マネージャーを消すとうまくいきました。
:::

https://qiita.com/mtc465/items/c2e8472f797e9f5bbc43

13.ウィンドウが表示されるので、**Token**タブをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/2f26192c-c9d9-7547-82af-37dabab1081e.png)

14.先ほどコピーしたトークンをフォームに貼り付け、**Sign in**ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/9beb542a-7036-1390-ea7c-fb0aa0340f54.png)

15.上記で作成したリモートリポジトリを確認すると、きちんとプッシュされています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2739418/0c04b1d4-0fb0-ae69-6184-6195d4c6919b.png)

**参考になったリンク**

https://dev.classmethod.jp/articles/github-fine-grained-personal-access-tokens/