【備忘録】Githubリポジトリに自分のソースをアップロードしたい

#目的
VSCodeからGithub（リモート）リポジトリにソースをアップロードできるようにする。

本来方法は２つあります。
1.VSCodeからGithub（リモート）リポジトリにソースをアップロード
2.ターミナルからLinuxコマンドでGithub（リモート）リポジトリにソースをアップロード

違いはVSCodeで視覚的に簡単に実行するか、黒い画面を使ってコマンドで実行するかの違いだけです。
初心者には難しいと思われるので、最初はVSCodeを使って学習することをおすすめします。

その後に以下のサイトから黒い画面を使ったGitとGithubの勉強をおすすめします！
https://qiita.com/moonbass630/items/383fc8300a83784e4c82

#流れ
・コードエディタとしてVSCodeをダウンロードする。（※VSCodeはGithubと連携されており、とても便利なので、そこからアップロードできるようにする。）

・Githubのアカウントを作成する。（※ただのアカウント作成なので省略）

・Gitをインストールする。

・実際に自分で書いたソースコードをアップロードしてみる。

#VSCodeをダウンロードする
まず以下のサイトからVSCodeをダウンロードしましょう。
https://code.visualstudio.com/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/9f21f717-5a0f-62ff-840a-b5fd45841bb1.png)

ここの画面まで来たらOK。
![スクリーンショット 2020-05-12 午前10.22.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/6c3d39f5-516f-9b30-881d-4c394cc81c9a.png)

#Githubのアカウントを作成する
以下のサイトからGithubアカウントを作成しましょう。
https://github.com/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/cdcf0d12-8e9c-b15e-1288-f0213a274c50.png)

アカウント作成したらこのような画面が確認できると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/1530bfca-9dae-f83f-fd74-c41b02ee9ae6.png)

#Gitをインストールする
インストールする前に既にGitが入っているかどうか以下のコマンドで確認しましょう。

```
git --version
```

もし「"git"コマンドを実行するには〜」のダイアログが出た場合、「インストール」をクリックし、「Command Line Tools」をインストールしましょう。

再度、以下のコマンドで確認すると、バージョンの情報が返ってくればインストール完了！

```
$ git --version

//以下の内容が返ってくる
$ git version 2.24.2 (Apple Git-127)
```

#Gitの初期設定
以下のようにGitで使用する「ユーザー名」と「メールアドレス」を設定します。

```
$ git config --global user.name "Mitsuki"
$ git config --global user.email XXXXXX@gmail.com
```

そして以下のコマンドできちんと設定できているか確認できたらOK！

```
$ git config --list

//以下の内容が返ってくる
credential.helper=osxkeychain
user.name=Mitsuki
user.email=XXXXXX@gmail.com
```

#ローカルのリポジトリを作成する
今回はローカルでtestフォルダを作成し、test.htmlを作成して、リポジトリに入れたいと思います。（今隠しファイルで".vscode"がございますが気にしないでください。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/9b6bdb87-0b48-2470-1a74-b90720d0d7b0.png)

ターミナルからtest.htmlがあるフォルダ配下まで行ってください。
そこで以下のコマンドを実行してください。

```
$ git init 

//以下のようなメッセージが返って来るはず。
Initialized empty Git repository in /Users/mac/Desktop/test/.git/
```

次に実際にリポジトリができているか確認しましょう。
もしリポジトリができていれば、以下のように.gitという隠しファイルができているはずです。
Macの場合、「command + shift + .」で隠しファイルを確認することができます。
この.gitの隠しファイルがあれば、「このフォルダのこの階層はGitの管理下になっている」ことを表します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/cf473e39-c56d-334c-4e99-2c038fa2604a.png)


#リモートリポジトリを作成する
Githubにログインし、リモートリポジトリを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/b35f5723-3b3d-387e-ae36-5e729c73e21f.png)

「New」ボタンをクリックすると以下の画面が表示されるので、
好きな名前をリポジトリに付けてください。
その後に「Create repository」をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/1ab78675-8647-e02c-11f0-01b7a5412889.png)

以下の画面が表示されればOKです！
「HTTP」タブの横にあるURLをコピーしておいてください。後から使います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/8f332270-6baa-4d61-6b61-862529a01800.png)

先ほど作成したローカルリポジトリのフォルダまでターミナルで移動してください。
以下のコマンドを実行し、リモートリポジトリを作成します。
「追加したいリポジトリ」に先ほどコピーしたURLを貼り付けて実行してみてください。

```
$ git remote add origin 追加したいリポジトリ
```

#Github（リモート）リポジトリにアップロードしてみよう！
まだ、ローカルリポジトリは作成できただけで、中身には何も入っておりません。
作成した「test.html」を入れてあげましょう。
※テラタームからでも可能ですが、今回はVSCodeを使用します。
VSCodeから「test.html」を開いてください。
すると「U」という文字が見えると思います。これは「追跡対象外(Untracked)」という意味で初めてのコミット前のファイルを意味します。今回は「test.html」ファイルのみをアップロードしたいのですが、現状他のファイルにも「U」がついているので対象外にしたいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/188b451e-a6c4-501b-275b-7258381b1c9a.png)

「.gitignore」ファイルを同じフォルダに作成し、アップロード対象から外したいフォルダとファイルを記載してみましょう。
以下のように「U」という文字が消えていればOKです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/4d1f7bc6-6ba4-1ff7-fe2e-64c3e10b6409.png)

（※Mac特有の「.DS_Store」という隠しファイルもあったので、これも.gitignoreに記載して対象外にしました。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/1d60eaab-ee95-78bc-2b17-686191a74d1b.png)

左側にある、Gitのマークをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/dab83619-ed29-7117-df8a-b375bef5661d.png)

そしてファイル名の横にある「＋」マークをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/28ed7dcf-056d-e522-bbf2-f01c525b2c20.png)

次に上の方にある「✅チェック」マークをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/70e83c67-6a72-be5d-2f8c-d4728ee66e7a.png)


するとメッセージを記載するフォームが出てくるので、記載しましょう。
今回は初めてのアップロードになるので。「First Commit」とでもしておき、「Enterキー」をクリック。
次に点が三つのマークが上の方にあるので、それをクリックし、「Push」を選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/c7d04177-eab6-8cc4-4d09-7d2412e15333.png)

これで完了です！

#最後にGithubでアップロードできているか確認
「test.html」がありますね！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/48e5edac-32ab-7da1-ab4a-b2f4f5e381fd.png)

中身も確認できます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/d203f2a4-1dd3-3f6e-7303-637b19315b62.png)

以上！お疲れ様でした！