【導入手順】Atomとgithubを連携させよう

複数人と分担してコーディングを行う際はGITを利用することで
先祖返りや作業の重複を防ぐことができます

実務で利用して便利でしたのでまだ利用していない方のために導入手順をご紹介します

今回の前提

・エディタ:Atom
・Githubのアカウントを取得済
・Mac:10.15.4

Githubでリポジトリを作ろう

Repositoriesの横にあるNEWボタンをクリックします

01 NEWボタン押す

Repository nameにリポジトリの名前を入力します。
また今回はPublicに設定しましたが非公開にしたい場合は
Privateを選択してください

02 リポジトリ作成

リポジトリが作成されました
HTTPSの欄にある〜.gitを控えておきましょう。

03 githug リポジトリ1

ローカルでリポジトリのデータを取得しよう

リポジトリのクローンを保存するディレクトリを作成します
注)中身は空にすること

03 githug リポジトリ2

Atomでコマンドパネル(⌘+Shift+P)を開き【github:clone】と入力します
Clone fromにHTTPSの欄にあった〜.gitを入力します
To directoryには上記で作ったディレクトリのパスを入力します

05 githubでcloneを実行1

リポジトリの取得ができました

06 clone成功

リポジトリにデータを追加しよう

Githubへ追加したい画像データをローカルのディレクトリに保存します

07 追加したいデータを設置

Atomのツリーに反映されました
なおデータに変更があった場合ファイル名の文字色が変化します
・データ未変更  :白
・データ変更・追加:緑
・データ削除   :赤

08 atomに追加された画像の色が変わる

GitHubタブの操作

Atomの表示からToggle Git hub(Control+()を選択しGitパネルを表示します
GitHubタブの上部のセレクトボックスからリポジトリを選択します

09 githubのパネルからリポジトリを選択

リポジトリが選択されたことが確認できました

10 選択後

Gitタブの操作

Stage allをクリックしデータをステージングエリアに追加します

11 gitパネルを開く

ステージングエリアにデータが設置されました

12 staging allをクリッkう

追加するデータがどのような目的なのかを明記します
その後no branchをクリックし新しくブランチを作成します

13 コミットする

Pushを行いデータをGithubへ追加します

14 プッシュする

Githubにデータが追加されたことが確認できました

15 githubにプッシュされたことを確認