VSCodeとGitHubを連携させます。今回はVSCodeで編集したファイルをGithubのリポジトリにプッシュするところまで行います。
目次
ローカルにGitをインストールする
下記サイトからインストーラーをダウンロードしてインストールする。
https://gitforwindows.org/
今回は設定を変更せずインストールを進めた。
インストール後、OSを再起動する。
Gitの設定を行う
ターミナルから下記のコマンドを実行する。
git config --global user.name 自分の名前
git config --global user.email メールアドレスローカルのディレクトリをVSCodeで開く
まず任意のフォルダー(ここでは「C\github\repository\VSCode_share_rest」)を作成し、VSCodeで開く。開き方は
- フォルダを右クリックしてランチャーメニューから「Codeで開く」で開く方法
- VSCodeから「ファイル」→「フォルダーを開く」で開く方法
の２通りがある。
ローカルリポジトリを初期化する
VSCodeのターミナルから
git initを実行する。下記のように表示されれば成功。
Initialized empty Git repository in C:\github/repository/VSCode_share_rest/.git/なお、「.git」という隠しフォルダーが生成される。
ローカルリポジトリにファイルを追加する
VSCodeで先ほどのフォルダーを開いた状態のまま、エクスプローラーからそのフォルダにファイルを追加すると、VSCodeの左側にも追加したファイルが表示される。
ローカルリポジトリにAdd(ステージング)する
VSCodeでAdd(ステージング)するために画面左側の「ソース管理」アイコン(枝分かれのアイコン)をクリックしてGitのメニューを開く。
ファイル名の右側にある「＋」アイコンをクリックすると、ファイルが「ステージされている変更」という項目に移動される。
ローカルリポジトリにコミットする
「Message」というテキストボックスにコメント（例えば「first commit」）を記入して、「☑コミット」をクリックする。
これでローカルリポジトリに対してファイルの追加や既存ファイルの変更などがコミットされる。
GitHubでリモートリポジトリを作成する
GitHub画面左上の「New」ボタンをクリックし、リポジトリ名を入力して「Create Repository」をクリックする。
リポジトリ名は例として「VSCode_share_rest」とする。
ローカルリポジトリとリモートリポジトリを紐づける
VSCodeのターミナルから
git remote add origin https://github.com/ユーザー名/リポジトリ名.gitを実行する。結果を確認するために
git remote -vを実行して次のように表示されれば成功となる。
origin https://github.com/ユーザー名/リポジトリ名.git (fetch)
origin https://github.com/ユーザー名/リポジトリ名.git (push) リモートリポジトリにプッシュする
VSCodeのターミナルから次のコマンドを連続で実行する。
git branch -M main
git push -u origin main例えば次のように表示されれば成功となる。
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 237 bytes | 29.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/ユーザー名/VSCode_share_test.git
* [new branch] main -> main
Branch 'main' set up to track 'origin/main'.余談だけどもポリコネの影響で「master」から「main」に表示が変わりましたね…過去に書かれた記事等は読み替えてください。
ブラウザから結果を確認する
ブラウザでリモートリポジトリを開き、ファイルが追加されていれば成功となる。
変更のコミット、プッシュ、逆にリモートリポジトリからプルする方法等はまた次回。