GitHubのアカウントを作成して、リポジトリ作成、クローン、コミット、プッシュまでの手順

GitHub は基本英語ページですので、英語が苦手な方でも使い始められるようガイドしたいと思い、まとめました。

## サインアップでアカウントを作成

GitHub のページを開きます。

https://github.com

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/c8abdd5f-ba17-4800-0f71-95270d4726b9.png)

Username, Email, Password を入力します。
Usernameは GitHub 内で誰も使っていない名前にする必要があります。
Emailは登録確認のメールが来ますので受信できるメールアドレスにしてください。

使用できる内容であれば以下のように緑のチェックマークがつきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/de8d9b8d-f1d7-dd0f-fddb-28a2cfbfde26.png)

入力できれば Sign up for GitHub ボタンを押します。

## アカウント情報の入力

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/b140d1bf-8437-030c-5c8d-1cb2e23eec95.png)

パスワードが簡単なものだと警告が出て再入力となります。
Make sure it's at least 15 characters OR at least 8 characters including a number and a lowercase letter.
とあるので、16文字以上か9文字以上で数字と英小文字を含む

## メール認証

うまく登録出来たら、以下のようなメールが送られてきます。
（見つからない場合は迷惑メールフォルダも確認してください）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/f01825aa-9f69-8c07-ced0-f900e60ddb8a.png)

Verify email address を押すと認証が完了し、以下の画面が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/50c62db0-c034-2bcc-6e46-4cbe4a53b502.png)
左にある Create a repository ボタンを押します。

## リポジトリの作成

Repository name に作成するリポジトリ名を入力します。（使える名前なら緑のチェックが入ります。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/413a5f27-2a61-a8a2-a224-ab5a191af316.png)

Descriptionにはこのリポジトリの説明を入れます。省略可能です。

Public と Private が選択できます。Publicにするとインターネット上のだれでも見れるようになります。Private にすると自分と許可した人のみが見れるようになります。
今回はPublicにします。

Initialize this repository with a README にチェックを入れるとリポジトリ内に README.md ファイルが作成されます。
このファイルの内容はGitHubのリポジトリを開くと表示されるようになっているので、Descriptionでは書ききれない内容や画像などを入れます。
後から手動で追加もできますので、今回はチェックしないで進めます。

Add .gitignore: None のボタンは、gitで管理しないファイルを記述する設定ファイルです。Noneの場合は作成しません。
これも後から使いできるので今回はNoneのままにします。

Add a license: None のボタンは子のリポジトリの内容のライセンスを決めてそのファイルを作成するボタンです。
こちらも後からつかできますので、今回はNoneのままにします。

Create repository ボタンを押すと作成完了です。

## ローカルにクローンする

作成完了すると以下の画面になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/11b81237-a2fc-b0e0-408f-6e16e835bc3b.png)

水色の背景部分にURLがありますが、これを使うとローカルに clone することができます。
その下の ...or create a new repository on the command line はローカルのフォルダ内をリポジトリと結び付けて管理するためのコマンドです。
さらに下の ...or push an existing repository form the command line は既にあるgitリポジトリのpush先に今回作ったリポジトリを設定するためのコマンドです。

これから何かを開発する場合は、`git clone https://github.com/github-japanese-user/first_nuxt.git`とすれば first_nuxt というフォルダ内にクローンされます。

git コマンドが実行できない場合は git をインストールして下さい。

> (Windows に git をインストールする手順)[https://qiita.com/nakazawaken1/items/bbcb4640cf9aceee5745]

今回は、Cドライブ直下に dev フォルダを作成してコマンドを実行しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/7f07541c-27ec-f180-733b-f81b122041ec.png)

## VisualStudioCodeでクローンしたフォルダを開く

クローンしたフォルダを右クリックして VisualStudioCode で開きます。(Codeで開く)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/38255780-3293-f82d-9b42-3e76317d253b.png)

インストールしていない場合は下記を参考にしてください。

> [VisualStudioCodeのインストール手順(Windows)](https://qiita.com/nakazawaken1/items/a9aab1b7e8075b3c5867)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/e79c9711-fd97-d6e4-33f6-5e61e6108cb3.png)
フォルダ内はまだからっぽです。
右下のポップアップは拡張機能の提案ですので×ボタンで消しても問題ありません。

## ファイルを追加する

FIRST_NUXTというフォルダ名の右に出るファイル作成ボタン![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/64120e3b-affc-e400-f46b-3ac53eb93bd2.png)を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/24d7591a-119e-eea6-34a1-b6daa06e2664.png)

ファイル名入力欄が出るので、README.md と入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/43eff80c-ebad-6050-ea19-33adffbe3ecf.png)

確定すると右側でファイルの内容が入力できるので、下記のように入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/0a86676d-9977-11b4-f3ab-f75dff58ce46.png)

```
# 初めてのコミット

GitHubからリポジトリをクローンしてファイルを追加しました。
```

----

文字を入力すると3か所表示が変わります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/f7183ff0-17b7-07d5-c66b-a6e0c4a106e0.png)
ファイル名のタブの右に●がつきます。これは編集中を表しています。保存すると消えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/ec532f08-31f0-029e-9d10-2d1d520ec36a.png)
1つ目と3つ目のアイコンに数字がつきます。上は編集中ファイルの数、下はgit管理対象で変更されたファイルの数となります。

ファイルを保存すると以下の表示にかわります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/2feaf63c-2d55-3c18-2d80-1634919e50c1.png)
編集中ではなくなりましたが、git管理ファイルが変更されているので3つ目のアイコンの数字のみが残ります。

----

## コミットコメントを入力する

ソース管理アイコン![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/fe2ab0c6-7a05-b1c1-4464-11b99c22c61b.png)をクリックします。
入力欄が表示されます。これはコミットコメントを入力する部分になります。
どんな変更したかなどを入力します。
今回はあまり意味はなく変更したので「初コミット」とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/37814859-6822-e8fa-047f-85937bfa8aeb.png)
CHANGESには変更されたファイルが一覧で表示されます。

----

## コミットする

コミットボタン![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/e4276df7-7008-c35d-2221-c9a85a8bbc37.png)を押します。

以下の確認画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/32528a36-f620-662c-250d-a0b39ccb72db.png)
内容は「ステージングされていないファイルをコミットしようとしています、全変更ファイルを直接コミットしてもいいか」という感じです。
ステージというのは変更したうちの一部のファイルをコミットするときに、コミットするファイルを置いておく場所です。
今回は一つのファイルしか変更していなくてそのままコミットしたいので、Yesを選択します。

----

## コミット者の名前とメールアドレスの登録

初めてコミットするときは以下の画面が出ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/454fdb35-8b8c-4115-3aab-2a6cc8b3e1c5.png)
コミットする人の名前とメールアドレスを設定してくださいという意味です。
Cancelボタンを押していったん閉じます。

メニューの Terminal → New Terminal を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/1d7247b1-d037-c84b-7b78-e81bdad083a9.png)

画面下にターミナルが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/df211031-28eb-4a1f-f13b-6bb8e3b4b427.png)

ここで名前とメールアドレスを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/337832fc-a8be-149a-3ffe-f0638ee13a89.png)

以下のようにコマンドを入力し実行します。

```
git config user.name 設定する名前
```

```
git config user.email 設定するメールアドレス
```

※GitHub にプッシュするので、メールアドレスは GitHubに登録したものを指定します。

設定出来たら、再度コミットしてみてください。

コミットが成功すればコメントや一覧が空になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/4d98944e-9b41-bae4-ad4c-a4cd75768435.png)

## pushする

コミットしただけではまだ GitHub には反映されません。

画面左下を見ると上矢印の左に1となっているところがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/deccab7a-5972-d7f2-a2ed-5b9f297eb8da.png)
これは、GitHub に反映されていないファイルが1つあることを表しています。

それでは push してみましょう。

その他コマンドボタン![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/3d4096f8-7843-3e3d-6039-88a6f69e4f70.png)から、
Push を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/31febb0e-3fa5-c032-ea36-95652fe3df72.png)

はじめて GitHub にpushするときはログイン画面が表示されますので、ログインしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/ce9ab81b-a6e8-e04e-a428-8c64c998b50d.png)

ログインが成功するとPushも完了し左下の表示から上向きの矢印が消えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/8544430c-88ce-4f1c-3973-f676f82502a5.png)

## GitHub を確認する

GitHub のリポジトリのページを開くと反映されているのが確認できます。ページを開きっぱなしだった場合はリロードしてみて下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/a179bd4f-f24c-f3c3-1256-b23f5bc517e5.png)