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

この記事について

タイトルの通りGitHubとCircleCIのアカウント作成から連携までを説明していきます。

上記2サービスの連携を最短距離で進めることがゴールなので、各サービスなど細かい箇所については言及しません。
また、初心者向けに書いているため、既に知見のある方は読み流して頂き、間違いがあればご指摘いただけると喜びます。

※アカウントを既に持っているなど対応が不要な項目は読み飛ばしていただければと思います。

GitHub アカウント作成

1. GitHubのページにアクセスします

2. 今回はアカウント作成を行うので画面右上のSign upを押下してください

1. ユーザー名 / メールアドレス / パスワードを入力し、Verify your accountのパズルを解いたら、Select a plan を押下します
   

2. individualを選択し、Choose Freeを押下します
   

3. この画面は下部のSkip this stepを押下します
   

4. この画面が表示されたら登録したメールアドレスにメールが届いているので、開封してVerify email addressを押下します

1. Repository name(好きな名前でokです)、Publicを選択し、Create repositoryを押下します

1. この画面が表示されたらGitHubアカウントとリポジトリの作成が完了です

CircleCI アカウント作成

1. CircleCIのページにアクセスし、Sign up With GitHubを押下します

1. GitHubに登録したユーザー名 or メールアドレスとパスワードを入力して、Sign inを押下します

1. この画面は何もせずAuthorize circleciを押下でOKです

1. リダイレクト画面が表示された後、以下の画面が表示されたらCircleCIのアカウント作成は完了です

GitHubのリポジトリとCircleCIの連携

CircleCI アカウント作成の手順4から始めます
万が一CircleCIからログアウトしてしまっても、再度CircleCIにログインすれば、以下の手順2から再開することができます

1. 画面右上のGo to Appを押下します

1. 先ほど作成したGitHubのアカウントが表示されるので選択します

1. 先ほどGitHubで作成したリポジトリが表示されているので、リポジトリ名の横のSet Up Projectを押下します

1. そのままStart Buildingを押下します

1. この時点では.circleci/config.ymlが無いので準備します
   Download config.ymlを押下してyamlをダウンロードしてください

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

.
├── .circleci
│   └── config.yml

1. CircleCIの画面に戻り、Start Buildingを押下してください

1. この画面は右上の×マークを押下してもらえれば大丈夫です

1. この画面が表示されたら連携は完了です。お疲れ様でした！

リンク集

GitHub ログイン
CircleCI ログイン
CircleCI 公式ドキュメント

最後に

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

自動化はいいぞ