【完全初心者向け】GitHubにソースコードをアップロードする手順

CODE

この記事は「GitHub」を使ったことがない、完全初心者の方のための解説です。

まずは実際に触ってみて、ざっくりと理解しましょう。

この記事でわかることは、以下の通りです。

  • 「Git」のインストール方法
  • 「GitHub」へのアップロード方法
  • 「GitHub」からダウンロード → 再アップロードの方法

この記事を書いている私(わや@wayasblog)は、どうしても「GitHub」にアップロードができす、諦めかけていました。
※原因は、Gitをインストールしていなかったからでした…

私のような完全初心者の方でも、この記事通りに進めていけばできるはず。
ぜひ、諦めずに頑張っていきましょう!

スポンサーリンク

「Git」をインストール

「GitHub」を使うには、「Git」のインストールが必須です。

私はここがわからずに苦戦していましたが、偶然見たYouTube動画に救われました。
「点と点がつながった」という感じですね。

人生逆転サロンのかみざとよしとさん(@yoshito410kam)に感謝です。

前置きはさておき、「Git」のインストール方法です。

「Bitbucket」のサイトに詳しく書かれています。
»「Bitbucket」の「Git」インストールページ

「Bitbucket」の「Git」インストールページ

「Install Git with Homebrew」とあります。
つまり「Git」のインストールには「Homebrew」をインストールする必要があるということですね。

なのでまずは「Homebrew」をインストールしましょう。
»「Homebrew」インストールページ

「Homebrew」インストールページ

ターミナルを開き、下記を打ち込むだけOKです。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

完了したら、「Git」をインストールします。
»「Bitbucket」の「Git」インストールページ

「Bitbucket」の「Git」インストールページ②
brew install git

「Git」がインストールされてかを確認してみましょう。

git --version

「Git」がインストールされていると、下記のようにバージョンが表示されます。

「Git」がインストールされているとバージョンが表示される

これで下準備は完了です。

「GitHub」にアップロード

ではさっそく「GitHub」にアップロードしていきましょう。

事前に「GitHub」のアカウントは作成しておいてくださいね。
» GitHub

まずは右上の「New repository」をクリック

右上の「New repository」をクリック

「Repository name」に名前を入れ、画面下の「Create repository」をクリック

「Repository name」に名前を入れ、画面下の「Create repository」をクリック

こんな画面になればOKです。

新規リポジトリを作り、中身がからの状態

ターミナルに戻り、アップロードしたいフォルダの場所に移動します。
フォルダ名を入力するか、ファイルをドラッグ&ドロップしましょう。

cd [フォルダ]

リポジトリを新規に作成します。

git init

インデックス(保存する対象を登録するための場所)にファイルの更新を反映します。

“.”は「ファイルすべて」という意味です。

git add .

現在の状態を確認してみましょう。

git status

以下のように表示されればOKです。

index.htmlをcommitした状態

どういう変更を行ったのかを””(ダブルクオーテーション)で囲んで書いておきます。

git commit -m "first commit"

次に、「origin」という名前に対して[URL]を関連付けさせます。

git remote add origin [URL]

最後にリモートリポジトリにアップロード(プッシュ)します。

git push -u origin master

ここまでできたらリロードすると、「GitHub」にアップロードできています。
お疲れさまでした!

リロードすると、「GitHub」にアップロードできている

ちなみに「Add a README.md」をクリックして、

「Add a README.md」をクリック

そのサイト・ツールの説明や使い方も書いておきましょう。

参考までに、「jQuery」のREADME.mdは下記のようになっていますよ。
» jQueryのREAD.md

「GitHub」からダウンロード → 再アップロード

アップロードしたらしっぱなしではなく、修正もしたいですよね。

直接「GitHub」上で編集もできますが、せっかくなのでローカルにダウンロードして、再アップロードまでをやってみましょう。

※修正したものだけをアップロードする方法です。

まずは、「Clone or download」を押してURLをコピーします。

「Clone or download」を押してURLをコピー

そして、下記をターミナルに打ち込みましょう。

git clone [URL]

するとローカルにダウンロードされるので、変更をします。
編集が終了したら再アップロードしていきましょう。

まずは先ほどと同じように、アップロードしたいフォルダの場所に移動します。

cd [フォルダ]

次も同じ。

git add .

次に、変更したファイル名をインデックスに反映します。

git add ****.html[変更したファイル名]

変更箇所がわかりやすいように、メッセージで書いておきましょう。

git commit -m "変更箇所"

最後にリモートリポジトリに変更を反映します。

git push

「GitHub」のページをリロードすると、反映されていることが確認できると思います。

「GitHub」のページをリロードすると、反映されていることが確認できる

「index.html」を開いてみて確認してみましょう。

「index.html」を開いて確認

これで完了です。お疲れさまでした\(^o^)/

【まとめ】GitHubにソースコードをアップロードする手順

今回は自分の頭を整理するためにも、以下の解説をしました。

  • 「Git」のインストール方法
  • 「GitHub」へのアップロード方法
  • 「GitHub」からダウンロード → 再アップロードの方法

過去の私と同じように、「GitHub」で悩んでいる人の参考になれば嬉しいです。
私も「GitHub」にアップする時は、この記事を見返すことになると思います。

ただ、もっときちんと理解を深めたい方は、本で勉強するのもありです。

私は「Web制作者のためのGitHubの教科書」で勉強しました。

この本では、黒い画面(ターミナル)に苦手意識がある人でも、「SourceTree」というもっと直感的に触れるツールを使っているので、わかりやすいかもしれません。

ちなみにこの本は「Kindle Unlimited」の対象なので、お得です。
「Kindle Unlimited」はよくセールをやっていたり、初めて使う方は30日間無料で利用できますよ。

「Kindle Unlimited」に登録する

キャンペーン情報に関しては、以下の記事で解説しています。

それでは今回は以上です。最後までお読みいただき、ありがとうございました。

最後に宣伝

ココナラで、コーディングの相談を受け付けています。

  • CSSが上手く作れない
  • JavaScriptが思ったように動かない
  • ブログのデザインを修正したい
  • 勉強中でわからないところがあるから教えてほしい

このようなお悩みを解決していますので、「こんなの解決できる?」ということがあったら、ぜひ質問だけでも以下のリンクよりどうぞ。

HTML / CSS / JSのお悩みを解決します コーディングでお困りの方はお気軽にお問い合わせください! | Webサイト修正・カスタム・コンサル | ココナラ
HTML / CSS / JavaScript(jQuery)のお悩み相談、ご質問を受け付けます。「CSSが上手く作れない」「JavaScriptが思ったように...

コメント

  1. yuuu より:

    git remote add origin [URL]
    ここでのURLはどのURLを指定したらいいのでしょうか?
    また[]を書く必要はありますでしょうか?

    よろしくお願い致します。

タイトルとURLをコピーしました