1
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にあげる方法(Windows)

1
Last updated at Posted at 2024-10-06

初めに

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

プログラミングを勉強し始めて1カ月くらいの自分を思い出しながら丁寧に説明します。
なので、ちょっと長くくどいです。

今の状況

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をインストールしておく必要 があります。インストールの手順は割愛します。

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】をクリックする

image.png

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

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

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にあげる時の方法を紹介しました。
うまくいきましたか?

1
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
1
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?