ひでひ's blog

備忘録

GitHub Pagesをfreenomを使って無料で独自ドメインにする方法

Apexドメイン(wwwがない)の方法の日本語の記事がなかったのでメモ
備忘録のため間違いがあるかも。今後やり方が変わってくるかもしれないので参考程度に。

追記
Apexドメインにするとwwwにアクセスした場合リダイレクトされる設定を別でしなければなりません。
それを自動でやってくれるnetlifyのほうが使いやすいです。

netlify.com

そもそもGitHub Pagesとは

GitHub Pagesは静的なサイトが作れるサービス。
よほどのことをしなければ、無料でも十分に使える。
簡単にSSLに対応しているサイトを作れるので、HTMLをわかる人にとってはつおいサービス。

*****.github.io がURLだが、かっこよくないので変えたい!

わざわざドメイン買うほどでもないしな…

freenomを使おう!

そもそもfreenomとは

無料で .TK .ML .GA .CF .GQ を使えるサービス。 オランダ企業のfreenomが運営してる。 一回における最大の契約期間は1年なので更新しないといけない。

無料で取得できるドメインのうち.TKは国別ドメインで第一位の取得件数らしい。 個人的にはTikTokに似てるからかなと考えた(多分違う)。

やり方

GitHub Pagesを作成

GitHubアカウントがない人は作ってね。

github.com

GitHub Pagesは、ユーザー用とプロジェクト用がある。 今回は個人用のサイトを作るのでユーザー用を使う。

  1. (ユーザー名).github.ioという名前でリポジトリ作成する
  2. 使うHTMLファイルをコミット
  3. (ユーザー名).github.ioにアクセスして反映されてるか確かめる

これだけでSSLに対応しているサイトを作ることができる。

詳細、わからない人向け↓ qiita.com

ドメインをfreenomで取得する

サイトにアクセス

www.freenom.com

日本語を選択できるが途中で英語に戻ったりして見にくいので英語で見ることを推薦。

  1. 欲しいドメイン名を入力
    Get it now!って書いてあるやつのみ使用することができる。

  2. Get it now!を押してCheckoutを選択
    Periodを12 Months(最長期間)を選択しContinue

  3. メールアドレスorGoogle/Facebookでログイン
    認証用メールが届くのでURLにアクセス

  4. YourDataに個人情報を入力
    執筆者は偽名使いました笑

  5. Complete Orderを押して取得完了

詳細、わからない人向け↓ note.com

GitHub Pagesとfreenomをつなげる

  1. Serviceを選択しMy Domainをクリックする。 f:id:hidehiZ:20200822124032p:plain

  2. Manage Domainをクリックする。 f:id:hidehiZ:20200822124543p:plain

  3. Manage Freenom DNSをクリックする。 f:id:hidehiZ:20200822124800p:plain

  4. 以下のように設定しSave Changesをクリックする。
    185.199.109.153
    185.199.108.153
    185.199.110.153
    185.199.111.153
    画像をクリックして拡大。 f:id:hidehiZ:20200822125115p:plain

  5. GitHub PagesのSettingsを開く。
    https://github.com/(ユーザー名)/(ユーザー名).github.io/settings

  6. 下にスクロールするとGitHub Pagesの項目がでてくる。
    取得したドメイン名を入力しSaveを選択。
    数分後に反映される。設定したドメイン名にアクセスすることで確認できる。
    また、SLL(HTTPS)を設定したい場合は数時間後にEnforce HTTPSがチェックできるようになるのでチャックすることで反映される。 f:id:hidehiZ:20200822130147p:plain

以上、終わり。