見出し画像

GitHubとSourcetreeを連結させる

私はデザイナーなのでGitとかSourcetreeとかターミナルとか

この言葉が恐怖でしかありません。

が、わかりやすく教えてもらうとなんとなく概要を理解できたので図解を使って説明とともに自分メモをとっておきます。


まずはGitとSource treeの説明

既知の方はGitとSource treeの連結方法へスキップしてください

Gitとは

共同編集できるようにしたバージョン管理ツール

画像1

masterというプロジェクトに人たち全員が見れる本番用のデータがり

そこに複数人で同時に作業して完了した人からmasterにデータを入れていく(マージ)

master(本番)用のデータを触ってミスしたら大事なのでbranchという自分専用作業部屋を作る

そこで作業した内容が全て完了したらmasterと結合していく(マージ)


こういう作業システムのことをGitといいます


画像2

Gitで管理しておけば、誰かがミスした作業を戻したり

どこかでやった作業を後から引っ張って来る(コミット単位)も可能


コミットは自分のローカル作業できりの良いタイミングで行います

先ほど記載した通り、

将来的に一部のコミットだけ使いたいとなることも想定してコミットすると良いらしいです


デザインでいうと

1. Headerを作る箱を用意

2. リンクを作成

3. テキストを載せる

4. アイコンを載せる

などでコミットしておけば

4のアイコンのコミットだけを後から変更したりできるらしいです(Cherry pick)

Source treeとは

画像3

Gitシステムを使うにはmacだとターミナル

いわゆるCUI(textでPCを動かす)で使うことができますが、

黒い画面に文字羅列しててデザイナーからするとめちゃくちゃ近寄りがたい


じゃ、グラフィック使ってCUI(text)をGUI(グラフィック)に変えてしまおう!

と出てきたのがSource tree

なのでゴリゴリターミナルを使える人はSource tree入れなくていいんですが

右脳で生きてきた人間からするとビジュアル化してないと頭に入ってこないもの


これがGit(システム)とSource tree(Gitを使うためにGUI化されたツール)の関係です


GitHubやGitLabとは?Gitと何が違う?

端的に言うとGitは管理をするシステム全体の名称

GitHubやGitLabはGitシステムをより使いやすくしている企業が出しているツールのことです

画像4


さて、ようやく本題です


GitとSource treeの連結方法

ざっくりと流れだけ書くとこんな感じです

1. 公開鍵と秘密鍵を作る

2. [Github]に公開鍵を登録

3. ターミナルから秘密鍵でアクセスする

4. sshで通信している状態を確認

5. Sourcetreeを開く

6. 環境設定>アカウント>追加>Github>アカウント接続


1. 公開鍵と秘密鍵を作る

もし鍵を作っていない方はターミナルを使ってssh Keyを作成する必要があります

これは他のページでもよく紹介されているのでスキップさせてください

2. [GitHub]に公開鍵を登録

次に使いたいGitツールに登録します

今回はGitHubに登録しました

GitHubアカウント登録後 setting > sshに自分のローカルで作ったKeyを登録します

スクリーンショット 2020-06-16 19.21.26

この時の手順としてまず

1. ローカルにある.sshのフォルダを開く

2. 鍵には2種類あります

id_rsa.pub  公開鍵(みられても大丈夫な鍵穴の様なもの)
id_rsa  秘密鍵(見せてはいけない鍵の本体のようなもの)

※Public(公式)のpubがついているものが公開して良いものです

3. 公開鍵はテキストデータなので中身をコピー

4. コピーした公開鍵を「GitHub」にペーストして登録


となります

まずはFinderに.sshファイルを表示させます

.sshとは鍵の入ったファイルでなるべく外から見えなくなっているのでFinderでパッと探しただけでは出てきません

ターミナルを起動

これは諦めてください(簡単なので安心を)

cd ~/.ssh

とコマンドを入れてEnterを押します

意味は

cd = 移動
~/ = ホームディレクトリ(PCの名前の直下のディレクトリ)
.ssh = ホームディレクトリ下位の.sshフォルダ

これで今あなたは.sshフォルダの中にいます

わかりませんよね?

では

open .

と打ってみてください

するとFinderが開きます

open . = 今いるディレクトリをFinderで表示

という命令をターミナル上でしたので、晴れて.sshフォルダの中身が見れています

もし見れない人は

・.sshフォルダがない(名前が違う・違うディレクトリに作っている)

・ssh keyを作成していない

などが考えられます


ここで表示した、id_rsa.pubをテキストエディタなどで開きすべての文字列をコピーします

その後GitHubのssh Keyの登録画面に貼り付けて登録をすれば完了

3. ターミナルから秘密鍵でアクセスする

先ほど公開鍵(鍵穴)をGitHubに登録しましたが

秘密鍵(鍵本体)が通るのかを試す作業です

ターミナルで下記コマンドを打ちます

GitHubに登録した方はこちら

ssh -T git@github.com

下記の様に successと言う文字が出ていれば

無事秘密鍵を使ってGitHubにアクセスしている状態になります

スクリーンショット 2020-06-16 19.37.27

5. Sourcetreeを開く

次にSource treeとGitHubを連結させます

1. まずはGitHubからリポジトリを作成

リポジトリとはプロジェクトフォルダの様なものなので、今回作りたいプロジェクト名で作成

もしすでにプロジェクトがある方はそのままプロジェクト内に入ってください

2. リポジトリに入ると右端あたりにCloneのボタンがあります

スクリーンショット 2020-06-16 19.39.28

3. ここで SSHのURLをコピー

4. 次にSource treeを立ち上げます

5. TOPメニューの新規をプルダウンし、URLからクローンを選択

スクリーンショット 2020-06-16 19.43.17

6. ソースURLに先ほどGitHubでコピーしたCloneのURLを貼り付けます

スクリーンショット 2020-06-16 19.43.27

7. 保存先のパスは自分がファイル管理したい場所を選択

8. 名前はリポジトリがわかりやすいものをつけてクローン


以上でSource treeを使ってGitHubにアクセスする連結が終わりました


あとはPullしてデータを落としてきたり

Pushしてデータをあげるのですが

なぜかPushがうまくいかない状態になってます


sshの通信がうまくいってないとかファイルを一気に上げすぎることなどが原因でよくあるようですがまだ解消されず、、

今後解消したらまた記載していきます


それではこの辺で

この記事が気に入ったらサポートをしてみませんか?