【LP + Netlify】Netlifyを使用して、制作した LP を納品する方法【全て無料】

  • このエントリーをはてなブックマークに追加
  • LINEで送る

こんにちは、0371です。

今日は、個人から依頼を受けた LP の納品方法を記事に残します。

作成したのは、合計2ページの簡単なホームページです。

デプロイ先に Netlify を選択しているため、サーバー維持費もドメイン名維持費もかかりません。無料です。

初めての納品なので、これがベストプラクティスではありませんが、参考になれば幸いです。

スポンサーリンク

【LP納品 – Gmailの作成】

まずは、受け渡し用の Gmail を作成します。

メールアドレスは、LP の名前。

パスワードは自動生成して、ランダムな英数字を12文字程度のものにしました。

設定した情報をWordなどにコピペして、忘れないようにします。

 

【LP納品 – GitHubアカウントの作成】

次に、Netlify にデプロイするために、専用のGitHubアカウントを作成します。

先ほど作成したメールアドレスと、GitHub用に自動生成したパスワードを使って、アカウントを作成します。

 

レポジトリ名は LP の名前にしておきます。

公開範囲は public でも private でもどちらでも大丈夫ですが、 private にしておいた方がいいでしょう。

 

メール認証があるので、作成したメールアドレスの受信箱を確認して、メール認証を完了させましょう。

ここでも設定した情報をWordなどにコピペして、忘れないようにします。

 

【LP納品 – GitHub に LP をプッシュ】

GitHubのアカウントを作成したので、プッシュしましょう。

ターミナルを開いて、以下のコマンドを順に入力していきます。

これでプッシュが完了しました。

 

【LP納品 – Netlify へのデプロイ】

次に、Netlify へのデプロイを行います。

まずは、アカウントの作成です。

Gmail と Netlify 専用の自動生成したパスワードを使用します。

その後、メール認証を完了させます。

設定した情報をWordなどにコピペして、忘れないようにしましょう。

 

次に、New site from Git をクリックします。

すると、LP をプッシュした先を尋ねられるので、使用したVCS (バージョン管理システム(Version Control System)) を選択しましょう。

ここでは、GitHub を使用したので、GitHubを選択します。

GitHub にプッシュした LPの名前が表示されるので、選択します。

その前にGitHub のレポジトリ全てを Netlify に 持ってきますか?みたいな意味の表示が出るかもしれませんが、それはお好みで。

自分は Only select repositories レポジトリ選択 にしました。

特に設定を変えることなく、Deploy site をクリックします。

これで、Netlify にデプロイすることができ、LP がネット上に公開されました。

Getting started の Your site is deployed にチェックがついていれば、正常にデプロイされています。

左上にあるURLをクリックすると、LP にアクセスすることができます。

 

お気づきかと思いますが、Netlify 側で自動的にSSLサーバー証明書を発行してくれているので、URL が https から始まっています。

Netlify の素晴らしいポイントの一つですね!

 

しかし、この URL はランダムに生成された文字列なので、URL だけではどんなサイトにアクセスするのかがわかりません。

そこで、URL の設定を行うために、Domein setting をクリックします。

Custom domains の Options の Edit site name をクリック。

ここで、LP の URL を変更することができます。

残念ながら、第二ドメインの netlify は消せないことになっています。

独自ドメインを使用することで解決できますが、ここでは言及しません。

これで URL の変更ができました。

変更後の URL で、遷移先が作成した LP であることを確認してください。

 

【LP納品 – Netlify form を使用する準備】

最後に、お問い合わせ内容を任意のメールアドレスに転送する設定を行いましょう。

事前に、LP の HTML にNetlify form を使用するための準備をしておきます。

以下は一例です。

フォームの送信に成功した際の遷移先も用意しておいた方が親切です。

form タグのaction 属性で指定することができます。

だから、2ページ作成する必要があったのですね。

 

これで、Netlify form を使用する準備ができました。

 

【LP納品 – お問い合わせ内容の転送先メール設定】

Netlify にアクセスして、Site setting をクリック。

左のメニューから Form を選択し、Add notification の Email notification をクリック。

真ん中の入力欄に、お問い合わせ内容を転送したいメールアドレスを入力します。

その後、Save をクリック。

Form notification の欄に メールアドレスが表示されていたら成功です。

試しに LP のお問い合わせフォームから情報を送信してみましょう。

これで送信します。

 

すると、Netlify form で設定したメールアドレスにメールが届きます。

件名は LP のURL  になっています。

送信した内容と同じことが確認できたら、成功です!

 

【LP納品 – 最後の仕上げ】

では、Gmail、GitHub、Netlify からログアウトします。

そして、パスワードなどをまとめたWordファイルを クライアントが指定するメールアドレスに送信します。

必ず暗号化、もしくはパスワード付きにして送りましょう。

また、パスワードは別のメール送信で送った方がいいですね。

隙を生じぬ二段構え。

これで納品完了です。

 

【LP納品 – まとめ】

これで、サーバー維持費、ドメイン名維持費を無料でクライアントに LP を納品することができました。

Netlify のおかげでこんなに簡単にデプロイすることができるとは、いい時代ですねw

Netlify を知らなかった方もこの機会にぜひ試してみてください!

  • このエントリーをはてなブックマークに追加
  • LINEで送る