Netlifyを使う

ガイド

Web サイトを初めて公開するときは誰でも緊張するものです。しかし、Netlify を使えば、この手順は驚くほど簡単です。ここでは、メールアドレスで Netlify のアカウントを作成し、ファイルを提出してサイトを公開する手順をご紹介します。

1. Netlify にサインアップする

まずは、Netlify にサインアップすることから始めましょう。

Netlify にアクセスします。
『Sign up』をクリックします 画面右上の『Sign up』ボタンを見つけてクリックします。
メールアドレスでのサインアップを選択します。 いくつかのサインアップオプションが表示されますが、一番下にある小さな文字で書かれた『Sign up with email』をクリックします。
必要な情報を入力します メールアドレスとパスワードを入力します。
サインアップを完了します 入力した情報を確認し、『Sign up』ボタンをクリックしてサインアップを完了します。
メールが届きます サインアップ時に入力したメールアドレス宛にNetlifyからメールが来ます。そのメールにある”Verify email”というリンクをクリックします。

Netlifyのアンケートに適当に答えます この回答が動画と違くてもUIにあまり影響はないと思うので、軽い気持ちで選んで大丈夫です。
１問目の質問は、Netlifyをどのような感じで使っていくのか、ということです。私は、個人で使う目的なのでPersonal(個人)を選びました。
２問目の質問は、Netlifyでどんなサイトを初めに公開する感じなのか、ということです。私はPersonal site(個人サイト)を選びました。
３問目の質問は、あなたはフリーランスの方ですか、それとも趣味の人ですか？またはその他に当てはまりますか？ということです。私は面倒なのでとりあえずotherを選択しました。
その下にあるWhat is the name of your teamの入力欄には、個人なので特に何も書かず空白のままにしました。
そしたら全ての回答が完了したので、Continue to deployをクリックします。
第一ステップ完了！ これにより、ダッシュボード画面に移動し第一ステップは終わりました。

2. Web サイトをアップロードする

サインアップが完了したら、次は Web サイトのファイルをアップロードします。

Netlify ダッシュボードにアクセスする サインアップ後、Netlify のダッシュボードに自動的に移動します。そうでない場合は、再度Netlify にアクセスし、画面右上の「Log in』という文字をクリックするとアカウントのダッシュボード画面に移動すると思います。もしもログイン画面が表示されたら先ほど登録したメールアドレスとパスワードを使ってログインしてください。
新しいサイトを作成します あなたは現在アカウントのホーム画面にいると思います。その画面のSitesエリアの下にある点線で囲まれた領域があるのが見えると思います。その中にあるbrowse to uploadという文字のリンクをクリックしてください。
すると、自分のパソコンにあるファイルを選択するダイアログボックスが表示されます。
ファイルをアップロードします 私があなたに提出した(であろう)websiteフォルダを開いてください。するとその中には、sourceフォルダとbuildフォルダの2つのフォルダがあります。そのうちのbuildフォルダを選択しアップロードをクリックしてください。
確認アナウンスが表示されます 前のステップでアップロードをクリックすると、「build」のすべてのファイルがアップロードされます。この操作は、サイトを信頼できる場合にのみ行ってください。と確認されるので、アップロードをクリックしてください。
アップロードを待ちます ファイルのアップロードが完了するまでしばらくお待ちください。これには数分かかることがあります。
公開を確認します アップロードが完了すると、Deploy success!と表示されます。これでWebサイトが公開されました！とりあえずDismissボタンをクリックしてダイアログボックスを閉じます。
公開されたWebサイトを確認します Open production deployというボタンをクリックします。すると、現在公開されているあなたのWebサイトが表示されました！

これであなたの Web サイトは無事に公開されました、おめでとうございます 🎉
以上で、Netlify を使って Web サイトを公開するプロセスは完了です。

しかし、あなたはもしかしたら現在の URL を気に入っていないかもしれません。そこでオプションとして、以下にその URL を変更する手順も記載しましたので、良ければご覧ください。

オプション: Web サイトの URL を好きな文字にする

ここでは先ほど取得した、ランダムな文字列.netlify.appの、ランダムな文字列の箇所の名前を変更する方法を示します。

ダッシュボード画面にアクセスする 前のステップの、はじめにアクセスしていた画面に戻ります。
自分のサイトをクリックする Sites エリアに、先ほど自分があげた Web サイトが表示されていると思います。それをクリックします。
Domain management をクリックする 現在のあなたが見ている画面は、2 でクリックしたサイトの設定画面です。
その画面左のナビゲーションにある、Domain managementをクリックします。
編集画面に移動する Production domains というエリアの左中央にあるOptionsをクリックします。
すると、Edit site nameと表示されるので、それをクリックします。
名前を変更する Site name というラベルの下にある入力欄に、自分の好きな文字を入力します。これは.netlify.appの前にあるランダムな文字列を置き換える作業です。
Save を押す 入力欄の下にあるSaveをクリックします。
この時、This site name is already takenという赤い文字が出た場合、それはすでに誰かが使用済みであるため使えないことを意味します。別の名前に変更して再度Saveをクリックしましょう。

これにより、最初のランダムな文字列.netlify.appという URL が、自分の好きな文字列.netlify.appという URL に切り替わりましたので、それにアクセスしてみてください。これで名前を変更する作業は完了しました。

しかし、あなたは現在の URL にもまだ満足していないかもしれません。もしあなたがURLの末尾を.netlify.appではなく、.jpや.comにしたいと考えている場合は、次のステップへお進みください。