お名前.comで申請した独自ドメインをNetlifyで設定
今回はVuePress-GitHub-Netlifyで環境構築の続きです。
Netlifyに独自ドメインを設定します。
使用するサービス
- お名前.com (opens new window)：ドメイン取得
- Netlify (opens new window)：静的サイトホスティング
全体的な流れは以下です。
- お名前.comでドメイン取得
- Netlifyで独自ドメイン設定に切り替え
- お名前.comでNetlifyの連携情報を入力
お名前.comでドメイン取得
お名前.com (opens new window)に遷移すると入力フォームが表示されるので
取得したいドメイン名を入力しましょう
検索ボタンをクリックすると、以下の画面に遷移するので料金確認に進むボタンをクリックしてください
※.com以外で取得したい場合は追加・変更してください。
サーバー選択画面に進みます。
前回でサーバー自体は設定済みなので、利用しないを選択しましょう。
選択したら次へボタンをクリックしてください
あとは決済画面で出てくるので、設定をすればドメイン取得完了です。
Netlifyで独自ドメイン設定に切り替え
独自ドメインに切り替えるために、必要な情報を発行しましょう。
overview画面に遷移すると、前回デプロイ設定した情報が表示されるので
Domain settingsをクリックしてください
Add domain aliasの所がAdd custom domainとなっているのでクリックしてください。
クリックすると、独自ドメイン入力フォームが表示されるので
お名前.comで取得したドメインを入力しましょう。
入力したらVerifyをクリック。
クリックしたらdomain画面に遷移します。
画像のNetify DNSと表示されている所がCheck DNS configurationと表示されるので
OptionsをクリックしてSet up Netlify DNSと出ている場所をクリックしましょう。
遷移すると色々聞かれますが、エメラルド色のボタンをひたすらクリックします。
ある程度クリックするとName serversと表示され、hogehoge.netが4つ表示されているので
ここで一旦ストップします。
お名前.comでNetlifyの連携情報を入力
別タブでお名前.comにログインします。
ログインしたら画面上部のメニュー一覧をクリックして、赤枠のネームサーバーの変更をクリックしましょう
画面遷移したら、画像のようにタブや、ラジオボタンをクリックして
Netlifyのタブからhogehoge.netをコピペしてください。
コピペしたら、確認ボタンを押して連携は完了です。
取得ドメイン画面にアクセスして、Netlifyでbulidした画面表示されていれば成功です！
※反映に時間がかかるため出ていなくても半日程度待つことを推奨します。
セキュリティ
お名前.comも2段階認証対応しているので、設定しましょう。
ログインしたら画面上部のメニュー一覧をクリックして、右中央付近にあるログインセキュリティをクリックしましょう
クリックすると2段階認証項目があるので、設定をクリック
あとは指示通り設定すれば完了です。
※2段階認証画面の直リンクも貼っておきます。
https://navi.onamae.com/account/loginsecurity/mfa/check (opens new window)
まとめ
以上で当サイトを作成した際の、VuePressの使い方～環境構築まで紹介してきました。
抜けや、出来ないよ～という箇所があればtwitterで連絡していただけると幸いです。
次回はデザイン編を行う予定です！
