この記事では、コマンドラインを使ってGitHubのリモートリポジトリにファイルを追加する方法を解説します。
GitHubに加えてGitの基本的な操作も含んでおり、初心者向けの内容となっております。
解説は、以下の手順で進めていきます。
GitHubでリモートリポジトリを作る
Gitの初期設定をする
ファイルをpushする
順番に見ていきます。
GitHubでリモートリポジトリを作る
GitHubでリモートリポジトリを作るためにやることが以下の2つです。
GitHubのアカウントを作る
リモートリポジトリを作る
この辺りに関しては、以下の記事で解説しておりますのでぜひご覧ください。
![【GitHub】リポジトリの作り方【削除方法まで解説】](https://images.ctfassets.net/o1bgnefm7hbe/7t60Yvvfjo0lFpw2fwbTN/770236064e70ca75be93738813a3af12/create_github_repository.png?w=260&h=146&q=50&fm=png)
GitHubでリモートリポジトリを作ると、「Quick setup」というページが開きます。
![repository quick setup](https://images.ctfassets.net/o1bgnefm7hbe/4g4YbJSfsEQGS3Q5zNjGnt/36c579fa4be8023d25fef86f763bb266/repository_quick_setup.png?w=760&h=420&q=50&fm=png)
上の画像のようなページです。
このページは後で使うので、そのまま開いた状態にしておいてください。
「もう閉じちゃったんだけど...」っていう方も安心してください。
GitHubにもう一度ログインしてリモートリポジトリの名前をクリックすれば上の画像のようなページに来れます。
Gitの初期設定をする
ここからはコマンドラインを使った操作になります。
初めてGitを使う場合、設定まで必要です。
やるべきことは以下です。
Gitをインストールする
Gitの初期設定をする
これも解説記事を用意しております。
上記の2つがまだの場合は、以下の記事を参考にGitの初期設定を行ってください。
![【Git】やるべき初期設定【コマンドライン使います】](https://images.ctfassets.net/o1bgnefm7hbe/4eJSy3nBaaTsl0VfanexXx/acbc3923241a9e9c2ea998322e45dfad/git_initial_setting_eyecatch.png?w=260&h=146&q=50&fm=png)
Gitの初期設定までできたら、先に進みます。
VSCodeを使う
「なんで急にVSCode?...」って思われたかもしれません。
ですが、ここからVSCodeを使っていきます。
理由は、より実践的にGitとGitHubを活用していくためです。
ですが、もちろん必ずしもVSCodeを使わないといけないわけではありません。
開発環境がある程度整っている方は、読み飛ばしてもらって大丈夫です。
VSCodeは、当サイトでおすすめしているエディタです。
まだインストールされていない方は、こちらの記事をどうぞ。
VSCodeのインストール方法、初期設定、簡単な使い方を解説しております。
![【初心者向け】Visual Studio Codeの使い方【図解あり】](https://images.ctfassets.net/o1bgnefm7hbe/3Dq7OGpTNSaTa0e5YyjJ2w/81f8a8104ab39f3a7508018dd75ae133/install_vscode.png?w=260&h=146&q=50&fm=png)
では、VSCodeを起動させます。
![vscode simple html](https://images.ctfassets.net/o1bgnefm7hbe/582byd5OauXCE0aGdxU1KP/d57038f6c0021ef4e8bdb1af0f4cdefb/vscode_index.png?w=760&h=462&q=50&fm=png)
そして、デスクトップな ど適当な場所にフォルダを作成し、そのフォルダをVSCodeで開きます。
「index.html」という名前のファイルを作り、簡単にコードを書いてみてください。
上の画像のように、h1タグで「Hello, world!」だけでもいいです。
![vscode terminal](https://images.ctfassets.net/o1bgnefm7hbe/1PWSiliEYYVSTL9wfijwyU/b0cfac4822d4d9d4914e59cdb037fcd9/vscode_terminal.png?w=760&h=475&q=50&fm=png)
上の画像のようにして、ターミナルを表示させます。
このターミナルを使って、コマンドライン操作ができます。
このターミナルに、Gitのコマンドを入力していくわけです。
リモートリポジトリにファイルをpushする
これから、以下のことをやっていきます。
ローカルリポジトリを作る
ローカルリポジトリにファイルを追加する
ローカルリポジトリとリモートリポジトリをつなぐ
リモートリポジトリにファイルを追加(push)する
順番に解説します。
ローカルリポジトリを作る
まずローカルリポジトリを作ります。
GitHubで作ったリポジトリはリモートリポジトリです。
それに対して、自分のパソコン上に作るリポジトリをローカルリポジトリといいます。
では、VSCodeのターミナルに以下のコマンドを入力して実行してください。
$ git init
特に目に見える変化はないように思えますが、これでローカルリポジトリが作られました。
ローカルリポジトリにファイルを追加する
次に、作ったローカルリポジトリにファイルを追加していきます。
では、VSCodeのターミナルに以下のコマンドを入力して実行してください。
$ git add .
最後のピリオドは「全て」という意味があります。
プロジェクトフォルダ内の全てのファイルを「add」しました。
次に、以下のコマンドを入力して実行してください。
$ git commit -m "first commit"
「-m」は「メッセージ」の意味です。
「first commit」の部分にメッセージが入ります。
「first commit」ではなく「ファーストコミット」とか「初めてのコミットです」みたいに、英語でも日本語でも自由にメッセージを書けます。
「git add」と「git commit」の2段階のコマンドによって、ローカルリポジトリにファイルが追加されます。
2段階ある理由は、簡単に言えば間違えたときに修正できるようにするためです。
本来、この辺りの話は実はもっと 複雑です。
ぶっちゃけ「addの意味って何?」、「commitって何してるの?」って思いますよね?
Web系の会社に就職を考えてる方は書籍などでもう少し深堀りしておいた方がいいかと思います。
書籍ならおすすめは以下です。
おすすめの理由はこちらです。
マンガ調でわかりやすい
内容が新しい
現場目線
他だと「内容が古くて専門的過ぎて複雑過ぎてムズい」だったりします。
ローカルリポジトリとリモートリポジトリをつなぐ
次に、GitHubでリモートリポジトリを作ったときに表示されたページを開きます。
![git remote command](https://images.ctfassets.net/o1bgnefm7hbe/3myLhoLh5ddrqdbGYM1Bj9/1d9e37787bf47d6666cdb3e6d66af0d2/repository_quick_setup.png?w=760&h=420&q=50&fm=png)
このページです。
上の画像で示した部分のコマンドをコピーしてください。
そして、VSCodeのターミナルにペーストして実行してください。
$ git remote add origin https://github.com/rala2/test-html.git
「https://github.com/〜」の部分は個人によって違いますので注意してください。
これで、ローカルリポジトリとリモートリポジトリをつなぐことができました。
リモートリポジトリにファイルを追加(push)する
次にやることは、ローカルリポジトリに追加したファイルをリモートリポジトリに移す作業です。
では、以下のコマンドを入力して実行してください。
$ git push -u origin master
ターミナル上でGitHubのパスワードを聞いてきたら入力します。
![complete push](https://images.ctfassets.net/o1bgnefm7hbe/VgBPn1lgY3ZFMuFchlGCM/b1f8017bbe30d8e6f4a2706cecaade4f/complete_push.png?w=760&h=420&q=50&fm=png)
先ほど開いていたGitHubのページを更新(リロード)してみてください。
すると、上の画像のようなページが表示されます。
VSCodeで作った「index.html」が、GitHubのリモートリポジトリに追加されているのが分かります。
ファイルの内容を変更してまたpushする
次は以下のことをやってみましょう。
VSCodeでファイルの内容を修正する
リモートリポジトリにまたpushする
リモートリポジトリに追加したファイルの内容は簡単に更新できます。
リモートリポジトリに追加したファイルをいったん全部消してから追加し直す...なんて面倒なことはしなくていいんです。
実際にやっていきます。
VSCodeでファイルの内容を修正する
![improve file](https://images.ctfassets.net/o1bgnefm7hbe/1I4zrpeJLjjE2GAAGUUJA4/01f05fd8d6afede5eaef1f5745a7a35d/improve_file.png?w=760&h=462&q=50&fm=png)
VSCodeでファイルの内容を修正してみます。
どう変えてもいいんですが、上の画像ではindex.htmlの中にpタグを追加してみました。
また、style.cssというファイルも新たに作りました。
リモートリポジトリにまたpushする
修正したファイルをまたリモートリポジトリにpushしていきます。
まずは、ローカルリポジトリにファイルを追加します。
以下のコマンドをVSCodeのターミナルに入力して実行してください。
$ git add .
続いて、以下のコマンドを入力して実行します。
$ git commit -m "ファイルを修正してみた"
「ファイルを修正してみた」の部分の文言は、何でもいいです。
これで、ローカルリポジトリにファイルが追加されました。
あとは以下のコマンドを入力して実行します。
$ git push
これで、リモートリポジトリが更新されます。
一番最初のpushでは「git push 〜」みたいな長いコマンドを実行しました。