📚

Githubを始める【第2回】：Sourcetreeを導入 / GithubPagesで静的ページ公開

に公開
GitHub
GitHub Pages
初学者
Sourcetree
web開発
tech

はじめに

#1 Sourcetreeをインストールする

以下、公式サイトにアクセスして「Download for Mac」 をクリックします。
https://www.sourcetreeapp.com/

ダウンロードした Sourcetree_xxx.zip を展開してアプリケーションフォルダに移動します。
その後、Sourcetree を起動します。

Bitbucket のセットアップは不要なので
画面右下の「続行」ボタン（Bitbucket を設定せずに進むボタン）をクリックします。
※Githubを使うため、Bitbuketの設定は不要

チェックボックス 「GitとMercurialのグローバル作成者の詳細を設定する」 にチェックします。
→ 入れると入力欄が有効化されます。

必要情報を入力して、「完了」をクリックします。

  • 作成者名 → GitHub のユーザー名や自分の名前
  • 作成者のメールアドレス → GitHub に登録しているメールアドレス

    続いて、外部サービスへの接続処理をする画面に切り替わります。

画面をGithubに切り替えて、

  • GitHub の demo リポジトリのページを開く
    （例: https://github.com/あなたのユーザー名/demo）
  • 「Code」ボタンをクリック
  • 「SSH」タブを選び、表示されている URL をコピー
    （例： git@github.com:taki*******/demo.git）

SouceTreeに画面を切り替えて
Sourcetree の画面で：

  1. 左上の「新規」または「＋」ボタンをクリック
  2. 「クローンを作成」を選択
  3. 以下を入力：
    • ソースパス / URL：さっきコピーしたSSHのURL
      （例：git@github.com:taki*******/demo.git）
    • 保存先のパス：ローカルに保存したいフォルダ（任意の場所を選択）
      ※ 新規で demo_clone というフォルダを作成してください。
    • 名前：demo（自動で入ることが多い）
  4. 「クローン」ボタンを押す

demo_clone というフォルダにGithubのリモートリポジトリの内容がクローンされていればOK！

#2 Sousetreeでプルリクエストを作成する

まず、どのブランチから派生させるか確認します。
main から新しいブランチを作りたいのでそのブランチに一度チェックアウトします。
main をダブルクリックします。

新しいブランチを作成

  1. 上部メニューにある「ブランチ」ボタン（アイコンは枝分かれした線）をクリックします。
    （またはメニューの「リポジトリ」→「ブランチの作成」）
  2. 以下を入力します。：
    • 「現在のブランチ」で元ブランチが「main」であることを確認
    • ブランチ名：新しいブランチの名前（例：feature/002-demo など）
  3. 「ブランチを作成」をクリックします。

作業ブランチに新規ファイルを追加

作業ブランチ feature/002-demo を作成できたので、続いてファイルを追加します。

demo_clone配下でindex.htmlを新規追加します。

touch index.html
ls


ファイルを開き、

code index.html

以下の内容をコピペしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Feature 002 Demo</title>
</head>
<body>
  <h1>Hello, GitHub Pages!</h1>
  <p>This is a test page for the feature/002-demo branch.</p>
</body>
</html>

Souretree上でステージング・コミット・プッシュ

今の状況をまず確認します。

  • feature/002-demo ブランチ上にいて、
  • index.html がローカルで新規作成されていて、
  • Sourcetree に「Uncommitted changes（未コミットの変更）」として表示されています。

「保留中のファイル」に表示されている index.html にチェックします。
→チェックすることでステージングされている状態になります。

上部メニューの「コミット」をクリックすると画面が切り替わります。
コミットメッセージ「add index.html for GitHub Pages demo」を入力して
「コミット」をクリックします。

注記のダイアログが表示されるので「OK」をクリックします。

コミットが完了したのでOK!

続いて、コミットをプッシュしていきましょう。
上部メニューの「プッシュ」をクリックすると画面が切り替わります。
feature/002-demo にチェックして、「OK」をクリックします。

#3 Githubからプルリクエストをマージする

SoucetreeからプッシュするとGithubにfeature/002-demo が連携されます。

画面をGithubに切り替えます。
「Compare & pull request」をクリックしてください。

「add a discreption」に概要を記載し、「Create pull request」をクリックします。

「Merge pull request」をクリックして
main ブランチに feature/002-demo マージします。

以下のようにマージが完了していて、リモートリポジトリに index.html があればOK!

#4 Soucetree（ローカル）のmainブランチを最新化

現在のローカルの状況を整理すると：

  • feature/002-demo で index.html を作成・コミット・プッシュしました。
  • しかし main ブランチはまだそれを取り込んでいません
  • つまり、main は GitHub 上（origin/main）とズレた状態

そのため、origin/main とローカル main を一致させておく必要があります。

左側のブランチ一覧で main ブランチをダブルクリックします。
→ チェックアウトされます。（青丸が main に移動）

上部メニューから 「プル」ボタンをクリックします。
→ origin/main の最新の状態をローカル main に取り込みます。

以下のようになっていればOK！
main ブランチが origin/main ブランチと同じ位置に移動してますね！

#4 GithubPagesでページを公開する

GitHub 上の該当リポジトリにアクセスし上部メニューの「Settings」をクリックします。

  1. 左メニューの「Pages」を選択し以下を設定します。：
    • Source：Branch：main（または feature/002-demo、HTML があるブランチ）
    • フォルダ：/（root） を選択（index.html がルートにあるなら）
  2. 「Save」ボタンをクリックします。

数十秒〜数分待つと、上部に公開URLが表示されます。
（画面が変わらない場合は、数十秒〜数分待って、ブラウザをリロードしてみてください。）
「Visit site」をクリックしてみましょう。

別タブが開き、以下のようにページが表示されていればOK!

終わり

Discussion