Sourcetreeのインストール〜ローカルリポジトリ〜リモートリポジトリ作成まで [忘備録]

##Sourcetreeとは
GitをGUI(グラフィック・ユーザー・インターフェース)で扱う事ができるクライアントツールのこと。
Gitとは`プログラムのソースコードなどの変更履歴を記録・追跡するための分散型バージョン管理システム`のこと。
GUIとは端的にまとめると`マウスや指などでポチポチ操作できる画面`のこと。

##実際にインストールしてみる

### 手順
1. Soucetreeの[公式HP](https://www.sourcetreeapp.com)からインストーラをダウンロードします。
![sourcetree.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/df713c05-4cb7-7893-5899-2731abdee5eb.png)
1. 『Bitbucket』を選択し、Atlassianのアカウントを作成する。
![sourcetree_install_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/ec40beb5-bcbb-d24a-0b04-e9e6508fbed2.png)
1. 『アクセスを許可する』を選択し、『次へ』で進めていく。
![sourcetree_install_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/1a0d8bde-9283-0867-ff8f-2029f3ea163a.png)
1. __Preferences__ の『この詳細をすべてのリポジトリに使用する』にチェックを入れる。
![sourcetree_install_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/16d4bc6b-d1ab-3c27-f8b5-1e2cf2a2a221.png)
1. インストールが完了すると __SSHキーを読み込みますか？__ と表示されるので、『いいえ』を選択する。
![sourcetree_install_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/13657f7e-7759-8b81-d584-7339b705a6d0.png)

##既存のローカルリポジトリを設定する
ではローカルリポジトリの設定を行っていきます。
### 手順
1. Soucetreeのアプリを起動させる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605741/c3df0a07-1d20-a24b-53d3-8b0dcef0afda.png)

1. 左上で「ローカル」を選択し、フォルダーをドラッグ&ドロップする。
 因みに「リモート」の横にある「新規...」を押下し、「既存のローカルリポジトリを追加」でも可。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605741/ab3b12e0-9b0e-0dc3-d90a-887408a4b763.png)
1. 今回はLaravelのプロジェクト「sample」を作成しました。
「保存先のパス」と「プロジェクト名」が表示され、「タイプ」をGitに設定して「作成」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605741/9ae94945-6836-b944-fa18-fcf5f62770cf.png)
1. 上手くいくと、先ほどのSourcetreeの画面がこのように変化します。(下記画像参照)
これでひとまずローカルリポジトリの設定は完了しました。
既にデフォルトで生成される「master」ブランチへの差分が87ファイルある事が確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605741/9b5a47a5-0eaf-aca3-95a5-3b3283f36f6f.png)

##リモートリポジトリの作成
次にGitHubで管理する、リモートリポジトリの作成を行います。
### 手順
1. WebブラウザのGitHubページに移動し、新しいリポジトリを作成するために「Repositories」から「New」をクリック。(ご自身のプロフィール画面から作成できます。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605741/9a606ba9-922d-5035-8952-ff0032f2206f.png)
1. 「Repository name」に任意の名前を入力できるので、今回は先ほど作成したプロジェクト名と同じ「sample」を適用。
個人用なので今回は「Private」を選択( Publicでも可 )し、ページ下部にある「Create repository」をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605741/559af43e-4ea0-f196-4083-4106570b94e0.png)
これでリモートリポジトリの作成は完了しました。

##ローカルリポジトリとリモートリポジトリを紐付ける
最後に冒頭で作成した「ローカルリポジトリ」と先ほど作成した「リモートリポジトリ」を紐付けていきます。
### 手順
1. Sourcetreeのアプリに戻り、ヘッダータブの一番右にある「設定」をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605741/61eaa3b8-7f1c-2b94-8fad-b0bba8f8a97d.png)
1. 「リモート」タブに切り替え、リモートリポジトリのパス入力画面へ遷移させる。(下記画像参照)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605741/c99ee79d-3002-afa2-18f1-2d1be2ec4364.png)
1. 左下の「追加」をクリックし、リモートリポジトリの必須情報入力画面へ遷移させる。(下記画像参照)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605741/f54e2f6e-0d3c-acdf-a651-6e04d64aea7b.png)
1. 「リモートの名前」には先ほどGitHubで作成したリモートリポジトリ名( 今回はsample )を入力する。
1. 「URL/パス」にはGitHubで先ほど作ったリポジトリのURLをコピー&ペーストする。一番右に表示されているノートのようなアイコンをクリックするとURLを全文コピーできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605741/754e6ec5-e65e-1e61-6fec-f5763ff8258a.png)
1. 必須情報の下にある「オプションの拡張統合」という部分で、「ホスティングサービス」が「GitHub」に切り替わっていることを確認して下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605741/d7ee347f-db70-d511-86a2-32f9a0ed92d1.png)
1.  「OK」を押下します。
1.  先ほどのリモート表示画面に、「名前」と「パス」が表示されていれば上手くいっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605741/eb7166d0-9a27-23dd-bde4-6e455d784812.png)
1. 「OK」を押下します。
1. 後は今の差分をコミットして、リモートリポジトリへプッシュしてあげれば完了です。<br>
お疲れ様でした。