GitHubとCirclCIのアカウント作成と連携方法【2020/02/16現在】

# この記事について
タイトルの通りGitHubとCircleCIのアカウント作成から連携までを説明していきます。  
  
上記2サービスの連携を最短距離で進めることがゴールなので、各サービスなど細かい箇所については言及しません。
また、初心者向けに書いているため、既に知見のある方は読み流して頂き、間違いがあればご指摘いただけると喜びます。  
  
※アカウントを既に持っているなど対応が不要な項目は読み飛ばしていただければと思います。

# GitHub アカウント作成
1. [GitHub](https://github.com/)のページにアクセスします

2. 今回はアカウント作成を行うので画面右上の`Sign up`を押下してください
<img width="1440" alt="github_create_account_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509451/97a8765b-0163-85b4-692d-4e59810d1549.png">

3. `ユーザー名 / メールアドレス / パスワード`を入力し、`Verify your account`のパズルを解いたら、`Select a plan` を押下します
![github_create_account_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509451/9c18a14b-3aaa-572e-ef56-68afb9914c7b.png)

3. `individual`を選択し、`Choose Free`を押下します
![github_create_account_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509451/02d68a90-cb4f-607b-2fe8-522816588446.png)

4. この画面は下部の`Skip this step`を押下します
![github_create_account_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509451/82ddfc4d-e30a-efd2-eabe-cbf018ce29ee.png)

5. この画面が表示されたら登録したメールアドレスにメールが届いているので、開封して`Verify email address`を押下します
<img width="1436" alt="github_create_account_5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509451/a70694b5-d412-9329-7319-9ad477d603f2.png">

6. `Repository name`(好きな名前でokです)、`Public`を選択し、`Create repository`を押下します
<img width="1440" alt="スクリーンショット 2020-03-07 19.57.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509451/06897f00-deda-1a1d-3501-4b508b27e0d5.png">



7. この画面が表示されたらGitHubアカウントとリポジトリの作成が完了です
<img width="1433" alt="github_create_account_7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509451/ad0e60de-3009-1092-1be1-808b4893adbf.png">


# CircleCI アカウント作成
1. [CircleCI](https://circleci.com/signup/)のページにアクセスし、`Sign up With GitHub`を押下します
<img width="1440" alt="circleci_create_account_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509451/3e2c6255-cf3a-98c5-25f4-af67ecddc222.png">

2. GitHubに登録した`ユーザー名 or メールアドレス`と`パスワード`を入力して、`Sign in`を押下します
<img width="354" alt="circleci_create_account_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509451/2b9b57f5-f223-d230-f660-8abbc93dd9ca.png">

3. この画面は何もせず`Authorize circleci`を押下でOKです
<img width="585" alt="circleci_create_account_3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509451/e637b902-364c-d440-8dbe-1ad7364c9e3e.png">

4. リダイレクト画面が表示された後、以下の画面が表示されたらCircleCIのアカウント作成は完了です
<img width="1440" alt="circleci_create_account_4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509451/99cc2ea0-40c3-3a9b-8981-dcfd78e30d07.png">

# GitHubのリポジトリとCircleCIの連携
CircleCI アカウント作成の手順4から始めます
万が一CircleCIからログアウトしてしまっても、再度CircleCIにログインすれば、以下の手順2から再開することができます  
  
1. 画面右上の`Go to App`を押下します
<img width="1440" alt="github_circleci_corporation_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509451/506e2101-0fad-a1b4-a0d3-3d4887a957b7.png">

2. 先ほど作成したGitHubのアカウントが表示されるので選択します
<img width="1440" alt="github_circleci_corporation_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509451/3886549f-590b-39f9-f827-ba6d647407db.png">

3. 先ほどGitHubで作成したリポジトリが表示されているので、リポジトリ名の横の`Set Up Project`を押下します
<img width="1440" alt="github_circleci_corporation_3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509451/de277380-401d-bbd0-35c9-424ac5c1a7bc.png">

4. そのまま`Start Building`を押下します
<img width="1440" alt="github_circleci_corporation_4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509451/2f29d0d1-8374-cfa2-10dd-0931ef74211e.png">

5. この時点では`.circleci/config.yml`が無いので準備します
`Download config.yml`を押下してyamlをダウンロードしてください
<img width="1440" alt="github_circleci_corporation_5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509451/25093ec3-7c16-cc49-0099-efe89e69a939.png">

6. ダウンロードしたyamlファイルを以下の構成になるように配置して、masterブランチでcommitしてGitHubにpushしてください
```
.
├── .circleci
│   └── config.yml
```

7. CircleCIの画面に戻り、`Start Building`を押下してください
<img width="1440" alt="github_circleci_corporation_6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509451/97891c9e-ebb7-7eea-b271-79428046e26a.png">

8. この画面は右上の×マークを押下してもらえれば大丈夫です
<img width="1440" alt="github_circleci_corporation_7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509451/8e28b83e-664d-d959-9efd-194a9f359fb7.png">

9. この画面が表示されたら連携は完了です。お疲れ様でした！
<img width="1440" alt="github_circleci_corporation_8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509451/985b4fc1-f3f4-7aa3-c6c1-ef110897bdd9.png">

# リンク集
[GitHub ログイン](https://github.com/)
[CircleCI ログイン](https://circleci.com/vcs-authorize/)
[CircleCI 公式ドキュメント](https://circleci.com/docs/ja/)
[](https://qiita.com/normalsalt/items/f200ba50363ebfd46df0)

# 最後に
初のQiita記事なこともあり手探りで書いたため分かりにくい箇所もあるかと思いますが、
この記事をきっかけにCI/CDに興味を持っていただける人が増えると嬉しいです。
>自動化はいいぞ