0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【超初心者向けに丁寧に順を追う】ファイルをGithubにあげる方法

Posted at

初めに

今回は、ローカル環境(=自分のパソコン)で作ったプルジェクトを、初めてGithubにアップロードする時の手順を紹介する。

プログラミングを勉強し始めて1カ月くらい方が理解できるよう(というより、もはやその時の自分を思い出しながら)懇切丁寧に説明する。

ので、ちょっと長いのとくどいかもしれないが、安心して読んでね!!

※ちなみに筆者はWindowsのパソコンを使っているので、Macのパソコンを使っている方は少し見え方や手順が違うかもしれない。

今の状況

test-app という名前のプロジェクトを制作した
・今回初めてGithubにファイルをあげたい

流れ

1. エクスプローラーにて作ったファイルのディレクトリに移動する
2.Git Bashを起動する
3.Githubのリモートリポジトリをつくる
4.ファイルをGithubにあげる

1. エクスプローラーにて作ったファイルのディレクトリに移動する

エクスプローラー」 とは、このようなアイコンの フォルダがたくさん入っているアプリ のことだ。
image.png

まずこのアプリを開き、自分が作ったファイルを開く。

image.png

開くべき場所は、プロジェクトを包括するファイルだ。

image.png

2. Git Bashを起動する

ファイルに移動できたら、その場所で Git Bash (=コマンドを使ってGitの操作をするツール)を起動する。

筆者のPCでは、ディレクトリ内の余白で右クリックすると次のようなモーダルが表示される。

image.png

※Git Bashを使うには、あらかじめ Gitをインストールしておく必要 がある。今回、Gitのインストールの手順は割愛する。

Open Git Bash here の表示をクリックすると、Git Bashがこのように起動する。
image.png

ここでディレクトリ名が、自分のプロジェクトのものになっていることを確認する。

image.png

Git Bash内でプロジェクトのディレクトリに移動する手段として、Git Bashを起動させた後に次のコマンドを実行するという方法もある。

cd C:\test-app

コマンドを実行するには、コマンドを打った後にEnterを押す。

3. Githubのリモートリポジトリをつくる

Git Bashは開いたままで一旦置いておき、Githubの リモートリポジトリ (=自分のプロジェクトをアップロードする場所)をつくる。

1.Githubのダッシュボードに移動する

2.リポジトリ名、公開範囲(publicは全体公開、privateは自分だけに公開)を入力する

3.【Create a new repository】をクリックする

※便宜上、キャプチャではリポジトリ名を test-app2 としているが test-app に置き換えて見ていただきたい。

image.png

すると画面が遷移するので、遷移した先の画面で枠で囲った部分が見えるまでスクロールする。

image.png

枠内の情報は後ほど使うので、ここまで進めたら先ほど立ち上げたGit Bashに戻る。

4. ファイルをGithubにあげる

まず、Git Bashにて実行するコマンドを挙げる。

コマンドは、入力後にEnterを押すと実行できる。
実行は1コマンドずつ行う。

1.ローカルのGitリポジトリをつくるコマンド

$ git init

このコマンドでは、指定したディレクトリ内に .git という隠しディレクトリ(=コミット履歴、設定ファイル、ブランチ情報などGitに関するすべての管理情報が保存される場所)をつくる。
ローカルリポジトリを初期化することで、Gitによって追跡されるようになる。

2.作業したファイルをステージングエリア(=次のコミットで追跡するファイルや変更内容を一時的に保存する場所)に追加するコマンド

$ git add .

今回はすべてのファイルを追加したいのでこのように実行したが、特定のファイル(例えば、C:/test-app/test/index.html)だけ追加する場合は、次のように指定する。

※すでにC:/test-appディレクトリにいるので、test/index.htmlだけ指定すればOK

$ git add test/index.html

3.ステージングエリアに追加したファイルの状態をローカルリポジトリに保存するコマンド

$ git commit -m "Initial commit"

'-m' オプションを使うと、commitの操作にメッセージを添付できる。
今回は、"Initial commit"というメッセージを追加した。

addとcommitを同時に行う方法もあり、次のように記述する

$ git commit -a -m "バグの修正"

4.ローカルリポジトリとリモートリポジトリを接続し、ファイルをアップロードするコマンド

ここから、先ほどブラウザで表示したこの情報を使う。

image.png

コマンドは3行あるので、1行ずつ実行する。

コマンドはコピペして実行することもできる。
コピペする範囲を選択 ➡ コピー(Ctrl+C) ➡ Git Bashの入力欄で右クリック ➡ Enter の順で実行できる。

$ git remote add origin https://github.com/OgataMegumi/test-app2.git

ローカルリポジトリとリモートリポジトリを接続する。

$ git branch -M main

現在のローカルブランチの名前をmainに変更する。
'-M' オプションは、強制的にブランチを変更する。

ブランチ名を main に変える理由
GitHubでは、新しいリポジトリ(=先ほど Create a new repository をクリックして作ったリポジトリ)のデフォルトブランチ名が main になっている。
ローカルでもブランチ名を main にしておくことで、リモートリポジトリとの整合性が保てる。

また、ローカルのブランチ名が main になっていれば、GitHubへのpushでブランチ名の不一致が起こらず、エラーを回避できる。

$ git push -u origin main

ローカルの変更(=commit)をリモートリポジトリに反映させる。

'-u' オプションを使うと、この main ブランチをデフォルトのリモート追跡ブランチとして設定することができ、次回からは git push と入力するだけでOKになる。

5.Githubに反映されているか確認

これで Githubへのファイルをアップロードは完了 だ。
ブラウザに戻り、画面をリロードして、自分が作ったプロジェクトのファイルをが一覧で表示される画面に切り替われば成功だ。

image.png

ちなみに、今回実行したgitコマンドの全体の流れはこのようになっている
image.png

5.まとめ

今回は、ローカルのプロジェクトを初めてGithubにあげる時の方法を紹介した。
うまくいっただろうか?

もしうまくいかなくても、めげずに一緒に頑張ろう。

また、内容に間違いがあれば、ぜひ指摘していただきたい。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?