さっき決めたブログ

VScodeからGitHUBを使ってみる

目次

• VScodeからリポジトリを登録する
• ファイルの追加/更新を行う

前回GitHubからファイルをアップロードしてみましたが、今回はVScodeからやってみようと思います。

私自身も、まだまだ GitHub の知識が足りない状態で、こうやったら上手くいったレベルの説明になります。
間違っている部分や、もっと良いやり方があるようでしたら、ご指摘いただけると幸いです🙇

これから説明する内容は、GitHubへのアカウント登録と、gitのインストールが既に完了している事が前提になっています。
まだの方はこちらの記事を参考にしてください。

また、当然ですがVisual Studio Code(VScode)がインストールされている必要もあります。

VScodeからリポジトリを登録する

VScodeから新たなリポジトリの作成とファイルの登録を行ってみます。

まずは適当なフォルダとファイル(中身は何でも良いです)を作成し、フォルダをVScodeで開きます。
今回は、以下の構成でファイルを作成してみました。

File1.txt ～ File3.txt をGitHubに登録し、secret フォルダにある File4.txt は、GitHubには登録したくないファイルという想定です。

ファイルを登録

画面左のソース管理ボタン ( マーク) を押します。

ソース管理ボタンを押す

フォルダがGitHubにまだ公開されていない場合、下のようなメッセージが表示されるので、"GitHubに公開"を押します。

GitHubに公開を押す

下の選択肢が出てきます。

選択画面

似ていますが、違いは次の通りです。

Publish to GitHub private repository [ID]/[リポジトリ名]

非公開リポジトリを作成します。 ここに登録したファイルは自分と許可された人以外は閲覧できません。

Publish to GitHub public repository [ID]/[リポジトリ名]

公開リポジトリを作成します。 ここに登録したファイルは全ての人が閲覧することが出来ます。

どちらか自身の用途に合った方を選択すると、次にGitHubに登録するファイルの選択画面になります。
冒頭でも話したとおり、今回は secret フォルダ内のファイルは GitHub に登録しない想定ですので、secret フォルダのチェックを外して OK を押します。

チェックを外してOKを押す

これで登録は完了です。
ブラウザで GitHub を開いて、自分のページを見てみると、されていることが分かります。

リポジトリとファイルが新規に登録されていることを確認

ファイルの追加/更新を行う

次に、ローカル側でファイルの内容を変更した場合や、新規ファイルを追加した場合の反映方法を確認していきます。
今回は File1.txt の内容変更と、新たに File5.txt を作成し、その内容を GitHub に反映させます。

ディレクトリ内のファイルの修正や追加などを行うと、 ボタンにバッチが付きます。
また、VScodeのエクスプローラで見てみると、修正されたファイルの横に "M" マーク、追加されたファイルの横に "U" マークが付いているのが分かります。

ファイルの修正や追加などを行う

をクリックすると、修正・追加したファアイルが、変更グループに表示されています。
この状態でマウスを "変更" と書いてある部分と同じ列に持っていくと、 が表示されるので、それを押すことで変更グループにあるファイルがステージされた状態(GitHubへの反映候補としてマークされた状態)になります。

をクリック

次に、メッセージを入力すると、 マークが押下可能な状態になりますので、それを押せば GitHub への登録準備は完了です。

マークを押す

最後に、 押して表示されるメニューから "プッシュ" を選択すると、GitHubへの送信が行われ、サーバ側に内容が反映されます。

"プッシュ"を選択

ブラウザで GitHubのサイトを見てみると、内容が反映されていることが分かります。

GitHubのサイト

以上となります。