イイダリョウのブログ。GitHubGitHubシリーズの続きです。前回、ブラウザ上だけでリポジトリを作ってWebページを作成しました。今回はローカル環境(SourceTree)にリポジトリをクローン(複製)し、そこで行ったコミット(更新)をGitHubにプッシュ(反映)します。Pages」にも同期させます。クモのようにコツコツとSourcetreeのインストールローカル環境とGitHubを連携するにはCUIとGUIの2つの方法があります。どちらでトライしたか悩んだのですが、のちのち黒い画面に移行するにしても比較対象としてGUI操作を知っているのは意味があると思い、まずはSourcetreeから始めます。GUIのため今の状態や操作対象がわかり、入りやすいと思われる。Qiita下記の手順になります。HTTPS」のURLをコピーするSourcetree:「リモート」>「+新規リポジジトリ」>「URLからクローン」Sourcetree:リポジトリを作成したいディレクトリを指定するこれでGitHubのリポジトリがローカル環境の指定した場所にクローン(複製)されます。ファイルはリードミーのファイルREADME.mdしかありません。Pagesへの移転です。*1こちらがFTPソフトからダウンロードしたファイル一式です。先ほどGitHubからクローンしたフォルダにポートフォリオのファイルも追加します。Sourcetreeのコミット(更新)アイコンをクリックしコミットの説明文を入れるとファイルが追加されます。Sourcetreeのプッシュ(反映)アイコンをクリックすると...GitHub本体にローカル環境のコミットが反映されます!!ちなみにSourcetreeの「プッシュ」の隣にあった「プル」はGitHub本体上のコミット(更新)をローカル環境に反映させます。Pages」にこのサイトを公開したい。TAM下記の手順になります。私のページの例でいうとこのようなURLになります。Pagesとローカル環境が同期していることを感じ取るために、ページの一部を更新してみましょう!仕込みネタというわけではありませんがw、たまたまテキストに誤記を発見したのでそこを修正してみます。こちらのモーダル上の説明テキスト「2013年」は「2014年」が正解です。ローカル上のhtmlファイルを修正します。ファイルを保存するとSourcetreeの画面が下記のように変わります。左上の「コミット」アイコンに「1」という印がつきます。右下にはindex.htmlの変更内容が。赤が変更前、緑が変更後です。「コミット」アイコンをクリックするとコメント欄が表示されるので変更内容を入力し左下の「コミット」をクリック。今度は「プッシュ」アイコンに「1」と印がつきます。「プッシュ」アイコンをクリックするとウィンドウが立ち上がります。プッシュ先のリポジトリのURLを確認ブランチ(分岐)名確認(今回は本流なので「master」から「maseter」へ)問題なければ右下の「OK」をクリックGitHub本体にコミット(更新)がプッシュ(反映)されます。完了すると「プッシュ」アイコンの「1」は消えます。Pagesの連携が成功しました。同時にポートフォリオのお引越しもね。ローカルのHTMLを修正してFTPソフトでファイルをアップロード、と比べるとGitは修正内容が一目瞭然なのがわかりやすいですね!また、複数環境や複数人での作業にも、プルで同期したり差分をコミットするとメリットを感じそうです。次回は「ブランチ」や「プレリクエスト」など分岐作業をやってみたく思います(一人作業だとあまり意味ないかもだけどw)。worldする前回、MAMP環境でLaravelの白い画面を出しました。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。