【備忘録】CLI操作にてアプリケーションファイルをGitHubへ上げる方法

# 概要
- 普段は「GitHub Desktop」からGitHubを使用している為、CLI操作でのGitHubの操作も行なってみたく方法を調べたので、備忘録としてまとめます。

# 前提
- Mac Os
- GitHubに上げたいアプリケーションの雛形が作成されている。
- GitHubのアカウント登録が完了している。
- Gitがインストール出来ているかを確認する。
       - ターミナルにて `git --version `のコマンドを実行し`git version 2.24.3`のようにGitのバージョンが出力されればGitがインストールされている。
       - バージョンが出力されない場合はgitの公式サイト( https://git-scm.com/ )などよりダウンロードして下さい。

# GitとGitHubについて簡単に
- Git
       - ソースコードのファイルやフォルダの変更点を記録したり、追跡する為のバージョン管理システム。(変更履歴を記録する仕組み)
       - アプリケーションを作成している際に修正点が見つかり作り直す必要が出てきた際に現状をある段階に戻したくなった際にGitにてアプリケーションを管理していると状態を簡単に戻せます。

- GitHub
    - Gitの仕組みを用いて簡単に複数人での開発が行えるようにしてくれるツール。
    - ソースコードの公開機能もあり、自分の成果物を公開するだけでなく他の方の成果物や開発コードを見ることが出来ます。

# CLI操作にてアプリケーションファイルをGitHubへ上げる方法
<b>1. GitHubにアクセスしでリポジトリ作成画面へ移動する</b>
GitHubでログインを行い、「New」ボタンを押してリポジトリ作成画面へ移ります。
![スクリーンショット 2020-12-07 19.38.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/899423/107ec653-01c1-04fe-5fa5-260c10e4b11a.png)
<br>
<b>2. 必要項目を入力しリポジトリを作成する</b>
必要項目を入力し「Create repository」ボタンをクリックしリポジトリを作成します。
![スクリーンショット 2020-12-07 20.19.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/899423/075a3864-a6a9-4abe-abf2-05110c9fb282.png)
<br>
<b>3. リモートリポジトリのアドレスが表示されるので確認する</b>
![スクリーンショット 2020-12-07 20.17.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/899423/3031ac65-684b-60bb-a7d8-9f61d41fcba4.png)
<br>
<b>4.GitHubに上げたいアプリケーションの雛形ファイル内でローカルリポジトリを作成する</b>
　「cd」コマンドを使用しGitHubに上げたいアプリケーションのファイルへ移動する。<br>

```terminal:ターミナル
~ % cd /laravel-practece        # 今回GitHubに上げたい「laravel-practice」のファイルへ移動
laravel-practice %              # 「laravel-practice」のファイルへ移動が完了
``` 
　ローカルリポジトリを作成する。

```terminal:ターミナル
laravel-practice % git init
```
→この「 git init 」コマンドはGitリポジトリを新たに作成するコマンドです。
<br>
<b>5.GitHubに上げたいアプリケーションのファイルをインデックスに追加する</b>
　以下のコマンドにてインデックスにアプリケーションのファイルを追加します。
※インデックスとはリポジトリにコミットする準備をするために変更内容を一時的に保管する場所の事みたいです。

```terminal:ターミナル
laravel-practice % git add -A
```
→ 「 git add ファイル名」コマンドはファイルやディレクトリをインデックスに追加する際に使用するコマンドです。
今回は「 git add 」コマンドの後に「 -A 」という全てのファイルを選択するオプションをつけています。
これでインデックスにファイルの追加が記録されました。
追加されているかどうかの確認はターミナルにて以下のコマンドを実行します。

```terminal:ターミナル
laravel-practice % git status
```
インデックスにファイルの追加が記録されているとターミナルに下記のように出力されます

```terminal:ターミナル
Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
	new file:   .editorconfig
	new file:   .env.example
	new file:   .gitattributes
	new file:   .gitignore
	new file:   .styleci.yml
	new file:   README.md
	new file:   app/Console/Kernel.php
	new file:   app/Exceptions/Handler.php
	new file:   app/Http/Controllers/Controller.php
       ~省略~
```
<br>
<b>6.インデックスに追加されたファイルをローカルリポジトリにコミットする</b>
 　インデックスに追加されたファイルをコミットします。
※コミットとは、ファイルやディレクトリの追加、変更をリポジトリに記録する操作です。
下記のコマンドにてコミットを行います。コミット名は今回「 first commit 」とします。

```terminal:ターミナル
laravel-practice % git commit -m "first commit"
```
→実行すると下記のような出力がされます。

```terminal：ターミナル
[master (root-commit) 971b842] first commit
 83 files changed, 10050 insertions(+)
 create mode 100644 .editorconfig
 create mode 100644 .env.example
　　　　~省略~
```
<br>
<b>7.メインブランチを作成する</b>
  下記のコマンドにてメインブランチを作成します

```terminal:ターミナル
laravel-practice % git branch -M main
```
これで現在作業している場所が「 main 」ブランチとなりました。
→「 branch 」のオプションとして今回「 -M 」を付け、その後にbranch名として「 main 」とし現在チェックアウトしているブランチ名を「 main 」としています。
※「 -M 」が現在チェックアウトしているブランチ名を設定するオプションです。
<br>
<b>8.リモートリポジトリの情報を追加する</b>
　コマンドにてリモートリポジトリの情報を追加します。

```terminal:ターミナル
laravel-practice % git remote add origin https://github.com/(GitHubのアカウント名)/(GitHubで作成したリポジトリ名)
```
→``https://github.com/(GitHubのアカウント名)/(GitHubで作成したリポジトリ名)``の部分はGitHub上に表示されたリモートリポジトリのアドレスになります。
![スクリーンショット 2020-12-10 18.25.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/899423/5b9bc6ab-4854-26cc-740b-f9d2106b1028.png)

今回ターミナルにて実行したのは下記のコマンドです。(これでリモートリポジトリの情報が追加出来ます。)

```terminal:ターミナル
laravel-practice % git remote add origin https://github.com/(GitHubのアカウント名)/laravel-practice.git 
```
<br>
<b>9.ローカルリポジトリをプッシュしリモートリポジトリへ反映させる</b>
　以下のコマンドにて、ローカルリポジトリの変更をGitHub上のリモートリポジトリへ反映させます。

```terminal:ターミナル
laravel-practice % git push origin master
```
→GitHubのユーザー名やパスワードを聞かれた場合は入力して下さい。
これで、GitHubへプッシュしてリモートリポジトリへ反映させる事が出来ました。
<br>
<b>10.GitHubにアクセスし確認する</b>
　GitHubにアクセスし確認して下さい。
![スクリーンショット 2020-12-10 19.21.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/899423/cb244bd0-1157-8abe-45af-d7e991b5b681.png)

このようにGitHubにプッシュ出来ていれば完了です。