■Netlifyにアクセスする

まずは、Netlify（https://www.netlify.com/）にアクセスします。

アクセスすると、Netlifyのトップページが表示されます。ページ内の右側に「Sign up」の文字が表示されていますので、こちらをクリックします。なお、今回はNetlifyのアカウント登録は済ませた状態でアクセスしています。

■「Team overview」から独自ドメインの設定するサイトを選択

クリックすると、「Team overview」というページが表示されます。ページ内で「Sites」と表示されている箇所に表示されているサイトを選択します。

■ドメイン管理からカスタムドメインを追加する

選択すると、「Site overview」というページが表示されます。選択したサイトのURLなどが表示されています。このページ内で「Domain settings」と表示されたボタンをクリックします。

クリックすると、「Domain management（ドメイン管理）」というページが表示されます。ページ内の左側にあるメニューから「Domain management（ドメイン管理）」の「Domains」をクリックします。クリックすると「Domains」の項目が表示されます。この項目の中で「Add custom domain（カスタムドメインを追加する）」というボタンがありますので、こちらをクリックします。

クリックすると、「Add a custom domain to your site（サイトにカスタムドメインを追加する）」というページが表示されます。ページ内に「Custom domain」と表示された入力欄がありますので、こちらにお名前.comで取得したドメインの名前を入力します。

入力後、「Verify（確認）」ボタンをクリックします。

クリックすると、追加したカスタムドメインの確認が行われます。

○○.○○（お名前ドットコムで取得したドメインの名前） already has an owner. Is it you?（○○.○○にはすでに所有者がいます。あなたですか？）

確認後、上記のメッセージが表示されます。

表示された後に、表示されたドメインの所有者ですので、「Yes, add domain（はい、ドメインを追加します）」と表示されたボタンをクリックします。

クリックすると、「Domain management（ドメイン管理）」の「Domains」の項目に、お名前ドットコムで取得したドメインが追加されます。追加後、「Check DNS configuration」の文字をクリックします。今回はwwwありのドメインの「Check DNS configuration」をクリックしています。

クリックすると、「DNS configuration（DNS構成）」というポップアップが表示されます。ポップアップ内では「DNSプロバイダーで所有しているアカウントにログインし、（選択したサイト）を指すwwwのCNAMEレコードを追加します。」といった内容が書かれています。

www CNAME ○○.netlify.app.

上記のようなwwwのCNAMEレコードが表示されていますので、これをお名前ドットコムの方に追加する作業を行います。

■お名前.com Naviから「DNS」へ

Netlifyのページは表示させたまま、お名前ドットコムにアクセスします。アクセス後、ログインページからログインを行います。

ログイン後、お名前.com Naviから「DNS」をクリックします。

クリックすると「DNS」のページが表示されます。ページ内の「ドメインのDNS関連機能設定」を選択し、「次へ」ボタンをクリックします。

クリックすると、「ドメイン設定」の「ネームサーバーの設定」、「DNS設定/転送設定－ドメイン一覧」が表示されます。ページ内のドメイン名からNetlifyに追加したドメインを選択し、「次へ」ボタンをクリックします。

■DNSの設定をする

クリックすると、選択したドメインの設定お手続きが表示されます。ページ内の「DNS設定」から「DNSレコード設定を利用する」の「設定する」ボタンをクリックします。

クリックすると、「DNSレコード設定」が表示されます。ページ内で「入力」の項目にある「A/AAAA/CNAME/MX/NS/TXT/SRV/DS/CAAレコード」で設定を行います。

Netlifyの「DNS configuration（DNS構成）」というポップアップで表示されたwwwのCNAMEレコードを追加します。

今回はwwwありなので、ホスト名には「www」を追加し、TYPEは「CNAME」を選択。選択後、TTLは「3600」で、VALUEは「○○.netlify.app」を入力します。Netlifyの「DNS configuration（DNS構成）」というポップアップでは「○○.netlify.app.」となっていますが、最後のピリオドは入力しません。入力後、状態は「有効」で「追加」ボタンをクリックします。

クリックすると、「DNSレコード設定」の「追加」の項目に、先ほど設定したものが追加されます。

追加後、「DNSレコード設定」の一番下にある「DNSレコード設定用ネームサーバー変更確認」はチェックを入れたまま、「確認画面へ進む」ボタンをクリックします。

クリックすると、「DNSレコード設定」の確認のために、先ほど設定した情報が表示されますので、問題がなければ、「設定する」ボタンをクリックします。

クリックすると、DNSレコード設定の手続きが行われます。その後、DNSレコード設定が完了となります。これでお名前.comで取得した独自ドメインの設定は完了となります。

なお、設定の反映完了まで最大72時間程度かかる可能性があります。

なお、設定後、Netlifyの「Domain management（ドメイン管理）」の「Domains」を確認すると、今回はwwwありのDNSレコード設定を行いましたので、wwwありのドメインから「Check DNS configuration」という表示が消えており、wwwありのURLをクリックすると、お名前.comで取得した独自ドメインが表示されることが確認できました。

「Netlify（ネトリファイ,ネットライフィ）」を利用すると、最速でサイトを構築できます。

■ユーザー登録のため、サインアップ（Sign Up）する

まずは、「Netlify: All-in-one platform for automating modern web projects」（https://www.netlify.com/）にアクセスする。

アクセスすると、サイト上部に「Sign Up」という表記があるので、こちらをクリックします。

クリックすると、「Sign up with one of the following:（次のいずれかでサインアップします。）」と書かれています。サインアップ（Sign Up）の手段は、GitHub,GitLab,Bitbucket,Emailのいずれかになります。今回は「GitHub」でサインアップ（Sign Up）を行います。

「GitHub」と表示されたボタンをクリックします。

クリックすると、「Authorize application（アプリケーションを承認する）」というページが表示されます。「Authorize Netlify Auth（Netlify認証を承認する）」と書かれていますので、「Authorize Netlify（Netlifyを承認する）」ボタンをクリックする。

クリックすると、「QUICKSTART GUIDE」のウインドウが表示されます。「Next」ボタンでGUIDEを読むか、ウインドウ上部の「☓」ボタンでGUIDEを閉じます。

閉じると、Netlifyのダッシュボード（管理画面）が現れます。

■Gitから新しいサイトを作成する（使い方）

Gitから新しいサイトを作成する場合は、Netlifyのダッシュボード（管理画面）内の「New site from Git」ボタンをクリックします。

クリックすると、「Create a new site」と表示されます。「サイトのソースコードがホストされているGitプロバイダーを選択します。「サイトのソースコードがホストされているGitプロバイダーを選択します。（Choose the Git provider where your site’s source code is hosted.
）」と書かれていますので、Gitプロバイダーを選択します。今回は「Github」を選択します。

「Github」と表示されているボタンをクリックします。

クリックすると、「Authorize Netlify（Netlifyを承認する）」のページが表示されます。「Netlifyは以下の許可を求めています。（Netlify by Netlify would like permission to:）」と書かれていますので、許可するために、「Authorize Netlify（Netlifyを承認する）」をクリックします。

クリックすると、GitHubへ移動します。「Netlifyのインストール（Installing Netlify）」のページが表示されます。Netlifyのインストールを行うために、「All repositories（すべてのリポジトリ）」か、「Only select repositories（選択したリポジトリのみ）」かを選択します。

今回は「All repositories（すべてのリポジトリ）」を選択します。

選択後、「Install」ボタンをクリックします。

クリックすると、「Confirm password（パスワードの確認）」のページが表示されます。「続行するにはパスワードを確認してください（Confirm password to continue）」と書かれていますので、「Password」の入力欄にパスワードを入力し、「Confirm password（パスワードの確認）」ボタンをクリックします。

クリックすると、ページが閉じます。

閉じた後に、再度「Create a new site（https://app.netlify.com/start）」にアクセスします。アクセス後、「Github」と表示されているボタンをクリックします。

クリックすると、「Create a new site」の下のステップが1つ進み、「2.Pick a repository（リポジトリを選択する）」となります。「Choose the repository you want to link to your site on Netlify.（Netlifyのサイトにリンクするリポジトリを選択します。）」と書かれていますので、下に表示されているリポジトリから選択します。

選択後、クリックします。

クリックすると、「Create a new site」の下のステップが1つ進み、「3.Build options, and deploy!（ビルド・オプションとデプロイ!）」となります。

「Deploy settings for （リポジトリ名・保管場所名）
Get more control over how Netlify builds and deploys your site with these settings.リポジトリ名・保管場所名の設定を使用して、Netlifyがサイトを構築および展開する方法をより詳細に制御できます」と書かれていますので、「Owner（オーナー）」や「Branch to deploy（デプロイするブランチ」を設定します。今回は「Owner（オーナー）」で「main」に設定します。

設定後、ページを下に移動させます。移動させると「Basic build settings（基本的なビルド設定）」という項目が確認できます。今回はビルドを使っていません。また静的サイトジェネレータまたは構築ツールも使用していませんので、記入はしません。記入しなくてもサイトを作成するこことができます。

一番下に「Deploy site（展開するサイト）」というボタンがあるので、こちらをクリックします。クリックすると、サイトが作成されて公開されます。

クリック後、「Site overview（サイトの概要）」ページに移動します。ページ上部にURLが表示されていますので、こちらをクリックします。

クリックすると、作成されたサイトが確認できます。

■Netlify（ネトリファイ）の料金プラン

Netlify（ネトリファイ）の料金プランは、STARTER（スターター）プランであれば、Free（無料）で利用できます。STARTER（スターター）プランの範囲は、「個人的なプロジェクト（個人利用）、趣味のサイト、実験」となります。

プロ、ビジネスなどの有料プランに関しては、こちら（https://www.netlify.com/pricing/）から料金を確認できます。