GitHub Pages でサイトを公開するまでの手順

はじめに

こんにちは。debiru です。

今日は GitHub Pages を使ってサイトを公開して、独自ドメイン名でアクセスできるようにして、HTTPS でアクセスできるようにして、さらに Spreadsheet と GAS を使ってお問い合わせフォームを組み込んでしまう方法を紹介します。また Git の使い方についても紹介します。

GitHub アカウントをつくる

• https://github.com/

できましたね。

SSH Key を登録する

GitHub に ssh プロトコルで接続できるようにするために、SSH Key を登録します。

まず、手元のマシン上で鍵を作ります。

cd ~/.ssh

# もし ~/.ssh ディレクトリがなければ作りましょう
# mkdir ~/.ssh

ls -la

# id_ed25519.pub というファイルがあればそれを使います
# なければ次の手順で作成します
# メールアドレスは自身のものを設定します

ssh-keygen -t ed25519 -C '[e-mail]'

# Enter file in which to save the key (/path/to/.ssh/id_ed25519):
# Enter passphrase (empty for no passphrase): 
# Enter same passphrase again:
# と3回何かを聞かれますが、3回とも Enter を押すだけで OK です

cat ~/.ssh/id_ed25519.pub 

# このコマンドで表示された内容をコピーします

• https://github.com/settings/keys

Title には、どのマシンの鍵かが分かるように、マシン名（debiru-MacBookAir）を書いておくとよいでしょう。

Key type は Authentication keys のままで OK です。

Key フィールドに、先ほどコピーした内容を貼り付けます。

そして Add SSH key ボタンを押しましょう。

~/.gitconfig ファイルを用意する

既に ~/.gitconfig が存在していて設定が書かれているのであれば大丈夫です。

存在しない場合は、以下を参考にファイルを作成します。

~/.gitconfig

[user]
        name = debiru
        email = [e-mail]
[color]
        diff = auto
        status = auto
        branch = auto
        interactive = auto
        ui = auto
[alias]
        co           = checkout
        st           = status
        di           = diff
        diw          = diff --color-words='[[:alnum:]]+|[^[:space:]]'
        push-reset   = push -f origin HEAD:master
        amend        = commit --amend
        pick         = cherry-pick
        dic          = diff --cached
        ls           = ls-files
        up-assume    = update-index --assume-unchanged
        up-no-assume = update-index --no-assume-unchanged
        up-skip      = update-index --skip-worktree
        up-no-skip   = update-index --no-skip-worktree
[core]
        pager = less -+S
[push]
        default = simple

リポジトリをつくる

• https://github.com/new

Repository name に自身のウェブサイトのブランド名を入力します。

ブランド名が思いつかなければ debiru-site のように、自身の名前 + -site とかでよいでしょう。

Description は空でもよいですが、書きたければ何か書いてください。

Public / Private は Public にします。

Add a README file にチェックを入れます。

そして Create repository ボタンを押しましょう。

作ったリポジトリページにアクセスする

• https://github.com/debiru/gh-pages-sample

上記は私のサンプルリポジトリです。

緑色の < > Code ボタンを押して SSH を選びます。

[e-mail]:debiru/gh-pages-sample.git のような URL をコピーします。

Git リポジトリを手元にクローンします

# 作業用ディレクトリに移動します
# なければ mkdir ~/work とでもして作業ディレクトリを作ります
cd ~/***

# 先ほどコピーした SSH 用 URL に対して `git clone` を実行します
git clone [e-mail]:***/***.git

# 生成されたディレクトリに移動します
cd ***

# コミットログを見てみます
git log

# `q` キーで抜けます

独自ドメイン名の DNS 設定をする

お持ちのドメイン名が example.com であった場合、

• https://example.com でアクセスできるようにする
• https://sub.example.com でアクセスできるようにする

このどちらなのか（sub の部分は任意の文字列）によって設定方法が異なります。

サブドメインを付けない頂点ドメイン名 example.com の場合、DNS レコードに以下の A レコードをセットします。

example.com    A    185.199.108.153
example.com    A    185.199.109.153
example.com    A    185.199.110.153
example.com    A    185.199.111.153

サブドメイン sub.example.com の場合、以下の CNAME レコードをセットします。YOURNAME の部分はご自身のアカウント名にします。

sub.example.com    CNAME    YOURNAME.github.io

DNS レコードを設定したら、設定ができているかを確認しましょう。

dig example.com any +trace
# または
dig sub.example.com any +trace

# +trace よりも適切な @ と +norec を指定すべきですが、
# ここでは簡単のため any +trace でいいでしょう

GitHub Pages の設定をする

• https://github.com/***/***/settings/pages

作成されたご自身のアカウント + リポジトリ名の URL にアクセスします。

Source を GitHub Actions にします。

Static HTML のパネルにある Configure ボタンを押します。

右上の緑色の Commit changes... ボタンを押して、出てきたポップアップ上の Commit changes ボタンを押します。

Custom domain に先ほど DNS レコードを設定した、設定したい独自ドメイン名（頂点ドメインまたはサブドメイン）を設定します。

Enforce HTTPS にチェックを入れます。チェックが入れられない場合は、一度ページをリロードします。

ページ上部に、以下のような URL が表示されていれば OK です。

Your site is live at https://gh-pages.debiru.net/

表示された URL にアクセスしてみてください。ページが表示されれば OK です。

お問い合わせフォームの保存先 Spreadsheet を作成する

Google アカウントにログインします。

• https://drive.google.com/drive/my-drive

にアクセスして適当なディレクトリを作成します。その中に Spreadsheet を作成します。

• https://docs.google.com/spreadsheets/d/1ydO9RNbgbLCrekVRpHvwx6AIOj7IWsJcLhSGOXhVmpg/edit?gid=0#gid=0

こんな感じの見出し行をセットします。そしてシート名を form に変更します。

メニューの「拡張機能」「Apps Script」を開きます。

プロジェクト名とファイル名をそれぞれ Code, code などに設定しておきます。

ソースコードを以下の内容に差し替えます。

code.gs

const Util = {
  getDateStr(date = null) { if (date == null) date = new Date(); return Utilities.formatDate(date, 'JST', 'yyyy-MM-dd HH:mm:ss'); },
  output(range, value) { return range.setNumberFormat('@').setValue(value); },
};

function doPost(e) {
  return doMain(e.parameters);
}

function doMain(args = null) {
  if (args == null) args = {};

  const params = {
    name: args.name ?? '',
    subject: args.subject ?? '',
    body: args.body ?? '',
  };

  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const form = {};
  form.sheet = ss.getSheetByName('form');
  form.newRow = form.sheet.getLastRow() + 1;
  form.getCell = (col) => form.sheet.getRange(`${col}${form.newRow}`);
  form.output = (col, value) => Util.output(form.getCell(col), value);

  form.output('A', Util.getDateStr());
  form.output('B', params.name);
  form.output('C', params.subject);
  form.output('D', params.body);

  const content = JSON.stringify({ params }, null, 2);
  const mimeType = ContentService.MimeType.JSON;
  const response = ContentService.createTextOutput(content).setMimeType(mimeType);

  return response;
}

GAS をデプロイする

GAS 編集画面の右上にある青い デプロイ ボタンを押して「新しいデプロイ」を選択します。

左上の 種類の選択 で ウェブアプリ を選択します。

新しい説明文 には form とでも入れておきましょう。

次のユーザーとして実行 は 自分 にします。

アクセスできるユーザー は 全員 にします。

そして デプロイ ボタンを押しましょう。

権限云々についてのダイアログが表示されたら、権限を付与する操作を行います。

生成されたウェブアプリ URL をコピーします。

以下のような形式の URL です。これは私のサンプルシートの API URL です。

https://script.google.com/macros/s/AKfycbzgqTYLZYqcVLYZvqJndtL7BEx6aXRuimDTjhFEvhlUnepnEq5N61_6owKy2CTbDwd7bw/exec

サイトに問い合わせフォームを組み込む

• https://github.com/debiru/gh-pages-sample/archive/refs/heads/main.zip

先に私の作成したサンプルデータをダウンロードしておきます。

そして手元で、リポジトリをクローンしたディレクトリに移動して作業します。

# 作業ディレクトリの中のリポジトリディレクトリへ移動する

cd ~/***/***

# GitHub 上で操作したことによりコミットが存在しているので、その情報を取得します

git pull

# サンプルデータに含まれている index.html と assets/ ディレクトリをここにコピーします

ls

# 表示される内容：  CNAME  README.md  assets  index.html

• assets/js/script.js の 21 行目の URL を、先ほどコピーした API URL に差し替えます

assets/js/script.js

diff --git a/assets/js/script.js b/assets/js/script.js
index 3ada5d3..7e73bc2 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -18,7 +18,7 @@
         submit.textContent = '送信中...';
         submit.disabled = true;
 
-        const url = 'https://script.google.com/macros/s/AKfycbzgqTYLZYqcVLYZvqJndtL7BEx6aXRuimDTjhFEvhlUnepnEq5N61_6owKy2CTbDwd7bw/exec';
+        const url = 'https://script.google.com/macros/s/***/exec';
         const response = await Util.fetchPost(url, form, {mode: 'no-cors'});
 
         const fields = form.querySelectorAll('input, textarea');

Git コマンドを打っていこう

以下では、コマンド行の先頭には $ 記号を付けて表示することにします。

$ git status

On branch main
Untracked files:
  (use "git add <file>..." to include in what will be committed)
	assets/
	index.html

nothing added to commit but untracked files present (use "git add" to track)

$ git add .
$ git status

On branch main
Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
	new file:   assets/css/reset.css
	new file:   assets/css/style.css
	new file:   assets/js/script.js
	new file:   index.html

$ git commit -m "お問い合わせフォームを実装"

[main 0e584c8] お問い合わせフォームを実装
 4 files changed, 437 insertions(+)
 create mode 100644 assets/css/reset.css
 create mode 100644 assets/css/style.css
 create mode 100644 assets/js/script.js
 create mode 100644 index.html

$ git status

On branch main
nothing to commit, working tree clean

$ git log

commit 0e584c84af54cbdd0d0da68fcbd8ef3cef86af7a (HEAD -> main)
Author: Minoru Takai <[e-mail]>
Date:   Wed Jan 15 12:27:51 2025 +0900

    お問い合わせフォームを実装

commit 992f0993e9b42e001410bde5f6bd99f9d09917f6
Author: Minoru Takai <[e-mail]>
Date:   Sun Jan 12 16:32:01 2025 +0900

    Initial commit

$ git branch

* main

$ git push

Enumerating objects: 4, done.
Counting objects: 100% (4/4), done.
Delta compression using up to 8 threads
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 497 bytes | 497.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
To /path/to/repository.git
   0e584c8..9a10c70  main -> main

作業内容の反映を確認する

• https://github.com/***/***

ご自身の GitHub 上のリポジトリページへアクセスして、手元で行った変更（index.html の追加）が反映されていることを確認してください。

• https://gh-pages.debiru.net/

上記は私のサンプルページですが、ご自身で設定した独自ドメイン名の URL にアクセスして、同様のページが表示されているかを確認します。

お問い合わせフォームに適当に入力して送信すると、用意した Spreadsheet に送信内容が保存されるはずです。

Git コマンドについて

1. clone
2. pull
3. status
4. branch
5. diff
6. add
7. commit
8. push
9. log
10. show
11. reset
12. checkout

これらについて説明します。

1. git clone

git clone URL

• Git リモートリポジトリを基に、Git ローカルリポジトリを生成するコマンドです。
• 簡単にいうと、リポジトリのダウンロードです。

これ以降の git コマンドは、そのローカルリポジトリのディレクトリ内で実行します。

2. git pull

git pull

• Git リモートリポジトリにある最新の情報を、Git ローカルリポジトリに反映するコマンドです。
• 簡単にいうと、リポジトリ（ブランチ）情報のダウンロードです。
• A さんと B さんが作業していて、A さんが clone した後で、B さんが commit & push した場合、リモートには B さんの作業記録が保存されますが、それを A さんのローカルに反映するためのコマンドです。

3. git status

git status

• Git ローカルリポジトリの現在の状態を表示するコマンドです。
• ファイルを編集したりしたときに、どのファイルを編集中か（差分があるか）を調べるためのコマンドです。

4. git branch

git branch
git branch -a

• いまいるブランチを表示します。
• -a オプションをつけると、リモートに存在するブランチ一覧も表示します。

5. git diff

git diff
git diff --cached
git diff COMMIT_HASH..

• Working Area にある差分の内容を確認するコマンドです。
• --cached オプションを指定した場合は、Staging Area にある差分の内容を確認できます。
• COMMIT_HASH.. を指定した場合は、そのコミット以降のすべてのコミットの差分をまとめて表示できます。

6. git add

git add FILE_PATH
git add .

• Working Area から Staging Area にファイルステータスを変更するコマンドです。
• Staging Area にあるファイルの内容が git commit の対象になります。

7. git commit

git commit -m "コミットメッセージ"

• 差分をコミットとして保存するコマンドです。
• コミットとは、差分（何をしましたよ）という作業の一塊を表現する概念です。

8. git push

git push
git push origin BRANCH_NAME

• いまいるローカルのブランチで、リモートのブランチを更新するコマンドです。
• 簡単にいうと、リポジトリ（ブランチ）のアップロードです。

9. git log

git log

• いまいるブランチを基点に、コミットのログを表示するコマンドです。

10. git show

git show
git show COMMIT_HASH

• git log で最新のコミットとして表示される内容の差分を確認するコマンドです。
• COMMIT_HASH を指定した場合は、そのコミットの差分を確認できます。

11. git reset

git reset FILE_PATH

• git add の逆です。add したファイルを元に戻すコマンドです。

12. git checkout

git checkout BRANCH_NAME
git checkout FILE_PATH

git checkout -b BRANCH_NAME

• ブランチを移動するコマンドです。
• ファイル名を指定した場合は、Working Area 上にあるファイルの編集内容をなかったことにします。
• -b オプションを指定してブランチ名を指定した場合は、新しいブランチを作りつつそのブランチに移動します。

コマンドまとめ

Git ブランチについて

Git には「ブランチ」という概念が存在します。

最初は main というただ一つのブランチ（枝）だけです。

必要に応じて、既存のブランチから別のブランチを作成できます。枝分かれをするわけです。

ホールケーキをつくる工程を想像してみましょう。

• 大きな円形のスポンジケーキがすでにあるとします。これをコミットします。...(A)
• 別の作業者Xさんが、並行して作業したいとします。コミット(A)から topic-X ブランチを作りましょう。git checkout -b topic-X を実行します。
  • 作業者Xさんは、topic-X ブランチで作業します。
  • チョコレートプレートをつくる作業をコミットします。
  • そして、リモートブランチに push します。git push origin topic-X を実行します。
• main ブランチの作業者さんは、そのブランチのまま作業します。コミット(B)コーティング, (C)デコレート, (D)いちご乗せを作成しました。
• いちごを乗せたケーキに、チョコレートプレートを乗せたいと思います。チョコレートプレートの作業は topic-X で作業が完了しているのでした。
  • このとき、「ブランチのマージ」を行うことで、別ブランチの作業内容を取り込むことができます。
  • まず、リモートブランチの最新情報を取得します。git pull を実行します。
  • そして、topic-X ブランチを取り込みます。git merge topic-X を実行します。
• これで、ショートケーキのチョコレートプレート乗せが完成しました。
• 後からチョコレートケーキを作りたいと思えば、コミット(A)まで遡ってから topic-Y ブランチを作成し、チョコレートケーキ作りの作業を続けることもできます。

ブランチ名として topic-X, topic-Y を例示しましたが、アルファベット文字列であれば自由な名前をブランチにつけることができます。

Git の本質について

Git はバージョン管理システムです。過去には SVN といった別のバージョン管理システムもありました。

Git は歴代のバージョン管理システムの中でもより優れた設計を採用しています。

• リモートリポジトリが何らかの理由で壊れても、ローカルリポジトリから簡単に復旧できるといった仕組みも備わっています。
• リモートリポジトリを伴わない、ローカルリポジトリのみの運用も可能です。
  • 手元のパソコンで、テキストファイルなどを一時的にバージョン管理したい場合などに便利です。
  • バージョン管理したいディレクトリ上で git init . を実行し、続けて git add . そして git commit -m "first commit" をそれぞれ実行します。
  • すると、そのディレクトリはローカルリポジトリとして機能するようになります。

Git の本質は、「コミットによる差分の記録」と「コミットハッシュによるバージョンの追跡」そして「ブランチによるバージョンの管理」です。

• コミット（記録された差分のひとまとまり）
• コミットハッシュ（コミットを指す名前）
• ブランチ（コミットが乗っているレーン）

これらの概念を理解して Git を使いこなすことで、快適なバージョン管理ライフを送ることができます。

おわりに

Git はバージョン管理システム、GitHub は Git のポータルサイトです。GitHub 上では、GitHub Pages という機能を使って、Git で管理しているファイル群を Web サイトとして公開することもできます。

Git に慣れるまでは少し苦労するかもしれませんが、ぜひ使いこなしてみてください。

不明点や疑問、困ったことなどがあれば @debiru_R までお気軽にご連絡ください。