クモのようにコツコツと

Webデザイナー イイダリョウのブログ。略称「クモコツ」

GitHubとSourcetreeでGitHub Pagesとローカルファイルを同期させる

GitHubシリーズの続きです。前回、ブラウザ上だけでリポジトリを作ってWebページを作成しました。今回はローカル環境(SourceTree)にリポジトリをクローン(複製)し、そこで行ったコミット(更新)をGitHubにプッシュ(反映)します。さらにGitHubの静的サイト公開サービス「GitHub Pages」にも同期させます。それではまいりまShow!!

【目次】

※参考:前回記事
ブラウザ上だけでお手軽GitHub体験(リポジトリの作成と変更) - クモのようにコツコツと

Sourcetreeのインストール

ローカル環境とGitHubを連携するにはCUIGUIの2つの方法があります。

どちらでトライしたか悩んだのですが、のちのち黒い画面に移行するにしても比較対象としてGUI操作を知っているのは意味があると思い、まずはSourcetreeから始めます。GUIのため今の状態や操作対象がわかり、入りやすいと思われる。

※参考:Sourcetree | Free Git GUI for Mac and Windows

インストールの手順(Mac

※参考:SourceTree for Mac インストールから初期設定の手順 | Glatch(グラッチ) – 夫婦で活動するフリーランスWeb制作ユニット

ただし、私の環境では「Atlassian」ではなく「Bitbucket」(Sourcetreeの会社が運営するGit)のアカウントを作れ、と言われたんですよねー(?)

※参考:Bitbucket登録からSourcetree連携まで(MacOSX向け) - Qiita

GitHubリポジトリとの連携

こちらの記事がシンプルでわかりやすく、概ねこの流れでやりたいことが実現できました!

※参考:【カンタン解説】Github と Sourcetreeを連携してGitを理解する - Qiita

下記の手順になります。

これでGitHubリポジトリがローカル環境の指定した場所にクローン(複製)されます。 f:id:idr_zz:20181226205153j:plain ファイルはリードミーのファイルREADME.mdしかありません。

今回、私が行いたいのは以前(2014年)作ったポートフォリオサイトのGitHub Pagesへの移転です。

※参考:イイダリョウ ポートフォリオ
イイダリョウ|神奈川県に住むWebデザイナー *1

こちらがFTPソフトからダウンロードしたファイル一式です。 f:id:idr_zz:20181226202901j:plain

一方、先ほどGitHubからクローンしたフォルダにポートフォリオのファイルも追加します。 f:id:idr_zz:20181226203419j:plain

Sourcetreeのコミット(更新)アイコンをクリックしコミットの説明文を入れるとファイルが追加されます。 f:id:idr_zz:20181226205218j:plain

そしてSourcetreeのプッシュ(反映)アイコンをクリックすると… f:id:idr_zz:20181226205235j:plain

GitHub本体にローカル環境のコミットが反映されます!! f:id:idr_zz:20181226205657j:plain

ちなみにSourcetreeの「プッシュ」の隣にあった「プル」はGitHub本体上のコミット(更新)をローカル環境に反映させます。これで複数のローカル環境での作業や複数人の共同作業における差分(バージョン)管理ができるわけです!

GitHub Pagesとの連携

次に、GitHubの静的サイト公開サービス「GitHub Pages」にこのサイトを公開したい。

※参考:GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.

こちらの記事がとてもわかりやすかったです!(昔はもっと大変だったんですかね?)

※参考:GitHub Pages を使った静的サイトの公開方法が、とても簡単になっていた | Tips Note by TAM

下記の手順になります。

  • GitHub:「Settings」>「GitHub Pages」>「Source」で「master branch」を選択
  • GitHub Pages:所定のURLにアクセス

URLは https://ユーザまたは組織名.github.io/リポジトリ名 となります。

私のページの例でいうとこのようなURLになります。

https://ryo-i.github.io/i-ryo_portfolio

※参考:イイダリョウ|神奈川県に住むWebデザイナー

表示されました!! f:id:idr_zz:20181226210623j:plain

GitHub Pagesとローカル環境をシームレスに同期する!

最後に、GitHub Pagesとローカル環境が同期していることを感じ取るために、ページの一部を更新してみましょう!

仕込みネタというわけではありませんがw、たまたまテキストに誤記を発見したのでそこを修正してみます。

こちらのモーダル上の説明テキスト「2013年」は「2014年」が正解です。 f:id:idr_zz:20181226211246j:plain

ローカル上のhtmlファイルを修正します。 f:id:idr_zz:20181226211555j:plain

ファイルを保存するとSourcetreeの画面が下記のように変わります。 f:id:idr_zz:20181226212250j:plain

  • 左上の「コミット」アイコンに「1」という印がつきます。(変更あり)
  • 「Uncommitted changes」 はコミットしていない変更がありますという意味
  • 右下にはindex.htmlの変更内容が。赤が変更前、緑が変更後です。

「コミット」アイコンをクリックするとコメント欄が表示されるので変更内容を入力し左下の「コミット」をクリック。 f:id:idr_zz:20181226212642j:plain

今度は「プッシュ」アイコンに「1」と印がつきます。 f:id:idr_zz:20181226213047j:plain

「プッシュ」アイコンをクリックするとウィンドウが立ち上がります。 f:id:idr_zz:20181226213304j:plain

  • プッシュ先のリポジトリのURLを確認
  • ブランチ(分岐)名確認(今回は本流なので「master」から「maseter」へ)
  • 問題なければ右下の「OK」をクリック

GitHub本体にコミット(更新)がプッシュ(反映)されます。完了すると「プッシュ」アイコンの「1」は消えます。

GitHub本体のリポジトリをリロードすると… f:id:idr_zz:20181226213618j:plain なんということでしょう!コミットがプッシュされました!

そしてそして、GitHub Pagesのページもリロードすると… f:id:idr_zz:20181226213917j:plain やた!!こちらにもGitHubへのプッシュが反映されています!

最後に

ということで、SourceTreeとGitHubGitHub Pagesの連携が成功しました。と、同時にポートフォリオのお引越しもね。

ローカルのHTMLを修正してFTPソフトでファイルをアップロード、と比べるとGitは修正内容が一目瞭然なのがわかりやすいですね!また、複数環境や複数人での作業にも、プルで同期したり差分をコミットするとメリットを感じそうです。

次回は「ブランチ」や「プレリクエスト」など分岐作業をやってみたく思います(一人作業だとあまり意味ないかもだけどw)。それではまた!

*1:以前は独自ドメイン http://i-ryo.com でしたが12/30ロリポップドメインに変更しました