この投稿では、GitHubへのgit push
を引き金に、gitリポジトリ内の静的HTMLをNetlifyにデプロイし、サイトを公開する方法を紹介します。
本稿の手法は、Netlify入門者が分かるよう、下記のとおり極限まで単純化してます:
静的サイトジェネレーター不使用
「HTMLをgit push
したら、Netlifyにデプロイできる」を体験することが本稿の目的です。なので、現実のサイト構築で使うことになる静的サイトジェネレーターは使いません。現実的なデモではないですが、HTMLをデプロイできることが知れれば、静的サイトジェネレータで生成したHTMLもデプロイできることになるので、ここで学んだことは活きます。
作るのはHTML1ファイル & Netlify設定ファイル1つ
作るファイルはHTML1つと、Netlifyの設定ファイル1つだけです。HTMLは__「Hello World」の1行だけ__で、CSSもJavaScriptも使いません。Netlifyの設定ファイル(詳細は後述しますが)も、__2行だけ__です。
git pushでサイトを公開する極小手順
主なステップ
- 準備1: GitHubにリポジトリを作る。
- 準備2: Netlifyでサイトを作る。
- 運用: HTMLを更新してgit push
準備1: GitHubにリポジトリを作る
まず、公開したいHTMLを入れておくGitHubリポジトリを1つ作ります。そのリポジトリは空っぽでOKです。READMEとかもいりません。リポジトリはプライベートリポジトリでも構いません。
ここでは、netlify-playground
という名前のGitHubリポジトリを作ったとします。
# 作ったリポジトリをclone
git clone git@github.com:suin/netlify-playground.git
# HTMLファイルとNetlify設定ファイルを作る
cd netlify-playground/
mkdir public/
touch public/index.html
touch netlify.toml
各ファイルの中身はこう:
Hello World
[build]
publish = "public/"
netlify.tomlのbuild.publish
は、どのディレクトリを公開するかの設定です。ここでは、public/index.html
をトップページにしたいので、"public/"
を指定しています。
ファイルができたら、コミットしてプッシュしておきます:
git add -A .
git commit -m "add public/index.html and netlify.toml"
git push
以上で、GitHub側の準備はOKです。
準備2: Netlifyでサイトを作る
続いて、Netlifyで新規サイトを作り、GitHub連携をします。
前提として、Netlifyにサインアップして、アカウントを作っておいてください。なお、サインアップする際は、GitHubアカウントで認証しておいたほうがスムーズです。
「Sites」の「New site from Git」を押します:
![Sites___suin.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F889%2Fe145b943-1678-3fb7-a4cc-329a6dfad683.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4d32e617b0c42b49e75169d527098ffa)
「Create a new site」では「GitHub」を選びます:
![Create_a_new_site___Netlify.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F889%2F94402c07-bd72-5b95-5784-8a8a6af754fb.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6aed22b2877ba433d8a3e96d9532993a)
GitHubのアプリ連携画面が出るので、Netlifyのインストール先として、先ほどgit push
したリポジトリがあるアカウントを選びます:
![Installing_Netlify.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F889%2F7a518f72-5ac5-96f9-7c38-86aead474abd.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=78eea8c875cd6d45284d4f19064c2787)
GitHubの認可画面が出るので、Netlifyがアクセスできるリポジトリを選びます。デフォルトの「All repositories」でもいいですが、権限を必要最低限にしておく場合は「Only select repositories」を選択して、リポジトリを絞っておきます:
![Installing_Netlify.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F889%2Fbafe03da-8398-5f34-3f55-d0274864b30f.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=12bf4f0838696bb87be88416b2952411)
「Install」を押すと、GitHubの画面が閉じて、Netlifyの管理画面に戻ってきます。リポジトリをクリックします:
![Create_a_new_site___Netlify.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F889%2Ff4151bdb-9510-0d77-908f-08c62d69229a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=774bf911d6e27c86ce8f33637160af71)
最後に、デプロイ設定ページが出ますが、ここは何も変えずに「Deploy」を押します:
![Create_a_new_site___Netlify.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F889%2F292bc3df-4f16-4460-00c7-fae97511ac5b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7df40f33caa861f71642b87eda7bc73b)
サイトの概要ページが表示され、数秒すると、作ったindex.html
がデプロイされ、サイトが公開されます。サイトは、ランダムなドメインが割り当てられ、そこにアクセスするとサイトを見ることができます:
![Overview___awesome-edison-beeb6f.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F889%2Fa5a8f7a8-3df9-5aa7-f1ca-3bc14413c7ad.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=15484cd9b1fbe4d827524427c6e32d71)
公開されたサイトの様子:
![Screen Shot 2020-05-07 at 9.51.42.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F889%2F9af7745d-6942-a2a1-d35e-f54d7ea1ced1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b3866f494b9a62cab69d38b6c3f8d843)
以上で、Netlifyでサイトを作る手順は終わりです。
運用: HTMLを更新してgit push
最後に、サイトの運用として、HTMLを更新してgit push
してみます。
public/index.htmlを変更して、:
Hello World!
+Edit
git push
します:
git add -A
git commit -m "edit index.html"
git push
すると、Netfily上でデプロイが走り、公開されます:
![Overview___awesome-edison-beeb6f.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F889%2F554f789a-dbb5-26b1-14c8-44deb46845b7.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7fac388d7b50c5e746a4ef4a695a0226)
サイトにアクセスすると、更新されたサイトが見れます:
![https___awesome-edison-beeb6f_netlify_app.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F889%2Fe984c0ca-9e34-9e87-dfb8-28f45065210b.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=8a9d8b7b280f9b23cb72e3dd4c9bdd2a)
おわり
以上、Netlifyを使った「git pushでサイトを公開する極小手順」の説明でした。コンテンツを更新したらgit push
するだけで、サイトを公開できるようになっているのが分かったかと思います。
現実のサイト運用では、テキストコンテンツはMarkdownで書いて、HTMLの生成はGatsbyやHugoなどの静的サイトジェネレーターにやらせるという流れになります。
Netlifyでは、git push
した際に、静的サイトジェネレーター起動→HTML生成の処理をNetlifyにやらせることもできます。詳しくは公式ドキュメントを参照ください:
最後までお読みくださりありがとうございました。Twitterでは、Qiitaに書かない技術ネタなどもツイートしているので、よかったらフォローしてもらえると嬉しいです→Twitter@suin