想定環境

windows 10
Raspberry Pi
VScode

本記事で行うこと

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

事前に完了させること

RaspberryPiへのRaspbianインストール

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

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

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

PCのネットワーク設定

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

目次

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

手順

①VScodeで連携したいフォルダを開く

GitHubと連携させるフォルダを開く
VScodeでRaspberry Pi上のフォルダを開いてください。
今回は仮に2022というフォルダを開きます。

パスワードの入力

開きたいフォルダを指定

もう一度パスワードを入力

②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を操作してリポジトリ(フォルダ)を初期化する。

しばらく待つと以下のような画面になる

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

④GitHubでの新しいリポジトリ(フォルダ)作成

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

GitHubログイン

海洋班のgoogleアカウントにログインしているならブックマークバーからGitHubにアクセスできる。

もし、下の写真のような画面にならなければログイン期限が切れているので再ログインする。

googleにパスワードが保存されているのでテキストボックスに入力しようとすれば自動入力してくれるはず
下の画像に従い「sign in」

もし、パスワードが表示されなければ以下の項目からパスワードを確認する。

下の画像のパスワードを表示を押すと現在使用しているPCのパスワードが要求されるので入力

正常にログインできたら下の画像のようになる

リモートリポジトリ作成

ログイン後に赤枠のnewボタンをクリック

画像の①に適切な名前を入力し②をクリック

以下の①をクリックして②をコピーする。
次の手順で②は使用するので保持しておくこと

⑤実際にリモートリポジトリ(ネットワーク上のフォルダ)にアップロード

実際にリモートにファイルをアップロードする。

対象フォルダを開く

手順④で初期化したフォルダであることを確認する。
以下の手順でターミナル開く

開いたターミナルが手順④で初期化したフォルダと同一であることを確認する
同一でなければフォルダを移動して同一のフォルダにする。

READMEファイルを作る

このファルダの目的や使い方などをmarkdown方式を用いて記述する。
①をクリックし、②にREADME.mdと入力し新しいファイルの名前をREADME.mdにする。
③新しく作成したREADME.mdに# testと入力する。

リモートにアップロード

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

正常に進んだ例

ブラウザでGitHubを開き確認してみる

以下の赤枠を確認しコミットした時間帯やコミットメッセージが正しい事を確認する。

⑥GitHubの簡単な使い方

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

ファイルを変更してみる

先ほど使用したREADME.mdファイルを適当に編集する。
以下のように編集してみた。

変更内容確認

編集しCtrl+Sなどでファイルを保存すると①の部分に数字が表示されるようになるのでクリック
続いて②をクリックすると変更箇所が分かりやすく表示される

コミット

アップロードの前にコミットという作業を行う
どこをどのように変えたか記録する作業
①でコミットメッセージを入力変更内容を簡潔に記述(通信機能のバグ修正など)
③本来はコミットの前にステージを行う場合もあるがやらなくても問題はないだろう

アップロード

GitHubにデータを上げる事をプッシュと言ったりする。
以下の赤枠を押しGitHugにプッシュ

確認

しばらく待ってブラウザでGitHubを開き確認する。

⑧途中参加する場合

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

VScodeでraspiにSSH接続

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

変更を加えコミット

push

VSCodeでGitHubログイン

前手順を完了すると以下のポップアップが表示され
「はい」をクリックするとブラウザでGitHubのログインが求められる。
パスワードがわからなければ手順⑤を参照する。

確認

ログインが完了してしばらくするとpushされるので
編集した内容がブラウザ上でも反映されているか確認する。

終わりに

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

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

参考文献