どうもraiです。
はじめに
今日はGitHub Pagesに作成したWEBサイトを公開したので、GitHub Pagesの使い方についてまとめました。
GitHub Pagesの詳細な使い方については下記の公式サイトで閲覧できます
https://docs.github.com/ja/pages/getting-started-with-github-pages/what-is-github-pages
実施したこと
要約
GitHub上で公開されているWebサイトのテンプレートをローカルに取り込み、Webサイトを作成し、GitHub Pagesで公開します。
詳細
GitHub上で公開されているWebサイトのテンプレートを、自分のパソコン（ローカル）のmasterブランチ上にgit cloneで複製します。テンプレートの初期状態をコミットし、git pushでGitHubリポジトリに反映させます。
次に、作業用としてreplaceという名前のブランチを作成し、その中でWebサイトの内容を編集・カスタマイズして完成させます。編集が終わったら、変更内容（差分）をコミットし、再びpushしてGitHubにアップロードします。
その後、GitHub上でreplaceブランチからmaster ブランチへのPull Request（プルリクエスト）を作成し、自分自身で内容を確認してマージします。
最後に、GitHub Pagesの設定からmasterブランチ（または特定のフォルダ）を公開対象に指定することで、編集済みのWebサイトをインターネット上に公開します。
コミット(commit)とは
ファイルの変更を「確定」して記録として残すこと。
プッシュ（push）とは
ローカル（自分のPC）で作業した内容をGitHubなどのリモートリポジトリに送信して反映させること。
マージ（merge）とは
あるブランチでの変更内容（差分）を、別のブランチに取り込むこと。
作業環境
機種:Macbook
ターミナル:Warp
テキストエディタ:VScode
リモートリポジトリ:GitHub
手順まとめ
-
GitHubで新しいリポジトリを作成
-
ローカルで作業用ディレクトリを作成してGit用に準備する
-
GitHub上からWebサイトのテンプレートをローカルに複製する
-
GitHub(リモートリポジトリ)と接続し、mainブランチをGitHubにプッシュする
-
作業用のブランチを作成して切り替える
-
Webサイトのテンプレートを編集しコミットしてGitHubにプッシュする
-
GitHubにてPull Requestを作成し、差分を確認してmasterブランチへセルフマージする
-
GitHub PagesにてWebサイトを公開する
手順詳細
1. GitHubで新しいリポジトリを作成
GitHubにてアカウントの作成後、新しくリポジトリを作成します。
Homeへ行き、Newボタンをクリックし、リポジトリ作成画面を表示します。
Repository nameに任意のリポジトリ名を入れ、公開設定はPublicを選択します。
PrivateだとGitHub Pagesで公開できないためです。
最下部のCreate repositoryをクリックして作成完了です。
後にプッシュする際に使うtokenをここで作成しておきます。
トークン(token)とは
ローカルとGitHubを繋ぐ際に認証するパスワードのようなもの。
tokenについて(公式ドキュメント)
https://docs.github.com/ja/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens
GitHub トークンの発行手順
1. GitHubの設定画面を開く
- 画面右上のアイコンをクリック
- メニューから
Settingsをクリック
2. 開発者向け設定に進む
- 左側の一番下にある
Developer settingsをクリック
3. トークン作成ページへ
-
Personal access tokensをクリック -
Fine-grained tokensを選択 -
Generate new tokenをクリック
4. パスワードを入力（確認用）
- GitHubのログインパスワードを求められるので入力
5. トークンの情報を設定
-
Token name：トークンの名前（自分がわかる名前でOK） -
Expiration（有効期限）：使いたい期間を選ぶ（例：7日、30日、カスタムなど）
6. アクセスするリポジトリを選ぶ
以下の3つから選択：
-
Public repositories
公開リポジトリに「読み取り専用」でアクセス可能（Pushは不可） -
All repositories
自分が持っているすべてのリポジトリ（今後作るものも含む）にアクセス可能 -
Only select repositories
自分で選んだリポジトリだけにアクセス可能（セキュリティ重視のときにおすすめ）
7. アクセス権限（Read/Write）を設定
-
ContentsやPull requestsなど、必要な項目を「Read and write」に設定
8. 最後にトークンを発行
-
Generate tokenをクリック - 発行されたトークンは 一度しか表示されないので、安全な場所にコピーして保存
このトークンを使えば、git push などでパスワードの代わりに認証できるようになります。
今回は新しく作成したリポジトリのみに許可を加えることにしますので、Only select repositoriesを選択し、プルダウンメニューから作成したリポジトリ名を選びます。
最後に、権限を設定します。
- ファイルを修正すること
- Pull requestをすること
上記、２点を行いたいので、PermissionsをクリックしプルダウンメニューからContentsとPull requestsをAccess:No accessからAccess:Read and writeに変更し読み込みと編集を許可します。
2. ローカルで作業用ディレクトリを作成してGit用に準備する
Warp(ターミナル)にて任意のフォルダ下で作業ディレクトリresumeを作成
mkdir resume
作成したresumeディレクトリに移動
cd resume
このディレクトリをgitで管理するために初期化する
git init
3. Webサイトを作成する
今回は、GitHub上にあるWebサイトのテンプレートをローカルに複製して、それを元にWebサイトを作成します。
GitHubのリポジトリ検索欄からWebサイトのテンプレートが保存されているリポジトリを検索します。今回は下記のテンプレートを使用します。
GitHub上に保存されているテンプレートをローカルに複製します。
作業ディレクトリにいることを確認します。
pwd
作成したディレクトリにいることを確認したら複製します。
git clone https://github.com/StartBootstrap/startbootstrap-resume.git
上記のURLは、複製したいリポジトリの画面の緑の枠で囲まれた< >Codeをクリックすることで表示できます。
続いて、初期状態をmasterブランチにプッシュします。
変更履歴がないとプッシュできないため、軽微な修正を行います。
VScode(テキストエディタ)を起動します。
code .
にてVScodeを起動し、dist内にあるhtmlファイルを編集します。
今回は<html lang="en">を<html lang="ja">に編集します。
Comand + Sでファイルの変更を保存して、VScodeを閉じてターミナルに移動します。
差分を作業ディレクトリからstagingエリアへ保存します。
git add .
stagingエリアからローカルリポジトリへ差分に"first commit"と名前をつけて保存します。
git commit -m "first commit"
4. GitHubのリモートリポジトリと接続し、masterブランチをプッシュする
ローカルリポジトリに保存した編集内容をGitHubにプッシュするためにローカルとGitHubを接続します。
プッシュ（push）とは
ローカル（自分のPC）で作業した内容をGitHubなどのリモートリポジトリに送信して反映させること。
既に別のリポジトリに接続済みですと接続ができないので確認をします。クローンで複製した場合、クローン先のリポジトリが接続されています。
git remote -v
URLが表示されていたら接続されていたら解除します。
git remote remove origin
自身が作成したリポジトリと接続します。
git remote add origin GitHubのURL
GitHubのURL:https://github.com/ユーザー名/リポジトリ名.git
プッシュします。
git push -u origin master
オプション-uをつけることで次回からgit pushと打つだけでプッシュできるようになります。
ユーザー名が求められるのでGitHubのユーザー名を入力します。続いて、tokenが求められるので1.にて作成したtokenを貼り付けてEnterを押します。
貼り付けたtokenはセキュリティの観点から画面には表示されない仕様になっています。
5. 作業用のブランチを作成して切り替える
masterブランチから作業ブランチreplaceを作成して切り替えます。
git checkout -b replace
ブランチが変更されていることを確認します。
git branch
新しく作成したブランチに*がついていたらOKです。
6. Webサイトのテンプレートを編集しコミットしてプッシュする
VScodeを開きます。
code .
テンプレートをもとに文字や写真の編集を行います。
ファイルを編集する際に、今回のテンプレートのデフォルトの設定が要らなかったため下記のファイルを削除します。
・.editorconfig
・package-lock.json
・package.json
GitHubリポジトリ内の主なファイル・フォルダの説明
dist/
完成済みのWebサイト一式（HTML/CSS/JS）そのままブラウザで使えます。
scripts/
ビルドや開発補助のスクリプトを入れるフォルダです。（npm runなどで使用）
src/
開発用の元ファイル（SCSSやテンプレートなどを含む）
.editorconfig
エディタの書式設定（インデントや改行コードなどを統一する）
.gitignore
Gitで無視するファイルやフォルダを指定（node_modulesなど）
LICENSE
このテンプレートの使用許可範囲を示すライセンスファイル（例：MIT）
README.md
プロジェクトの説明書（使い方・注意点などをMarkdownで記述）
package-lock.json
使用ライブラリの正確なバージョン情報を固定するファイル（自動生成）
package.json
使用するnpmパッケージやスクリプトの定義ファイル（npmの設定情報）
編集が完了したらComand + Sで保存します。
VScodeを閉じて、コミットしてプッシュします。
git add .
git commit -m "自己紹介編集"
git push -u origin replace
7. GitHub上でPull Requestを作成し、差分を確認してmasterブランチへセルフマージする
GitHubのresumeリポジトリの画面を開きます。
ブランチをmasterからreplaceへ切り替えます。
上部にあるCompare＆pull requestをクリックしPRを作成します。
任意で必要であれば右のサイドバーのReviewers欄に確認者を追加し、Assignessには作業者である自分を選択します。
Create pull requestをクリックしPRを作成します。
Merge pull requestというボタンが表示されますので、クリックして自分でマージをします。
マージ（merge）とは
あるブランチでの変更内容（差分）を、別のブランチに取り込むことです。
8.GitHub PagesにてWebサイトを公開する
resumeリポジトリのホーム画面にいることを確認し、下記の順番でクリックしていきます。
Settings
↓
Pages
GitHub PagesにURLが出ていないことを確認します。
URLが表示されている場合は既にGitPages公開済みです。
Branchにて、編集済みのHTMLファイルが存在するブランチと/(root)を選択し、Saveで保存すると画面上部のGitHub Pagesに下記のようにURLが表示されます。
表示されるまで5分ほどかかる可能性があります。
Your site is live at https://ユーザー名.github.io/リポジトリ名/
URLが表示されたらURLを押してページが正常に公開できているかを確認します。
編集内容が表示されていない場合
GitHub Pagesに記載されているURLは下記のようにHTMLファイルがルートディレクトリ(リポジトリ)の直下にないと表示されません。
リポジトリ
├── index.html
├── style.css
├── script.js
下記のようにルート直下にHTMLファイルがないページは表示されません。
リポジトリ
├── dist/
│ ├── index.html
│ └── style.css
ページを表示させるには下記のURLで検索をすることで表示していることを確認できます。
https://ユーザー名.github.io/リポジトリ名/HTMLファイルが入っているディレクトリ名/
今回の例であれば下記のようになります。
https://自身のユーザー名.github.io/リポジトリ名/dist/