VScodeで接続したラズパイとGitHubを連携させる話

# 想定環境
windows 10
Raspberry Pi
VScode

# 本記事で行うこと
VScodeでSSH接続しているRaspberry PiのフォルダをGitHubと連携させる
今回は例として新しいフォルダを作成しGitHubと連携させる

# 事前に完了させること
- RaspberryPiへのRaspbianインストール

この手順が完了していない人はこちらを参考に

https://qiita.com/opckaiyo/items/83f10f5c1753418f55fc

- VScodeのインストール
- VScodeでRaspberryへのSSH接続

この手順が完了してないひとはこちらを参考に

https://qiita.com/opckaiyo/items/99f9ced118791523cee5

- PCのネットワーク設定

プロキシやIPの固定を行ってない人は先生の指示に従い速やかに完了させること

# 目次
①VScodeで連携したいフォルダを開く
②GitHubアカウントとGitの連携
③リポジトリ(フォルダ)の初期化
④GitHubでの新しいリポジトリ(フォルダ)作成
⑤実際にリモートリポジトリ(ネットワーク上のフォルダ)にアップロード
⑥GitHubの簡単な使い方
⑦途中参加する場合

# 手順
## ①VScodeで連携したいフォルダを開く
GitHubと連携させるフォルダを開く
VScodeでRaspberry Pi上のフォルダを開いてください。
今回は仮に2022というフォルダを開きます。
![キャプチャ26.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/b94eb513-6a8a-f169-b926-e96db45c56dd.png)

パスワードの入力
![キャプチャ27.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/2ae30d39-2b01-e3f5-2c75-7c5d0cb47cbd.png)

開きたいフォルダを指定
![キャプチャ28.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/6a08b07c-c5ed-edc7-2244-a85de74e044e.png)

もう一度パスワードを入力
![キャプチャ29.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/6bad0d7c-f913-8d09-a1da-a2606b31f301.png)

## ②GitHubアカウントとGitの連携
先ほどの手順の最後で表示されたウィンドウに以下の項目を入力する
アカウント名とメールアドレスは共有フォルダのGitの使い方に記述している。

```:コピー用
git config --global user.name 'アカウント名'
git config --global user.email 'メールアドレス'
```

プロキシ環境下ならばプロキシ設定も追加

```:コピー用
git config --global http.proxy http://172.16.0.2:8080
git config --global https.proxy http://172.16.0.2:8080
```


## ③リポジトリ(フォルダ)の初期化
画像の通りにVScodeを操作してリポジトリ(フォルダ)を初期化する。
![キャプチャ30.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/bc887ee3-ec3c-513b-c4b2-7051ef777999.png)

しばらく待つと以下のような画面になる
![キャプチャ31.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/6d525bbb-f4d8-bb36-d436-8e7dceb926b4.png)

もし、しばらく待っても以下のよな画面にならなければVScodeを再起動する


## ④GitHubでの新しいリポジトリ(フォルダ)作成
先ほどの手順で開いたフォルダとネットワーク上のフォルダを連携させる
このフォルダをリモートリポジトリと言ったりする。

### GitHubログイン
海洋班のgoogleアカウントにログインしているならブックマークバーからGitHubにアクセスできる。
![キャプチャ32.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/0265109c-dde1-261f-8222-dd7bbb34b24a.png)

もし、下の写真のような画面にならなければログイン期限が切れているので再ログインする。
![キャプチャ34.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/dd3f695c-6d09-ba39-f933-1a519ee0f00e.png)

googleにパスワードが保存されているのでテキストボックスに入力しようとすれば自動入力してくれるはず
下の画像に従い「sign in」
![キャプチャ37.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/af43a1a9-2c2d-3500-ebeb-f8abea087115.png)

もし、パスワードが表示されなければ以下の項目からパスワードを確認する。
![キャプチャ35.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/cb2eab81-5b44-8537-4b04-91cbc6c31b35.png)

下の画像のパスワードを表示を押すと現在使用しているPCのパスワードが要求されるので入力
![キャプチャ36.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/003d1e1d-9d88-2b68-57d8-e21e04d1484a.png)

正常にログインできたら下の画像のようになる
![キャプチャ33.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/0341893a-ba2f-7ccb-a95d-62832ff3fedd.png)

### リモートリポジトリ作成
ログイン後に赤枠のnewボタンをクリック
![キャプチャ33.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/e19fc450-4c34-9fab-af72-d97e529a0b3f.png)

画像の①に適切な名前を入力し②をクリック
![キャプチャ41.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/ff89da22-eab7-66fa-d508-9fdf43e332cd.png)

以下の①をクリックして②をコピーする。
次の手順で②は使用するので保持しておくこと
![キャプチャ42.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/2ceb0c2f-aed9-d1bb-8edd-e22f11ba58eb.png)

## ⑤実際にリモートリポジトリ(ネットワーク上のフォルダ)にアップロード
実際にリモートにファイルをアップロードする。

### 対象フォルダを開く
手順④で初期化したフォルダであることを確認する。
以下の手順でターミナル開く
![キャプチャ43.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/6754b385-1514-768b-f780-866b14332831.png)

開いたターミナルが手順④で初期化したフォルダと同一であることを確認する
同一でなければフォルダを移動して同一のフォルダにする。
![キャプチャ44.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/a6f1b70f-d790-8bf1-7c47-2ae0f36bd6f1.png)

### READMEファイルを作る
このファルダの目的や使い方などをmarkdown方式を用いて記述する。
①をクリックし、②にREADME.mdと入力し新しいファイルの名前を`README.md`にする。
③新しく作成した`README.md`に`# test`と入力する。
![キャプチャ49.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/243e7b6b-e455-c2b4-f49a-47a641171d19.png)

### リモートにアップロード

```
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/opckaiyo2/2022.git
git push -u origin main
```

正常に進んだ例
![キャプチャ57.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/b4abed48-629b-bda5-a262-77d3700e5b01.png)

### ブラウザでGitHubを開き確認してみる
以下の赤枠を確認しコミットした時間帯やコミットメッセージが正しい事を確認する。
![キャプチャ58.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/b450ac11-548e-aa8a-3e73-20761499b7a9.png)

## ⑥GitHubの簡単な使い方
前の手順のように毎回コマンドを打ってちゃきりがない
VSCodeならもっと簡単にできる

### ファイルを変更してみる
先ほど使用したREADME.mdファイルを適当に編集する。
以下のように編集してみた。
![キャプチャ59.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/c58aab5b-ab27-658f-b082-062481ec6407.png)

### 変更内容確認
編集し`Ctrl+S`などでファイルを保存すると①の部分に数字が表示されるようになるのでクリック
続いて②をクリックすると変更箇所が分かりやすく表示される
![キャプチャ60.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/ec99774a-610b-bde1-b723-357c2369d54e.png)

### コミット
アップロードの前にコミットという作業を行う
どこをどのように変えたか記録する作業
①でコミットメッセージを入力変更内容を簡潔に記述(通信機能のバグ修正など)
③本来はコミットの前にステージを行う場合もあるがやらなくても問題はないだろう
![キャプチャ62.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/de2a46b7-3ee4-5638-34e6-5868751e7217.png)

### アップロード
GitHubにデータを上げる事をプッシュと言ったりする。
以下の赤枠を押しGitHugにプッシュ
![キャプチャ64.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/b26694fd-41bb-6207-821f-40f9ce58cf57.png)

### 確認
しばらく待ってブラウザでGitHubを開き確認する。
![キャプチャ65.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/1f294d1e-e5e5-7c0e-f779-b4a6306dea12.png)

## ⑧途中参加する場合
今まで説明してきた事は新しいraspiのフォルダをGitHubと連携させる手順である。
一度この手順が終われば同じ手順を実行しなくてもよい

### VScodeでraspiにSSH接続
手順③と同様にVSCodeで設定し終わったフォルダに接続する。

### 変更を加えコミット
![キャプチャ66.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/8205e6a1-5d0b-7d16-4184-3d4accc75317.png)

### push
![キャプチャ67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/d2c399b0-e8cd-c144-2d53-f097f2ddb6fd.png)

### VSCodeでGitHubログイン
前手順を完了すると以下のポップアップが表示され
「はい」をクリックするとブラウザでGitHubのログインが求められる。
パスワードがわからなければ手順⑤を参照する。
![キャプチャ4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/a09dc6c6-22b5-eb35-a29a-1bd0628dfca8.png)

### 確認
ログインが完了してしばらくするとpushされるので
編集した内容がブラウザ上でも反映されているか確認する。
![キャプチャ5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2298098/45135ee6-8779-53f1-28d4-42fc37aa67b5.png)


# 終わりに
本記事では一番初めのpushはCUIで行っている。
GUIで何度か試したが動作が不安定なためである。
そこに本校のproxyが関係しているのかはわからなかった。

GitHubは使用しなくても開発に大きな影響があるわけではない
もし、設定がうまくいかなかったリめんどくさければ使用しなくてもよいと思う。
自分が便利だと思ったから記事を書きました。
開発課題の最初にpull、最後にpushするといいかもしれません


# 参考文献

https://qiita.com/c60evaporator/items/f8524e4e528045f2c3ef