jupyterlabとgithubを連携させよう！

# 概要
jupyterlabでは、GitのGUIツールが用意されていて、
GUI操作で staging 〜 push ができます。
そのjupyterlabに、githubを連携させて、
開発をより便利にしたいと、色々調べながら設定を行いました。
本記事はその設定記録です。

# 前提
- OS ： Mac
- jupytelab : version 1.1.4
- 本記事では下記について特別記載はしていません。対応・理解済みの前提で記載しています。
 - ローカルPCへのgitインストール
 - jupyterlabへgitツールのインストール
 - githubへのサインアップ
 - github上でのリポジトリ作成方法

# 手順_概要
1. ssh設定_ローカルPC
2. ssh設定_github
3. リモートリポジトリ作成
4. ローカルリポジトリ作成
5. [CUI]first push
6. パスフレーズ入力の省略化
7. [GUI]second push

# 手順_詳細
## 1. ssh設定_ローカルPC
ターミナルを開き、下記コマンドで「~/.ssh」フォルダに秘密鍵・公開鍵を作成。
下記コマンドで作成される「id_rsa」が秘密鍵で「id_rsa.pub」が公開鍵です。  

```terminal
$ cd .ssh
$ ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/xxx/.ssh/id_rsa): 
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /Users/xxx/.ssh/id_rsa.
Your public key has been saved in /Users/xxx/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:xxxxxxxxxx 
xxx@yyyyyyyy
The key's randomart image is:
SHA256:xxxxxxxxxxxxxxxxxx
+---[RSA 2048]----+
|        xxx  xxx |
+----[SHA256]-----+
$ ls
id_rsa		id_rsa.pub
$ cat id_rsa.pub
ssh-rsa xxxxxxxxxx
```
最後のコマンドで公開鍵「id_rsa.pub」を表示しました。
これは、次の手順で使います。

## 2. ssh設定_github  
  手順1.で作成した公開鍵をgithubに登録する。  

  2-1. githubにログインし、右の上のアイコン(下図)をクリックし、「Settings」をグリック
![2020-05-03 17.29のイメージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618640/8c675ed9-7eec-2c3d-fcdc-6abbc5821e90.jpeg)  

  2-2. 左側の項目群から、「SSH and GPG keys」をクリックし、
       「New SSH Key」(下図)をクリック。
![2020-05-03 17.31のイメージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618640/0636b8c4-e7bd-cec3-5bbf-116fed91826d.jpeg)

  2-3. [Title]を手順1.で作成した公開鍵ファイル「id_rsa.pub」とし、
       [Key]には、その公開鍵ファイルの中身(catコマンドでコピー)を貼り付ける。
       貼り付けたら、「Add SSH Key」をクリック。
![2020-05-03 17.35のイメージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618640/5912bdb7-e255-538d-105a-43a55287314c.jpeg)

## 3. リモートリポジトリ作成
github上でリポジトリを作成。
今回は「test」というリポジトリを作成。
<img width="1059" alt="スクリーンショット 2020-05-03 17.36.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618640/af8e9128-ab5a-2b72-f0b0-a38b32c9748f.png">

次の手順で使用するため、
"SSH用の(リモート)リポジトリURL"をコピーしておく。(下図赤枠)
![2020-05-03 17.39のイメージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618640/bd98fc7f-cd12-1f78-9212-ce361bc95e3c.jpeg)

## 4. ローカルリポジトリ作成
jupyterlabでターミナルを開き、フォルダ「test」を作成し、
ローカルリポジトリとして設定。
コマンド「git remote origin xxx」の xxx に、
前手順でコピーした"SSH用の(リモート)リポジトリURL"を設定する。

```terminal
$ mkdir test
$ cd test
$ git init
Initialized empty Git repository in /Users/xxx/test/.git/
$ git remote add origin "SSH用の(リモート)リポジトリURL"
```

## 5. [CUI]first push
早速GUIでpushしたいところですが、
初めのpush時はpush先を設定(--set-upstream)する必要があるため、
CUIで実行。

```terminal
$ git commit --allow-empty -m 'first commit'
[master (root-commit) xxxxx] first commit
$ git push --set-upstream origin master
```

## 6. パスフレーズ入力の省略化
2回目のpushはGUI操作にするため、前準備として、本対応をする。
(現状ではpush時に都度パスフレーズを入力する形であり、
GUIでpush使用とするとエラーが発生する。)

```terminal
$ eval `ssh-agent`
Agent pid xxxx
$ ssh-add ~/.ssh/id_rsa
Enter passphrase for /Users/xxx/.ssh/id_rsa: 
Identity added: /Users/xxx/.ssh/id_rsa 
```

## 7. [GUI]second push
以上の設定で、GUIでのpushができる。
今回はファイル「test.txt」を作成し、GUIでpushをする。

  7-1. 左ペインにて、カレントフォルダを「test」にする。
       そうすることで、下記のgit操作対象が本リポジトリになる。
![2020-05-03 20.54のイメージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618640/8ea549d6-dbef-010b-edd6-65010471773f.jpeg)

  7-2. ファイル「test.txt」を作成  

```terminal
$ echo > test.txt
```

  7-3. staging
       左ペインにてgitページを開く。[Untracked]にファイル「test.txt」が存在してる。
![2020-05-03 21.06のイメージ 2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618640/523168e2-714d-c5fe-312b-1e418f22e92c.jpeg)
       ファイル左手の「＋」をクリックして、Staged状態にする。(staging)
![2020-05-03 21.07のイメージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618640/ab60aa0a-9aca-cd04-8b5f-666e34f2d6c1.jpeg)

  7-4. commit
       左ペインの下部にて、コメントを入力し、「commit」をクリック。
![2020-05-03 21.08のイメージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618640/5c0448ac-8100-dc7c-596d-64c0f5a0a5f9.jpeg)

  7-５. push
       左ペインの上部にあるpushボタンをクリック。
![2020-05-04 9.28のイメージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618640/827e4aad-6d4e-a10f-0bff-2d24f92a579f.jpeg)
       pushが成功したら、下図のポップアップが表示される。
![2020-05-03 21.13のイメージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618640/ab9ed794-67ad-ef88-271a-f90b827d7697.jpeg)
       以上より、githubでリポジトリを確認すると、想定通り、更新が反映される。
![2020-05-03 21.14のイメージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618640/171571e7-3e16-2782-88ef-025befde78e6.jpeg)