Webコーダーになるまで

Webコーダーを目指し勉強中です。日々の記録、有益だなと思う情報を載せていきます。

Git初心者の為のGitからGithubへアップロードする方法

毎度お久しぶりです。のんです。

先日ポートフォリオを作成して、Web上で公開する際にGitを使ってGitHubにアップロードし、公開する事ができました!

全くの無知の方でもGitを使い、Githubにアップロードして公開するまでの手順を書いていきたいと思います。
Githubを使えばサーバーを有料でレンタルする事なく無料でWeb上に公開する事ができます!

準備編

①最低限のGitの知識を得る為にProgateのGit講座を受講
https://prog-8.com/languages/git

②下記の環境構築の記事をみながらGitのインストールと、Githubに会員登録、Github上でリモートリポジトリの作成
https://prog-8.com/docs/git-env-win

ここで最低限の単語の説明だけしておきます。

ローカルリポジトリ…自分のパソコン上でのGitで管理するフォルダを置く場所

リモートリポジトリGithub上でのフォルダを置く場所

 つまり、ローカルリポジトリからリモートリポジトリにアップロードする事で、Web上で公開する事ができます。

 

実践編

Git  Bashを実行し、初期設定を行う(Gitをインストールしたらパソコンに入ってます)

Git Bashを実行すると、下記のような真っ黒な画面が立ち上がります。

Git Bashの実行画面

まず準備編の②の資料にあるGitの初期設定(ユーザー名・メールアドレスの設定)をします。

 

ディレクトリの作成・移動

make directory ディレクトリの作成

$ mkdir portfolio

→portfolioというディレクトリを作成する

 

Change directory ディレクトリの移動

$ cd portdolio

→portfolioというディレクトリに移動する

ここまで完了すると下記のような画面になります。
※私は既にportfolioというディレクトリを作成していたのでエラーが出ているだけです

Git Bashの説明画像

Git Bashのタブの名前の最後がportfolioになりました。
今、portfolioというディレクトリのmasterブランチに移動している事になります。

ブランチ…更新した履歴の流れを分岐して記録できる
このブランチを複数作成する事で、複数人で同時進行で元のファイルから個々に変更や更新を行えます。

1人で更新してアップロードする分には、とりあえずmasterブランチだけでも十分だと思います。

 

③リモートリポジトリにアップロードする

自分のパソコン上に作成したportfolioディレクトリの中にファイルやフォルダを追加・更新します。

 

 アップロードするファイルを指定する

$ git add index.html

→index.htmlをアップロードするファイルに指定

 

更新内容をメッセージとして残す

$ git commit -m "index.htmlを追加"

→更新した内容のメッセージを " "内に記述

リモートリポジトリにもメッセージ内容が反映されるので、後で分かりやすいメッセージ内容にしてください。

 

リモートリポジトリにアップロード

$ git push origin master

→リモートリポジトリにindex.htmlファイルが追加される

Github上でちゃんとindex.htmlが追加されてるかどうか確認してみてください。

 

基本操作のまとめ

$ cd ディレクトリ名

$ git add フォルダ・ファイル名

$ git commit -m "メッセージ内容"

$ git push origin master

 

上記の4つの手順で、gitからgithubにアップロードする作業はできます。
まず更新したいディレクトリに移動する事を忘れずに...!移動していないのに、git add をしても、そんなファイル名ないですよ~とはじかれます...。

 

以上、初心者による初心者の為のGitからGithubにアップロードする方法になります。

Gitに関して勉強する際にいくつか記事を読んだのですが、単語の説明が多く、そもそも仕組みがよくわかってないのに、「これはこういう意味の単語で…」と覚えようとごちゃごちゃしすぎていたので、ほとんどGitに関する単語をいれずにブログにまとめてみました。仕組みがわかってから、これはこういう呼び方なんだと理解していってもいいと思います。

まだまだ私もGit初心者なので、記事内容についてその記述は間違ってない...?等ありましたら教えて頂けると助かります。

ここまで読んで頂きありがとうございました。少しでも誰かのお役に立てたら嬉しいです。