m's blog

備忘録とかメモとか

Netlify + GitHub 環境で簡単にサイトを公開する方法

Image from Gyazo

今回は Netlify + GitHub 環境で簡単にサイトを公開する方法 について解説したいと思います!

「 Netlify 」は静的コンテンツのホスティングサービスです。

GitHub や GitLab、Bitbucket のリポジトリに置いてある静的コンテンツを比較的簡単な設定で Web 上に公開することができます。

サイトを更新する場合も、GitHub に更新内容をプッシュするだけでサイトが更新 され、非常に便利です。

その他、公開用ブランチやディレクトリの選択が自由 だったり、無料枠の範囲で独自ドメインを設定できる など、簡単設定かつ高機能、懐にも優しいサービス内容となっています。

目次

簡単な流れ

本記事では、以下のような流れで解説を進めていきます。

  1. 公開用 GitHub リポジトリの作成とサンプルコードの追加
  2. Netlify でサイト公開設定
  3. 公開サイトの確認と内容変更チェック
  4. 公開 URL の調整
  5. まとめ

では、早速、Netlify でサイトを公開する設定方法を解説していきたいと思います!

公開用の GitHub リポジトリの作成

リポジトリ作成 & クローン

まずは、GitHub で公開用のリポジトリを作成してください。

私の場合は、以下のような感じでリポジトリを作成しました。

Image from Gyazo

リポジトリを作成したら、ローカル環境にクローンしてください。

公開用のブランチを作成

master ブランチでも問題ないですが、今回は実際の運用を考慮して、production ブランチで公開 してみたいと思います。

production ブランチを作成してチェックアウトしてください。

公開用ファイルを追加

Netlify では公開ディレクトリを選択できます。

せっかくなので、今回は public ディレクトリを作成して公開 することにします。

public フォルダを追加して、index.html を追加してください。

ディレクトリ構成は以下のような感じになります。

Image from Gyazo

public/index.html に以下のようなコードを追加してください。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello World!</title>
</head>

<body>
    <p>Hello World!!</p>
</body>

</html>

コミット & プッシュ

ファイルを追加したら、GitHub へプッシュしてください。

以上で、公開用リポジトリの準備は完了です!

続いて、Netlify での設定をしていきたいと思います。

Netlify で公開設定

以下のリンクをクリックして、Netlify のページを開いてください。

Netlify に登録

Netlify への登録は GitHub アカウントがあれば、比較的簡単にできます。

まずは、開いたページに表示されている、Get started for free ボタンをクリックしてください。

Image from Gyazo

Git ホスティングサービスの選択ページが表示されるので、GitHub ボタンをクリックしてください。

Image from Gyazo

権限確認ページが出たら、内容を確認して許可してください。

以上で、Netlify へのサービス登録は完了です。

サイトの公開

続いて、サイトの公開設定を進めて行きます。

登録後に開くページに、New site from Git というボタンが表示されるので、New site from Git ボタンをクリックしてください。

Image from Gyazo

Gitプロバイダの選択ページが表示されます。今回は GitHub リポジトリを使用するので GitHub を選択してください。

Image from Gyazo

Netlify のインストール

「 Netlify のインストール」ページが表示されるので、権限の内容などを確認した上で Install ボタンをクリックしてください。

Image from Gyazo

公開リポジトリの選択

公開したいリポジトリを選択してください。

Image from Gyazo

公開したいリポジトリが表示さない場合は...

公開したいリポジトリが表示されていない場合は、下の方にある Configure the Netlify app on GitHub というリンクをクリックしてください。

Netlifyのインストールページが表示されるので、公開したいリポジトリにインストールしてください。 Image from Gyazo

デプロイ設定

デプロイ設定ページが開くので、デプロイ設定を進めていきます。

今回設定する内容は、公開するブランチの選択公開用ディレクトリの設定 の2つだけです。

公開するブランチの選択

まずは、公開用のブランチを設定します。

Branch to deploy の項目から「 production 」を選択してください。

Image from Gyazo

公開用ディレクトリの設定

続いて、Publish directory の欄にを「 public 」と入力してください。

Image from Gyazo

サイト公開

Deploy site ボタンをクリックしてください。

Image from Gyazo

以上でサイトの公開は完了です!

公開サイトの確認

サイトの公開が完了すると、以下のような項目が表示されるます。

Image from Gyazo

サイト URL をクリックして表示を確認してみます。

「 Hello World!! 」と表示されれば、サイトの公開は成功です!

内容の変更チェック

内容を変更して、変更内容がしっかり適用されるか確認しておきます。

index.html を以下のように書き換えてください。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>成功!?</title>
</head>

<body>
    <p>Success!!</p>
</body>

</html>

index.html ファイルの内容を変更したら、GitHub へプッシュしてください。

先ほど開いた公開ページをリロードしてください。

「 Success!! 」と表示されれば、内容の変更は成功です。

時間帯や状況にもよりますが、私が試した時は5秒程度で適用されました。早いっ!

公開URLの調整

このままの URL だと、少し微妙なので、URL を調整します。

Netlify のページに戻って、作成したサイトの Settings ページを開いてください。

General > Site details > Site information の項目にある、Change site name ボタンを押してください。

Image from Gyazo

Site name の欄に好みのサイト名を入力して、 Save ボタンを押してください。

Image from Gyazo

最後に、変更した URL を開いて、公開ページが表示されれば URL の変更は成功です!

まとめ

以上、「 Netlify + GitHub 環境で簡単にサイトを公開する方法」を解説してみました!

類似サービスである GitHub Pages と比較して、ブランチの選択が自由 なところ、公開用ディレクトリの選択が自由 なところが便利です。

また、今回は紹介していませんが、無料枠の範囲内で独自ドメインが利用できる のもありがたいです。

最後に、簡単に今回の内容についてまとめてみたいと思います。

  • ブランチの選択が自由
  • 公開用ディレクトリの選択も自由
  • GitHub で楽々ソース管理!

ご清聴ありがとうございました。

次回は、Netlify で独自ドメインを設定する方法について解説したいと思います!