📘 技術ブログ

GithubPagesに独自ドメインを設定する

目次

1. はじめに

この記事では、GithubPagesで無料公開しているサイトに独自ドメインを設定する方法を紹介しています。

2. 独自ドメインを設定するとどうなる?

今まで、以下のようなGithubPageのURLでアクセスしていたサイトに独自ドメインを設定すると、

[変更前] https://XXXX.github.io/〜
   ↓
[変更後] https://mydomein/〜

のように、自分の好きなドメインでアクセスすることが出来るようになります。

3. 独自ドメインを取得する

自分の好きなドメインを決め、ドメイン登録サービスでドメインを取得します。ここでは、お名前.comでドメインを取得することを前提に進めていきます。 余談ですが、代表的なドメイン登録サービスには以下のようなサービスがあります。

  • お名前.com(国内最大級で比較的価格が安い)
  • ムームードメイン(初心者向けで使いやすい)
  • Namecheap(海外で人気、更新費用が安い)など

まず初めに、お名前.comのトップページで自分の使いたいドメインが使えるかどうかを確認します。 ドメイン検索

✔️人気のあるドメイン名は、すでに取得されていることが多く、希望の「.com」が使えない場合があります。 その場合は、少しだけ名前を変えてみたり、「.jp」や「.net」など別のドメインを使うことも検討してください。

4. DNS設定をする

3.で取得したドメインにアクセスした時の「行き先」をGitHub Pagesへ向くように設定します。 DNS設定は、ドメインを取得したサービス(今回はお名前.com)側の管理画面にログインして行います。

お名前.com Naviにログインし、左側メニュー「ネームサーバー」>「ドメインDNS設定」を選択します。 ネームサーバー

ドメイン一覧が表示されるので、該当ドメインの「ドメインDNS」ボタンを押下します。 ドメイン一覧

次に、DNS設定/転送設定画面が表示されるので、「DNSレコード設定」ボタンを押下します。 DNS設定

DNSレコード設定のページに、下記の値をCNAMEレコードに追加します。

ホスト名:www
TYPE:CNAME
VALUE:benritools.github.io

ドメイン取得

続いて、Aレコードにも下記の値を設定します。

ホスト名:空欄
TYPE:A
VALUE:185.199.108.153

ここではGitHub Pages用にGitHubが公開している公式IPアドレスを設定します。

👉 Aレコードは4つ必要です、以下のIPアドレスを全て登録してください。

  • 185.199.108.153
  • 185.199.109.153
  • 185.199.110.153
  • 185.199.111.153

全てのレコードを追加したら、「DNSレコード設定用ネームサーバー変更確認」にチェックを入れて保存してください。

ドメイン取得

5. GitHub Pages側で独自ドメインを設定する

GitHubリポジトリを開き、ページ上部メニューから「Setting」を選択し、右側メニュー「Pages」ページを表示します。

Custom domain欄に、3.で取得した独自ドメインを入力します。

※ 独自ドメインは「www」付きで入力してください

ドメイン取得

最初はグレーアウトしている「Enforce HTTPS」というチェックボックスが、少し待つとDNS反映後に活性化します(選択可能になります)。 こちらのチェックボックスにチェックをつけてください。 ドメイン取得

👉 Enforce HTTPSとは

Enforce HTTPSにチェックをつけるとHTTPアクセスをすべてHTTPSへ自動転送する設定ができます。 サイトの通信が暗号化されて安全になる効果がありますので、チェックをつけるようにしましょう。

6. サイトの表示確認をする

独自ドメインにアクセスし、サイトが問題なく表示されるかを確認してください。また、HTTPでアクセスした場合、HTTPSにアクセスが転送されるかも同時に確認します。

💡独自ドメインでサイトが表示されない場合

DNSの反映には時間がかかる場合があります。 通常は数分〜数時間程度で反映され表示されるようになりますが、最大24時間程度かかる場合もあります。

レイアウト崩れや画像などがリンク切れを起こしている場合、各ページにGithubPagesのURL(XXXX.github.io)やルートディレクトリ(ここでは/tools)などが直書きされていないか、確認してください。

また、Jekyllの設定ファイルである_config.ymlに記載がある場合、以下を変更する必要があります。

url: "https://www.benritoolbox.com" →独自ドメイン
baseurl: "" →なし
theme: jekyll-theme-minimal
permalink: /blog/:title/