Netlify + GitHub 環境で簡単にサイトを公開する方法
今回は Netlify + GitHub 環境で簡単にサイトを公開する方法 について解説したいと思います!
「 Netlify 」は静的コンテンツのホスティングサービスです。
GitHub や GitLab、Bitbucket のリポジトリに置いてある静的コンテンツを比較的簡単な設定で Web 上に公開することができます。
サイトを更新する場合も、GitHub に更新内容をプッシュするだけでサイトが更新 され、非常に便利です。
その他、公開用ブランチやディレクトリの選択が自由 だったり、無料枠の範囲で独自ドメインを設定できる など、簡単設定かつ高機能、懐にも優しいサービス内容となっています。
目次
簡単な流れ
本記事では、以下のような流れで解説を進めていきます。
- 公開用 GitHub リポジトリの作成とサンプルコードの追加
- Netlify でサイト公開設定
- 公開サイトの確認と内容変更チェック
- 公開 URL の調整
- まとめ
では、早速、Netlify でサイトを公開する設定方法を解説していきたいと思います!
公開用の GitHub リポジトリの作成
リポジトリ作成 & クローン
まずは、GitHub で公開用のリポジトリを作成してください。
私の場合は、以下のような感じでリポジトリを作成しました。
リポジトリを作成したら、ローカル環境にクローンしてください。
公開用のブランチを作成
master ブランチでも問題ないですが、今回は実際の運用を考慮して、production ブランチで公開 してみたいと思います。
production ブランチを作成してチェックアウトしてください。
公開用ファイルを追加
Netlify では公開ディレクトリを選択できます。
せっかくなので、今回は public
ディレクトリを作成して公開 することにします。
public
フォルダを追加して、index.html
を追加してください。
ディレクトリ構成は以下のような感じになります。
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
ボタンをクリックしてください。
Git ホスティングサービスの選択ページが表示されるので、GitHub
ボタンをクリックしてください。
権限確認ページが出たら、内容を確認して許可してください。
以上で、Netlify へのサービス登録は完了です。
サイトの公開
続いて、サイトの公開設定を進めて行きます。
登録後に開くページに、New site from Git
というボタンが表示されるので、New site from Git
ボタンをクリックしてください。
Gitプロバイダの選択ページが表示されます。今回は GitHub
リポジトリを使用するので GitHub
を選択してください。
Netlify のインストール
「 Netlify のインストール」ページが表示されるので、権限の内容などを確認した上で Install
ボタンをクリックしてください。
公開リポジトリの選択
公開したいリポジトリを選択してください。
公開したいリポジトリが表示さない場合は...
公開したいリポジトリが表示されていない場合は、下の方にある Configure the Netlify app on GitHub
というリンクをクリックしてください。
Netlifyのインストールページが表示されるので、公開したいリポジトリにインストールしてください。
デプロイ設定
デプロイ設定ページが開くので、デプロイ設定を進めていきます。
今回設定する内容は、公開するブランチの選択 と 公開用ディレクトリの設定 の2つだけです。
公開するブランチの選択
まずは、公開用のブランチを設定します。
Branch to deploy
の項目から「 production 」を選択してください。
公開用ディレクトリの設定
続いて、Publish directory
の欄にを「 public 」と入力してください。
サイト公開
Deploy site
ボタンをクリックしてください。
以上でサイトの公開は完了です!
公開サイトの確認
サイトの公開が完了すると、以下のような項目が表示されるます。
サイト 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
ボタンを押してください。
Site name
の欄に好みのサイト名を入力して、 Save
ボタンを押してください。
最後に、変更した URL を開いて、公開ページが表示されれば URL の変更は成功です!
まとめ
以上、「 Netlify + GitHub 環境で簡単にサイトを公開する方法」を解説してみました!
類似サービスである GitHub Pages と比較して、ブランチの選択が自由 なところ、公開用ディレクトリの選択が自由 なところが便利です。
また、今回は紹介していませんが、無料枠の範囲内で独自ドメインが利用できる のもありがたいです。
最後に、簡単に今回の内容についてまとめてみたいと思います。
- ブランチの選択が自由
- 公開用ディレクトリの選択も自由
- GitHub で楽々ソース管理!
ご清聴ありがとうございました。
次回は、Netlify で独自ドメインを設定する方法について解説したいと思います!