LoginSignup
14
20

最初の一歩 GitHub上での新規リポジトリをVSCodeに紐付け、ローカルでプログラミングを始める方法。

Last updated at Posted at 2017-11-22

VSCode上でプログラムを書き、それを記録しておくためGitHub上に保存しておこうとした所、久しぶりすぎてやり方を忘れていたので調べてメモ。

前提条件

環境
Windows7
Gitはインストール済み
GitHubのアカウントは作成済み
VSCodeはインストール済み

一番簡単な方法(以前触っていたことはあるが完全に忘れている状態)

GitHubへ
https://github.com/masakinihirota
https://github.com/[自分のID]

Repositories(タブボタン)

New(緑色のボタン)

(必須)
[Repository name]
(任意)
Description,Public or Private(現在はPrivateでも無料です),
Initialize this repository with a README,license

「Create repository」(緑色のボタン)

GitHub上でのリポジトリが作成されます。

VSCodeでローカルにリポジトリを展開したい場所を開きcloneコマンドを実行します。

コマンドラインから
git clone https://github.com/[自分のID]/[Repository name].git

git clone https://github.com/masakinihirota/React.git
※「.git」を付けることを忘れずに。

[VSCodeで開いたディレクトリ]/[Repository name]

D:\webをVSCodeで開いた場合。
D:\web\React
と展開されます。

確認
README.md等になにか書きます
VSCode上からコミットします。
VSCode上からプッシュします。
成功したらローカルで変更した部分が、github上で更新が反映されていることを確認できると思います。

まっさらな状態から作る方法

(GitHub上にもローカル上にもGitフォルダ等が全く何もない状態。)

おおまかな手順
github上でまっさらなリポジトリを作っておく。
※README.mdや.gitignore等にチェックを入れないこと
ローカルでリポジトリを作っておき、githubへpushする。

以下詳細な手順

GitHubページを訪れる

https://github.com/
画面右上にあるSign in[ボタン]を押す。
Username or email address
Password
をそれぞれ入力
Sign in[ボタン]を押す。

ログイン済みの自分のトップページ

画面右側の中央にある
New repository[緑色のボタン]を押す。

Create a new repositoryページが開く
Repository name
を入力
(緑のチェックマークが出ればok)

Create repository[緑色のボタン]を押す。

GitHub上にリポジトリが作成される。

URLを記録しておく
Quick setup — if you’ve done this kind of thing before
の下にURLが表示される
https://github.com/アカウント名/リポジトリ名.git
SSHでアクセスする場合はこちら
git@github.com:アカウント名/リポジトリ名.git
このURLを記録しておく。

URL例
HTTPS
https://github.com/masakinihirota/test.git
SSH
git@github.com:masakinihirota/test.git

ローカル側で作業

エクスプローラー上での作業

エクスプローラーを立ち上げ
レポジトリを置きたい場所にフォルダを新規作成する。
「このフォルダの下にGitHub上に作ったリポジトリが作成される」
(VSCode上から自分の作りたい場所にフォルダを作成できるなら不要)

VSCode上での作業

VSCodeを立ち上げる
ファイル>新しいウィンドウで
新しいウィンドウを開く

ファイル>フォルダを開く
から新規作成したフォルダを選択
もしくは
エクスプローラーからVSCodeへ
作ったフォルダをドラッグ&ドロップする。

表示>総合ターミナル
もしくは
Ctrl+`
でターミナルを開き。
(Windows端末)

「URLの部分は各自で設定」
echo "# test" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/masakinihirota/test.git
git push -u origin master

SSHでアクセスする場合はこちら
ーーーー未定

作業終了

確認作業

ローカル上で
何か適当なファイルを作成or変更して
コミットしてプッシュすると
GitHub上に反映されることを確認する。

プッシュはVSCode左側の上から3番目のGitコマンドアイコンを選び。
その隣に開かれた ソース✓ ↻・・・
この・・・を押すとGitコマンド群が現れ
プッシュを選択すると出来る。

後は自由にプログラミング!

ローカルにリポジトリが2つ以上ある場合は?

git remoteコマンドがきちんと設定してあれば
VSCodeで、開くリポジトリ毎に自動的に設定の切り替えが行われているようです。

(おまけ)すでにローカル側にリポジトリがある場合

GitHub上にリポジトリを作成する。
git remoteコマンドでリポジトリを指定
git remote add origin https://github.com/masakinihirota/test.git
git cloneコマンドでリポジトリをローカルマシーンにコピー
git clone https://github.com/masakinihirota/test.git

すでにGitHub側にリポジトリがある場合

git cloneを使う。

14
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
20