【Netlify】静的なウェブサイトを無料で公開する方法をまとめ!

こんにちは、現役エンジニアの inno_tech です。

自作したウェブサイト(静的サイト)をインターネット上に無料で公開する方法をお探しでしょうか？静的ホスティングサービスを利用すれば実現できます。

本記事を見れば、静的ホスティングサービス Netlify を使用し、GitHub上のリポジトリと連携してウェブサイトを公開する方法がわかります。

Netlifyって？

静的サイトをホスティングすることができるWebサービスを提供しています。Webサイトを公開するだけであれば無料プランが使えるので使いやすいです。

またGitHubとの連携機能を使用して、ウェブサイトのデプロイ(公開)が簡単にできる点も使いやすい特徴です。

やりたいことに応じてNetlifyが向いている人、向いていない人があるので先にまとめます。

料金プランについてはNetlify公式サイトをご覧ください。

Netlifyでウェブサイトを公開するまでのステップ

Netlifyでウェブサイトを公開するまでの手順を3ステップで説明します。

1. Netlifyのアカウントを登録
2. NetlifyとGitHubリポジトリの連携
3. デプロイ

本記事ではGitHubアカウントとリポジトリがある前提で説明しています。
GitHubの登録手順はこちらの記事をご覧ください。

あわせて読みたい

【超初心者向け】GitHubにアカウント登録～リポジトリ作成を解説！ GitHubにアカウントを登録して、プログラミングを始めたいとお考えでしょうか？ 本記事では、GitHubにアカウントを登録し、自分のプライベートリポジトリを作成するまで...

Netlifyのアカウント登録

サインアップ

はじめに Netlify公式サイトにアクセスし、アカウントを登録します。

Netlify公式サイトのトップページアクセスしたら、右上にある「Sign Up」をクリックします。

続いて、アカウントの登録画面が開きます。GitHub等のアカウントをお持ちの場合、そのアカウントで登録できます。

今回は、Emailによるアカウント登録方法を説明します。

登録用のメールアドレス、パスワードを入力したら、「Sign Up」ボタンをクリックします。

その後、メールアドレス宛に Netlify から確認メールが届きます。 velify してアカウントを有効化してください。

以上でアカウントが登録が完了です。続いてアカウントの設定を行います。

アカウントの設定

ログイン後、User settingsからProfileを登録しておきましょう。

まずは、名前(Name)を変更します。

続いて、チーム名を変更します。(変更する必要がなければスキップしてOKです。)

Team settingsタブ を開き、Edit team information をクリックします。

Name, Slug を好きな名前に変更し、Saveをクリックします。

以上でアカウントの設定も完了しました。続いてGitHubリポジトリとの連携を行います。

GitHubとの連携

Netlifyのログイン画面で、「Import from Git」というボタンがあるのでクリックします。

すると、Gitリポジトリとの連携設定画面が開きます。今回はGitHubを使用するので、「Connect to Git provider」 から GitHub を選択します。

次に、GitHubへの認証画面が開きます。連携したいGitHubのユーザー名が正しいことを確認し、Authorize Netlify をクリックして認証を許可します。

続いて、Netlifyと連携を許可するリポジトリを選択します。今回は、「All repositories(すべてのリポジトリ)」に設定しました。

ここで許可したGitHubリポジトリにGitHub AppsとしてNetlifyがインストールされます。下の画面はGitHubのリポジトリを確認した結果です。

さらに、ホスティング対象のリポジトリ を選択します。

最後にデプロイを行い、インターネット上に公開します。

Webサイトをデプロイ

説明用のリポジトリ構成

今回のリポジトリの構成は、ルートディレクトリにindex.htmlがあるものとして説明します。

Netlifyでデプロイ

Netlifyに戻り、ホスティング対象のリポジトリのデプロイ設定を行います。

• Branch to deploy (対象のGitブランチ)
• Publish directory (公開するディレクトリ)

を間違えないように注意しましょう。設定が完了したら Deploy site をクリックします。

今回のサンプルプロジェクトでは、ルートディレクトリに index.html が特に設定はいりません。

デプロイに成功すると、アクセス用のURLが表示されます。このURLにアクセスするとウェブサイトにアクセスすることができます。

以上でウェブサイトの公開ができました。レンタルサーバーを借りる必要もなく、気軽にデプロイができますね。

まとめ

日々のデスクワークで肩こりや首こりにお悩みではないでしょうか？ 1つの解決方法としてマッサージガンという器具がおすすめです。Amazonで2000件以上の口コミを得たおすすめのマッサージ器具が気になる方はこちら。

参考になったでしょうか。
ほかにも役立つ情報が他のページにもあるかもしれません。
ご覧になるかはあなた次第です!