前回の記事「脱WordPress!AIを使って年間3万円を節約し爆速ブログを手に入れた全手順を公開」の続編です!
無事にWordPressから静的HTMLファイルへの移行(GitHubへのアップロード)が終わったら、最後の大仕事「ドメイン(URL)のお引越し」が待っています。
今回は、私が実際にエックスサーバー(Xserver)で管理していた独自ドメイン(jinseimanabi.com)を、無料で使えるGitHub Pagesに接続し直した手順を、分かりやすく解説します。
- これまでエックスサーバーに毎月払っていたレンタルサーバー代が不要になります(かかるのは年間2,000円ほどのドメイン更新料だけ!)
- 「github.io」のような長いURLではなく、自分だけの「〜.com」のURLでブログを運営し続けられます
- 超高速なGitHubのサーバー経由でサイトが表示されるようになります
全体の流れ(所要時間:作業15分+待ち時間)
ドメインの移行は、実はたった2つのステップで終わります。
- エックスサーバー側の設定:「これからはGitHubのサーバーを表示してね」と住所変更(DNSレコード変更)をする
- GitHub側の設定:「このドメインはうちのサイトで使いますよ」と登録する
それでは、具体的な手順を見ていきましょう!
STEP1:エックスサーバーのDNSレコードを変更する
まずは、ドメインを管理しているエックスサーバーの「サーバーパネル」にログインします。
1. DNSレコード設定画面を開く
サーバーパネルの左側メニュー(下の方)にある「ドメイン」の中の「DNSレコード設定」をクリックし、設定したいドメイン(例:jinseimanabi.com)を選択します。
「DNSレコード一覧」のタブを開くと、現在エックスサーバーを向いている設定が並んでいます。ここでエラーを防ぐために、種別が「A」で、ホスト名に「www」や「*」が付いている行があれば、右端のゴミ箱マークで削除しておきます。(一番上の空欄のAレコードは後で編集するので残してOKです)
2. GitHubの住所(IPアドレス)を登録する(Aレコード)
次に、GitHub Pagesのサーバーの住所となる「IPアドレス(Aレコード)」を4つ登録します。元々あるAレコードは「編集」をして書き換え、残りは「DNSレコード設定を追加」タブから3回に分けて追加します。
追加する内容は以下の通りです。
- ホスト名:空欄(または初期設定のドメイン名のまま)
- 種別:
A - 内容:以下の4つの数字をそれぞれ1つずつ追加します
- 185.199.108.153
- 185.199.109.153
- 185.199.110.153
- 185.199.111.153
3. CNAMEレコードを追加する
続けて、「www」がついたURLでもアクセスできるように設定を追加します。
- ホスト名:
www - 種別:
CNAME - 内容:
自分のGitHubユーザーネーム.github.io(例:foodsafety-partners.github.io)
設定が終わると、一覧画面には「Aレコードが4つ」「CNAMEレコードが1つ」並んでいる状態になります。これでエックスサーバー側の作業は完了です!
STEP2:GitHub Pagesでドメインを登録する
エックスサーバー側の設定が終わったら、次はGitHub側の設定です。
※ただし、先ほどのエックスサーバーの設定が世界中のインターネットに反映されるまで(DNSの浸透)、数十分から数時間かかることがあります。
1. Custom domainの設定
自分のGitHubリポジトリ(静的ファイルをアップロードした場所)を開き、上部の「Settings(歯車マーク)」をクリックします。
左メニューの「Pages」を開き、少し下にスクロールすると「Custom domain」という項目があります。
ここの入力欄に、自分の独自ドメイン(例:jinseimanabi.com)を入力し、「Save」ボタンを押します。
※末尾にスラッシュ「/」を入れたり、「https://」をつけるとエラーになるので、純粋に「〇〇.com」の部分だけを入力します。
Save後、さっそく自分のURLにアクセスしてみると「保護されていない通信」「プライバシーが保護されません」という真っ赤な警告画面が出ることがあります。
大丈夫です!これは設定が成功している証拠です。
住所(DNS)が切り替わった直後は、GitHub側で「安全証明書(SSL証明書)」を発行する作業が行われており、これに小一時間かかります。証明書がないためブラウザが警告を出しているだけなので、ただ待つだけでOKです。
2. HTTPS通信を強制する(Enforce HTTPS)
1時間ほど待つと、GitHub側で自動的にSSL証明書の発行が完了します。
同じく「Settings > Pages」のCustom domainのすぐ下にある「Enforce HTTPS」というチェックボックスが、(最初はグレーアウトして押せなかったものが)押せるようになります。
ここにチェックを入れれば、すべての作業は完了!
あなたのブログは鍵マーク(🔒)のついた安全な https://独自ドメイン として、高速なGitHubサーバーから配信されるようになります!
まとめ:サーバー代0円はやっぱり最高の気分!
この手順を踏むことで、WordPress時代に毎月払っていたレンタルサーバーの月額料金パックから卒業し、「ドメインの維持費のみ(年額2,000円程度)」という超絶コスパの良いブログ運営環境が完成しました。
最初は「DNSレコード?」「CNAME?」と謎の横文字に戸惑うかもしれませんが、やること自体は「決められた数字や文字をコピペして追加するだけ」です。
脱WordPressを目指す方は、ぜひこの記事を参考に最後のドメイン設定にチャレンジしてみてください!