Github Pages カスタムドメインの使い方
あなたのドメインを元の github.io アドレスの代わりに使用する
Github Pagesについて
Github Pages は Github が提供する無料の静的ページホスティングサービスで、すべての Github Free アカウントは Public Repo であれば直接利用可能です。Private Repo の場合は、先に有料プランにアップグレードする必要があります。
制限
-
静的ファイルのみホスティング可能： HTML、CSS、JavaScript、フォントファイル、画像ファイル、PDF、音声ファイル、テキストファイルなど
-
サイト（リポジトリ）サイズの上限： 1 GB
これはソフトリミットと思われます。私の Github Pages Jekyll リポジトリはすでに約5 GBあります。 -
デプロイ時間の最大： 10分
-
1時間あたりの最大デプロイ回数： 10回（ソフトリミット）
-
毎月のトラフィック制限： 100 GB（ソフトリミット）
-
リクエストが頻繁すぎると、HTTP 429 が返される可能性があります。
⭐️⭐️⭐️Github Pagesのカスタムドメイン設定だけ知りたい方は、以下をお読みください。
Github Pages チュートリアル、ChatGPT と組み合わせてプログラミング不要で個人サイトを作成する方法
以下はプログラミング初心者でGitが分からない方の例です。
1. Githubの登録とログイン： https://github.com/
- Githubにログインした後、右上の「+」->「New repository」を選択してください。
2. リポジトリ名の入力と設定
-
Repository name：
あなたのアカウント.github.io -
Public：公開リポジトリ
-
Add a README file：作成後すぐにGithubのWebからファイルを追加できるようにするため
-
リポジトリを作成する
Respository name の部分は、各アカウントまたは組織（Organization）ごとに あなたのアカウント.github.io というメインの Github Pages リポジトリを1つだけ作成できます。その他のリポジトリを Github Pages にデプロイすると、URL は あなたのアカウント.github.io/リポジトリ名 となります。例えば：
-
あなたのアカウント/あなたのアカウント.github.ioリポジトリ ->あなたのアカウント.github.io -
あなたのアカウント/mywebdemoリポジトリ ->あなたのアカウント.github.io/mywebdemo
あなたのアカウント.github.io 以外のメインGithub Pagesリポジトリの場合、Pagesを有効にするには設定(Settings)でPagesを設定する必要があります：
例えば、私のリポジトリ zhgchgli0718/testgithubpage でも Github Pages ページを作成したい場合。
-
Settings -> Pages -> Branch ->
main/rootを選択 -> 保存 -
完了
3. あなたのホームページの .html ファイルを作成する
-
Repoのホームページで右上の緑色ボタン「Code」をクリックしてください。
-
「+ Create new file」を選択してください。
4. ChatGPT を使ってページの .html ファイルを生成する
- こちらは最も簡単なプロンプトです：
サイバーパンク風のウェルカムページを生成する (.html)
5. .html ファイルを Github リポジトリに貼り付ける
-
ファイル名：
index.htmlと入力してください -
編集：ChatGPTで生成した.htmlの内容を貼り付けてください。ChatGPTでHTMLを調整することも、この場で直接HTMLを編集することも可能です。
-
右上の「Commit changes…」をクリックしてください。
- 「main ブランチに直接コミットする」を選択してください。
—
リソースファイルのアップロード（例：画像）：
- 同様に「Add file」をクリックし、「Upload files」を選択します。
-
ファイルをドラッグ＆ドロップするか選択し、アップロードが完了するまでお待ちください
-
「Commit changes」をクリックしてください
-
完了
6. デプロイの待機
前述のように、Github Pages はデプロイが必要で、ファイルを保存しただけでは公開されません。リポジトリ上部の「Actions」をクリックしてデプロイの進行状況を確認できます。オレンジ色のランプ🟠が緑のチェックマーク✅に変わるとデプロイ完了です。
7. 成果の確認
https://zhgchgli0718.github.io/
- アクセス：
https://あなたのアカウント.github.ioで成果を確認してください
Github Pages カスタムドメインの使い方
次に本題のGithub Pagesのカスタムドメインについてです。前述の通り、デフォルトでは あなたのアカウント.github.io のみが静的サイトのメインドメインとして使えます。他のリポジトリは /パス 経由でしかアクセスでき、二つ目の *.github.io ドメインを作成することはできません。
しかし、Github Pagesのありがたい点は、カスタムドメイン機能を無料で提供していることです。
⭐️⭐️⭐️ 購入したドメインは同時にこちらでも使えます： Medium カスタムドメイン機能。
例えば私のドメイン：
1. https://zhgchg.li -> Github Pages Jekyll ブログで使用
2. https://blog.zhgchg.li -> 私の Medium ページで使用
1. ドメインの購入＆取得 by Namecheap（老舗ドメインプロバイダー）
まずは Namecheap公式サイトトップページ にアクセスして、お好みのドメイン名を検索します：
検索結果を取得しました：
右側のボタンに「 Add To Cart 」と表示されている場合、そのドメインはまだ登録されておらず、カートに追加して購入できます。
もし右側のボタンに「 Make offer 」や「 Taken 」と表示されている場合、そのドメインはすでに登録されています。別の後継や別のドメイン名を選んでください：
カートに追加した後、下の「Checkout」をクリックしてください。
注文確認ページに進む：
-
Domain Registration ：ここでは
AUTO-RENEWを選択して毎年自動更新することも、一括で購入する年数を選ぶこともできます。 -
WhoisGuard ：ドメイン情報は誰でも自由に検索可能（登録日時、期限、登録者、連絡先など）ですが、この機能を使うと登録者や連絡先が自分の情報ではなくNamecheapの情報に置き換えられ、スパムメールを防げます。
（この機能は一部のドメインで有料ですが、無料の場合はぜひ利用しましょう！）
google.com の whois 情報の一部を取得しました。詳しくはこちらからご確認ください。
- PremiumDNS：ドメインは住所に例えられ、住所を見ることで場所を特定します。この機能は、より安定で安全な「場所の特定」機能を提供します。個人的には、高トラフィックのECサイトなど、少しのミスも許されない場合を除いて、必須ではないと思います。
クレジットカード情報を入力したら「Confirm Order」をクリックしてください。
その後、購入が完了します！
注文明細のメールが届きます。
2. ドメイン設定 by Namecheap
アカウント -> ダッシュボードへ移動：
設定したいドメインを見つけて -> 右側の「Manage」をクリック:
ドメインを確認 -> NAMESERVERS -> 「Namecheap BasicDNS」を選択：
「Advanced DNS」タブに切り替え -> Aレコードを追加：
-
「ADD NEW RECORD」をクリックしてください
-
Type を「A Record」に選択する
-
Host に「
@」を入力する -
Value を順番に入力してください：
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
4件の記録。
-
各入力が完了したら「✔️」をクリックして設定を保存してください。
-
完了です。
3. 設定したい Github Pages リポジトリに CNAME レコードを追加：
-
「ADD NEW RECORD」をクリックしてください
-
Type を「CNAME Record」に選択する
-
Host に希望するサブドメインを入力します。トップレベルドメインにしたい場合は「
www」と入力してください。 -
Value 入力：
あなたのアカウント.github.io
4. Githubリポジトリの設定に戻る
-
Github リポジトリ -> 設定 -> Pages
-
Custom domain：
あなたのドメインを入力してください（www.は省略可能です） -
「保存」をクリックしてください
- HTTPS の強制使用を有効にして、アクセスの安全性を向上させることができます。
DNSチェックを待っています…
通常は5分以内に確認できますが、DNSの仕組みにより最大72時間かかることがあります。手順が正しいのに確認できない場合は、数日待ってから再度お試しください。
設定成功！
あなたのドメイン検証結果へ移動：
成功！🎉🎉🎉 これで古い https://あなたのアカウント.github.io を使わずに、直接 https://あなたのドメイン でGithub Pagesにアクセスできます！
他のリポジトリの Github Pages も
https://あなたのドメイン/リポジトリ名でアクセスできます。
その他の記事
Medium カスタムドメイン
MediumからGithub Pagesへのスムーズな移行
Post は ZMediumToMarkdown によって Medium から変換されました。
コメント