SourceTreeのインストール方法最新版。GITHUBとつなぐとこまで詳細解説。

更新日:

SourceTreeのインストール方法2020最新版。GITHUBとつなぐとこまで詳細解説。

ここでは、GITを見える化してくれて、コマンドを打たずに使えるツールであるSourceTreeのダウンロードからインストール、GITHUBとつなぐまで初期設定までを図入りで初心者でも完全にできるように解説していきます。

 

まず、SourceTreeをインストールする前に先に用意が必要なものがあります。

  1. GITをPCにインストール
  2. GITHUBアカウント

この2つが必要です。

Git for windowsのインストール方法2020最新版。画像付きで初心者向けに解説

GITHUB無料アカウントの作り方2020最新版。初心者向けに図入りでやさしく解説

GITとGITHUBとは?全く分からない初心者向けに図入りでやさしく解説!

 

この2つが用意できたら、SourceTreeのインストールを始めます。

 

SourceTreeのインストール方法、手順。

まずは、SourceTreeの公式サイトに行き、SourceTree本体をダウンロードします。

Download freeを押すと、

こういうのが出るので、チェックを入れて、Downloadを押します。

ダウンロードしたexeファイルを起動します。

(ちなみに、SourceTreeは、今後起動する時に毎回このexeをクリックして起動します。なので、捨てちゃダメです。まぁ、まんがいち捨てちゃっても、新しいのをインストールすれば、設定なしで起動できますけどね・・)

 

起動すると、この画面が出ます。ここでBitbucketをクリックしてください。

Bitbucketをクリックする事で、Bitbucketアカウントを作ります。注意書きに書かれている通り、SourceTreeはBitbucketアカウントを作らないと使えません。なので、Skipせず、アカウントをここで作ります。

Bitbucketは、Githubとほぼ同じサービスを提供している別の会社です。SourceTreeを作ってる会社のGitバックアップサイトです。
Neby

 

SourceTreeを使うために、Bitbucketのアカウントを作成

ブラウザが自動的に開いて、Bitbucketのサイトに飛ぶので、アカウントを作ります。

どれを使ってもいいです。とりあえずこの例ではGoogleで続行します。

 

確認画面が出るので、アカウントを作成をクリックします。

 

Bitbucket用のユーザー名を自分で考えて入力し、続行を押します。

 

ちょっとしたアンケートが出るので、答えてもいいし、スキップしても良いです。

確認画面が出たら、アクセスを許可するを押します。

これで、アカウントに自動でログインします。

 

もし万が一、下のようなエラー画面が出たら、

画面内左上にある戻るボタンを数回押して、画面を戻っていくと、上の確認画面が出ます。もしくは、ブラウザをリフレッシュするのも効果があります。

Neby

 

ここまで済んだら、SourceTreeのインストーラー画面に戻ってください。

無事ログインが完了した場合、次に進めるようになります。なぜか進めない場合は、ブラウザに戻って更新ボタンを押して、ちゃんとログインできてる事を確認してください。

 

無事Bitbucketのアカウント作成が完了しました。Nextを押します。

 

SourceTreeのインストール手順の続き

この画面では特に何もチェックせずにNextでOKです。

 

次にAuthor NameとAuthor Email Addressというのが出てきます。

これに関しては、実際にGITHUBにアップロードした際、アップロード主として表示される名前になります。(メールアドレスは表示はされませんが)。

なので、Githubアカウント名と同じでもいいですし、違う名前を考えてもOKです。
メールアドレスに関しても、GithubやBitbucketと同じものでも違うものどちらでも大丈夫です。

 

次のこれは「No」を選びます。

 

というわけで、SourceTreeのインストールは完了です。

引き続きこの画面からGITHUBとSourceTreeをつなぎます。

 

GITHUBにSourceTreeを接続する

さて、なんでSourceTreeをインストールしたかというと、PCにインストールしてあるGITを使って、GITHUBとやり取りするためですよね。

 

GITを使ってPCからサーバーにサイトをコピー

図のように、ファイルをやり取りするためにも、
まずはGitHubとSourceTreeを接続します。

 

Remoteタブから、Add an accoutをクリックします。

 

Hosting ServiceでGitHubを選び、下図のように入力します。


AuthenticationはBasicにしてください。
Username欄には、GitHubアカウントのユーザーネームを入れます。

ユーザーネームが入力できない状態の場合は、Refresh Passwordを押すと入力できるようになります。同時にPassword欄も現れると思うので、GitHubでログインに使ってるパスワードを入力して、OKを押します。
Neby

 

これでひとまず、GithubアカウントをSourceTreeに加える事が出来ました・・が、まだGitHub側のリモートリポジトリとつながってるわけじゃありませんので、やり取りする流れを説明しますね。

 

SourceTreeでGITHUBにファイルをアップロードするまでの、リポジトリの設定方法

今度は、Localというタブを開きます。

そしてPC上にあるローカルリポジトリに設定してあるフォルダをドラッグします。

 

ちょっと待って、ローカルリポジトリがあるフォルダって何よ?
君がGITを使ってアップロードしたいファイル達が入ってるフォルダだね。といっても、ローカルリポジトリとして先に設定してある必要があるよ。やり方を説明するよ。
Neby

ローカルリポジトリ設定のやり方。

ローカルリポジトリというのは、GITHUBとファイルをやり取りするためのフォルダです。

まず、フォルダを1つどこでもいいので作成してください。

そして、コマンドプロンプトを立ち上げます。

もし、あなたがDドライブにフォルダを作った場合は、D: と入力してEnterをまずします。

次に cdという移動コマンドを使って、フォルダ内に移動します。

実際にそのフォルダを開いて、パスをクリックしてコピーするのが簡単です。

私の場合だったら、cd D:\website と入力してEnterです。

無事移動したら、git init と入力してEnterすれば完了です。

 

View、Hidden items にチェックを入れると、.gitというフォルダが出てきます。この.gitフォルダが入ってるフォルダがローカルリポジトリって事です。

じゃあ、SourceTreeの操作に戻りましょう。

 

SourceTreeでローカルリポジトリを設定する続き

今設定したローカルリポジトリファイルをドラッグします。

 

すると、メイン画面が開きました。

フォルダに何かファイルが入ってれば、Unstaged filesというところに表示されます。

 

SourceTreeのリモートリポジトリ(Github)との接続設定

さて、今度は、リモートリポジトリを設定します。

Remoteというボタンを押すと、まだ設定してないよという警告が出るので、Settingsを押します。

 

Addを押します。

 

この画面が出てきたら、Remote name に origin と入力します。
URL/Pathのところなんですが、gitのリモートリポジトリのアドレスを入れます・・って言ってもあなたはまだリモートリポジトリを作ってないかもしれません。

ない場合は、作りましょう。

 

GitHubでリモートリポジトリを作る

GitHubにログインしてください。
そしてニャンコみたいなマークを押すと、マイページに飛ぶので、そこでRepositoriesのNewボタンを押します。

 

出てきた画面で、適当にRepository nameを付けます(サイト名とかアプリ名が良いです)。

他の人に公開したくない場合は、Privateを選んで、Creat repositoryを押せば完了です。

 

出てきた画面のアドレスをコピーしてください。

 

SourceTreeのリモートリポジトリ作成の続き

さっきの画面のURL部分に今コピーしたアドレスをペーストします。

Remote AccountはGitHubのアカウントを選んで、OKを押します。

 

以上で設定は完了です。

これで、後は、Add, commit Push などの操作をSourceTree上でポチポチとボタンを押すだけでできるようになりました。

実際、このSourceTreeを使ってGITにバックアップを取る方法を下の記事で解説してるんで、
さっそく実戦してみてくださいね↓

GitのCommitとは?AddやPushとの違いは?初心者向けに図解でやさしく解説!

 

写真で血圧記録

  • この記事を書いた人

Neby

本を毎日多読しつつ、資産運用、プログラミング、心理学、ネットビジネススキルを猛向上中。貧富の差が広がる5年後、10年後に安心生活を送るためのお金のリテラシー、スキル、資産を一緒に作っていきましょう。

-Git入門初心者向け