クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > 開発環境 > GitHubとSourcetreeでGitHub Pagesとローカルファイルを同期させる

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

開発環境 GitHub SourceTree

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

【目次】

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

Sourcetreeのインストール

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

  • CUI：コマンドライン（黒い画面）
  • GUI：Sourcetree など

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

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

インストールの手順（Mac）

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

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

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

GitHubリポジトリとの連携

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

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

下記の手順になります。

  • GitHub：新規リポジトリ作成
  • GitHub：リポジトリ「Clone with HTTPS」のURLをコピーする
  • Sourcetree：「リモート」＞「+新規リポジジトリ」＞「URLからクローン」
  • Sourcetree：リポジトリを作成したいディレクトリを指定する

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

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

※参考：イイダリョウ ポートフォリオ
http://idr.mond.jp/i-ryo/ *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 *2 main」を選択
  • GitHub Pages：所定のURLにアクセス

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

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

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

※参考：https://ryo-i.github.io/i-ryo_portfolio*3

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

2020/09/15追加

ポートフォリオ再公開しました。URLは下記に変わりました。

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

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とGitHubとGitHub Pagesの連携が成功しました。と、同時にポートフォリオのお引越しもね。

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

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

※参考：Web開発環境の記事まとめ
qiita.com

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

*2:2020/11/15現在の新規リポジトリはmasterではなくmainがメインのブランチ

*3:現在は非公開