tontotakumi.com

web制作、Wordpress、料理、書評などを中心に、web制作初心者「tontotakumi」が作るブログ

[GitHubの使い方:画像付き] GitHubデビューが意外と簡単だった!!環境を作ってプッシュするまでの流れ

      2015/05/29

以前から気になっていた「GitHub」なのですが、黒画面を使うって聞いていて、ビビって触れてなかったのですが、今働いている会社で「GitHubの教科書」っていう本を買ってくれたので、とりあえずひと通り読んでみたら、黒画面を使かわずにできることがわかり、はじめてのGitHubをやってみました!!

GitHubにアカウントを作って、SourceTreeというGUIアプリをインストールすると黒画面を使わずにGitHubを使うことができちゃいます。今回は、GitHubで新規アカウントを作ってSourceTreeでClone(クローン)してPUSH(プッシュ)するまでの方法を忘れないように掲載しておきます!!

今回参考にした本「GitHubの教科書」

ネットを見ていると同じようなデザインの表紙の本を見ることがあったのですが、今回はじめて見ることになり読んでみたのですが、初心者の僕でもわかるぐらい簡単に書いてくれている本でした。3人のキャラクター(エキスパート、使ったことある人、初心者)が出てきてそれぞれの立場でいろいろ説明してくれます。実際に社内で出来る人に聞いている状況と同じ感じなので、状況を想像しやすくかなりわかりやすかったです。かなりおすすめの本ですよ。

GitHubのアカウントを作成する

まずはGitHubにアクセスしてアカウントを作成しましょう!
GitHub → https://github.com/

はじめてアクセスするとこんな画面が出てきます。ちなみに英語しかないようです。

GitHubの新規アカウント作成

GitHubの新規アカウント作成

GitHubアカウントの登録

右側にある「GitHubの新規登録」の部分に、自分の情報を入れて登録します。

Pick a username → ユーザー名
Your email → メアド
Create a password → パスワード

パスワードは、7文字以上で少なくても「1つの数字」「1つの小文字」を混ぜないとダメです!

すべての情報を入力して「Sign up for GitHub」をクリックするとプラン選択のページに移行します。

プランの選択

次にプランの選択です。それぞれのプランの違いは「非公開」のリポジトリをどのぐらい持つことが出来るかっていうのが違いですね。Large Planだと月50ドルで50個のプライベートリポジトリ(非公開)を持てて、Medium Planだと、月22ドルで20個のプライベートリポジトリを持つことが出来るって感じです。

最初は、無料のFree Planで大丈夫です。プライベートリポジトリは作れないのですが、必要になった時にプランを変更すればいいかと思います。

Planの一番下にある「Free」のところのボタンをクリックすると「Chosen」に変わるのでその状態で「Finish sign up」をクリックしましょう!

GitHubのプラン選択

GitHubのプラン選択

そうするとGitHub内に自分のリポジトリが作成されます。

GitHubのマイページ

GitHubのマイページ

グレーで隠している部分には、最初に入力したユーザー名が表示されます!

メールアドレスの確認をする

新規登録が完了すると、最初に入力したメアドに下記のメールが送信されてきます。

GitHub-mailverify

入力したメアドが正しいのか確認する流れです。(届いたメールがスパム扱いされちゃってますねww)
本文内にあるURLをクリックして、メール認証を完了させます。

クリックすると次の画面が出てきます。

Github-メアドの認証

Github-メアドの認証

表示されているメアドで間違いなければ右側にある「Confirm」をクリッククリック!

そうすると、下記の画面に変わりメアドの認証は完了です。

もし先ほどのメアド以外に追加したいものがあれば赤枠の中にメアドを入力して「Add」を押しましょう。

GitHub-メアドの追加

GitHub-メアドの追加

ここで、登録したメアドとパスワードは、あとで使うので覚えておきましょう(ログインで使うので忘れることはないと思いますがww)

SourceTreeをインストールする

GitHubのアカウントが作成できたら次は「SourceTree」を使えるようにします。

SourceTreeのダウンロード

まずは、SourceTreeのページに行ってファイルをダウンロードしましょう。

SourceTree → https://www.atlassian.com/ja/software/sourcetree/overview

自分のパソコンに合わせて右上から「Mac版をダウンロード」か「Windows版をダウンロード」を選択するか、左側にある「SourceTreeApp.comで無料入手」をクリックします。

SourceTree-ダウンロード

SourceTree-ダウンロード

今回は「SourceTreeApp.comで無料入手」をクリックしたら勝手にMacかWinか判断してページが出てきます。

SourceTree-ダウンロード(Mac)

SourceTree-ダウンロード(Mac)

めっちゃ目立ってる青いボタンをクリックします。(ダウンロードページに遷移するのですが、先ほどのMac版・Win版を選択した時と同じページのようです。)

ファイルの保存先が選択できるようになるので、好きなところに保存しましょう!

SourceTreeのインストール

ダウンロードが完了したら、SourceTreeの圧縮ファイルを開きます。
Macだと下記ウィンドウが出てくるので、左にある「SourceTree.app」をドラッグして「Applications」の上でドロップします。(初めてMac使った時は、これが何なのかよく分かってなかったですね〜。)

SourceTree-インストール

SourceTree-インストール

パソコンの設定によって、アプリを開いていいか出てくるので、「開く」を選択です!

アプリの認証

アプリの認証

インストールできたらSourceTreeを開いて初期設定を始めます。

SourceTreeにGitHubのアカウントを追加する(初期設定)

SourceTreeを開くと最初に「使用許諾契約に同意」の画面が出てきます。内容を確認して同意にチェックを入れて「続ける」をクリックします。

SourceTree-使用許諾契約に同意

SourceTree-使用許諾契約に同意

「SourceTreeの使用データを送信して・・・」の部分は好きなほうにして下さい。仕様データを送信することに、特に問題なければそのままで大丈夫です。

次にSourceTreeに先ほど作成したGitHubアカウントを追加します。
「ユーザーアカウント」をGitHubにして、GitHubの「ユーザー名・パスワード」を入力します。

SourceTree-GitHubアカウント追加

SourceTree-GitHubアカウント追加

そうすると「初めてのリポジトリをクローンする」と出てくるので、自分のパソコン内のどこにGitHubで使う情報を保存するか選択しましょう!
「コピー先」の右側にある「。。。」の部分をクリックするとファイルを参照で出来ます!

SourceTree-データの保存先

SourceTree-データの保存先

保存先が決まると下記の下記が出てくるので「新規リポジトリ」をクリックしてGitHubとつなげることになるのですが、一旦そのまま開いておいて下さい。

その前に、GitHubで新しいリポジトリを作成しましょう。

SourceTree-新しいリポジトリ

SourceTree-新しいリポジトリ

GitHubに新しいリポジトリを作成してクローンする

ここまでで、GitHubのアカウントを作成して、SourceTreeが使えるようになりました。これでやっと下準備ができたのでGitHubを使い始めていきます!!(ここまでがちょっと長かったですね。)

新しいリポジトリを作る

GitHubのマイページにいくと、右下に緑の「New repository」っていうボタンがあるのでクリック!

GitHub-newrepository

そうするとリポジトリの新規作成画面に行きます。ここで、これから作成する新しいリポジトリの「名前①」「リポジトリの詳細②」「公開/非公開の選択③」「READMEファイルを最初から作るか④」を決めていきます。

GitHub-新規リポの入力

GitHub-新規リポの入力

①「Repository name」・・・リポジトリ名。自分がわかりやすく覚えられるものにしましょう。
②「Description」・・・このリポジトリの説明。任意項目なので入れなくても大丈夫。
③「Public(公開)・Private(非公開)」・・・非公開は有料プランなので、プラン変更が必要です。
④「Initialize this repository with a README」・・・リポジトリ内に入れるREADMEファイルを最初に作っておくかどうか。最初は練習用にチェックを入れて作っておきましょう!(あとで使います!!)

必要な情報を入力したら、一番下の「Create repository」をクリックしてGitHubの中にリポジトリを作成しましょう!

GitHub-リポジトリ新規作成サンプル

GitHub-リポジトリ新規作成サンプル

これで新しいリポジトリが作成できました!

こんな感じで先ほど作ったリポジトリが表示されると思います。GitHubのページを見たことがあれば「あぁ〜〜これねぇ〜」ッてなるかと思います。

GitHub-リポジトリページ

GitHub-リポジトリページ

SourceTreeにGitHubのリポジトリをクローンする(関連付けするイメージ?!)

さて、新しいリポジトリがGitHub内に作成できたのですが、今の状態だとweb上にあるだけなので修正作業をすることが出来ないので、web上のデータを自分のパソコン内にもコピー(クローン)します。

そこでSourceTreeを使います。

さっき設定した後に、SourceTreeの画面を開いたままにしていたと思うのですが、「+新規リポジトリ」をクリックしてみてください。
そうすると「URLからクローン」が出てくるので、クリック・くりっく・click!

SourceTree-URLからクローン

SourceTree-URLからクローン

こんな画面が出てきますよね?

SourceTree-リポジトリをクローン

SourceTree-リポジトリをクローン

ここに情報を入れるとGitHubとローカルのパソコンを関連付け出来ちゃいます。

で、入れる情報ですが、先ほどのGitHubのリポジトリページの右下に表示されている「HTTPS clone URL」という部分。

GitHub-リポジトリページ

GitHub-リポジトリページ

ここのURLをコピーして、一番上(ソース URL)に入れましょう!

SourceTree-URLをペーストする

SourceTree-URLをペーストする

※ここでちょっとハマったのですが、GitHubからURLをコピーしてペーストしたのですが、左下に「ソースパス/ソースURLとして正しくありません」っていう表示が変わらないことがありました。どうやらコピペしたままの状態じゃURL(テキスト?)として認識しないことがあったので、「ソースURL」の中の最後の文字を削除してて入力で消したものを再入力したらうまくいきました!

「保存先のパス」は、初期設定時に選択しているので、自動的に出てくるかと思います。選択したフォルダ内に「名前」で入力したもので新しいフォルダが作成されます。
(もし表示されなかったら、自分で保存する場所を決めましょう)

全部入力したらクローンを押しましょう!!

SourceTree-リポジトリをクローン実行

SourceTree-リポジトリをクローン実行

完了するとSourceTreeの画面が開きます!

一番上の部分に「リポジトリ名」が表示されてますね!!

SourceTree-リポジトリ画面

SourceTree-リポジトリ画面

クローンしたファイルを修正してコミットしてみる

これで、環境が完成してリポジトリも作ることが出来たので、せっかくなのでちょっと使ってみましょう!

ローカルのファイルを修正する

SourceTree画面のど真ん中に「Finderで開く」って出てると思うのですが、それを押すとローカルのフォルダが開きます。
「Finderで開く」が出ていない場合は、左メニューの「作業コピー」をクリックすると「Finderで開く」が出てくると思います。

GitHubでリポジトリを作成する際に「README」ファイルを作るようにしたので、「README.md」というファイルが入っていると思います。これをテキストエディタで開きます。(僕はSublime使ってるのでそれで開く)

ファイル内には。リポジトリ名と詳細が入っているかと思います。このファイルはリポジトリの説明書みたいな感じですね。なのでテストで下記のように記述してみます。

READMEファイル入力

「##」を頭に入れると見出しになって、「*」を入れるとリストになるようです。

入力したら保存して下さい。

そうするとSourceTreeの画面が変わります。

修正ファイルをコミットする

左メニューの「作業コピー」をすると画面が3分割されています。

SourceTree-作業ツリーファイル

SourceTree-作業ツリーファイル

左下に先ほど修正した「README.md」ファイルが表示されています。そして右側には修正内容が表示されています。緑の部分は追加した部分ですね。ちなみに削除した部分は赤になるようです。

この状態だと作業ツリーの中にデータがあるのですが、これをコミットできるように左上の「indexにステージしたファイル」に移動します。やり方は簡単です。
左下の「README.md」ファイルをドラッグして、左上の部分にドロップするだけです。

SourceTree-dragdrop

ドロップするとファイルが移動します。

SourceTree-ステージングしたあと

SourceTree-ステージングしたあと

これでコミットする準備が出来ました。早速コミットしてみましょう!!

コミットをクリックすると、パッと見何も変わってない気がするのですが、一番下に「コミット」のコメントを入力する部分が表示されてます!

ここは必須入力なので、あとで見て分かりやすいコメントを付けておきましょう!(理由はあとで分かります)

SourceTree-コミットのコメントを入れる

SourceTree-コミットのコメントを入れる

コメントを入れたら右下のコミットを押しましょう!!

画面が戻るので左メニューから「master」を押して下さい。
先ほどコミットしたものがコメントと共に表示され、上のメニューのプッシュに数字が表示されました。

コミットのコメントはこんな感じで表示されるので、いっぱい並んだ時にわかりやすくなるようにしておいたほうがあとで探しやすいです。

SourceTree-コミット完了

SourceTree-コミット完了

コミットしたファイルをプッシュしてみる

コミットしたことで、リモートにあるGitHubに修正を反映させる準備が出来ました。今の状態は自分のローカル(パソコン内)で修正ができただけでGitHubの中には反映されていないので、「プッシュ」することで、メインとなるGitHubにデータを反映することが出来ます。

先ほどのSourceTreeのプッシュボタンに数字が表示されたところをクリックしてみましょう!
そうすると、どこにプッシュするか選択する画面が出てきます。

SourceTree-プッシュする

SourceTree-プッシュする

最初のこの状態ではそのままOKで大丈夫です。
そうすると、GitHubにアクセスするためのログインのような画面が出てくるので、GitHubのアイパスを入力して下さい!

SourceTree-GitHubのアイパス入力

SourceTree-GitHubのアイパス入力

OKした後にGitHubのマイページにアクセスすると、先ほどコミットしてプッシュしたものが表示されてます!ちゃんとリモート(GitHub)に反映されました!!

GitHub-プッシュ後の画面

GitHub-プッシュ後の画面

これで、完了です。あなたも私もGitHub使いになれましたwwwww

GitHubデビューのまとめ

GitHubは黒い画面を使って、難しいことをやるイメージだったのですが、思ってた以上にすごく簡単にGitHubを始めることが出来ました。ネットで探していると僕がわかるようなひと通りの流れがなかったので、GitHubをやってみたい(というか、仕事でファイルの上書きし合いがあったので必須)と思っていたのですが、1冊の本に出会えたおかげでかなり簡単に作業して使いはじめることが出来ました。

まだ、今の状態だと1人で使っている状態なので、これからは数名でGitHubを使っていきいろいろ覚えていくことがまだまだあります。本を読むと、wikiやissue、Gistなど便利なものがたくさんあるようです。

実際に使い込んで、今後の作業を便利なものにしていきたいですね!!!

最後にもう一度、今回かなり役立った本です!!なんでもやり始めてしまえばどうにかなるものですが、やり始める時が大変です。この本を読むとGitHubの基本的なことがかなりわかりやすく記載されているので、まだGitHubをやったことがないここまで読んでくださった方に、すごくおすすめします!

 - web制作

広告

広告

Comment

  1. […] ここが圧倒的にわかりやすい。 特に環境とかにこだわりがないなら、この通り進んだらいいと思う。 […]

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

no image
ナビメニューに投稿で作成したカテゴリーを任意で選択して表示(追加)する方法

ヘッダー下のナビメニューにカテゴリーを入れる方法 ある程度ページの制作が進んでく …

無料ウェブサイト作成サービス”WiX”を使ってみた

「WiX」っていう無料ウェブサイト作成サービスを知っていますか?以前、Jimdo …

BackWPupがメニューに追加
WordPressで作ったブログをDBごと自動でDropboxにバックアップするプラグイン「BackWPup」

WordPressでブログを作り始めてから半年以上経ってきたんですが、そういえば …

加工後の状態
YoutubeやGoogleMapの埋め込みをWordPressのレスポンシブデザインに最適化する方法

Youtubeの動画やGoogleMapをブログに掲載するときに、インライン(i …

Th-MakerXアイキャッチ
Macで画像をまとめてリサイズするときに便利な「Th-MakerX」を入れてみた(無料で)

WindowsからMacに乗り換えてから色々と必要なソフトが出てきました。ブログ …

表示設定
htmlで作られているサイトをWordPressに作り変える時、index.htmlを残したまま裏で制作する方法

htmlで運営しているサイトをWordpressに作り変える際に、サイトの運営を …

Identity Mask(Chromeウェブストア)
Googleアカウントなどを複数同時に見たいときに使える拡張機能「Identity Mask」

スマフォで時間があるときによくGunosyを見ているんですが、昨日見た記事で以前 …

Role追加
WordPressで複数の会員が独自のページを作成し、内容を管理・更新できるようにする方法。→プラグイン「User Role Editor」を使う

WordPressで情報サイトを作ることになったんですが、会員が自分でログインし …

no image
3ステップで、簡単にサイドのカラムにGoogle Adsenseを入れる方法

右サイドのウィジェットにAdsenseを入れて、カラムの幅を調整 ブログにGoo …

デフォルトのアイキャッチ
wordpressのアイキャッチ画像をリサイズする方法(初心者向け)

これも前から気になっていたものの一つで、トップページに表示されるアイキャッチ画像 …