はじめてのNetlify: git pushでサイトを公開する極小手順

この投稿では、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. 準備1: GitHubにリポジトリを作る。
1. 準備2: Netlifyでサイトを作る。
2. 運用: HTMLを更新してgit push

### 準備1: GitHubにリポジトリを作る

まず、公開したいHTMLを入れておくGitHubリポジトリを1つ作ります。そのリポジトリは空っぽでOKです。READMEとかもいりません。リポジトリはプライベートリポジトリでも構いません。

ここでは、`netlify-playground`という名前のGitHubリポジトリを作ったとします。

```shell
# 作ったリポジトリをclone
git clone git@github.com:suin/netlify-playground.git

# HTMLファイルとNetlify設定ファイルを作る
cd netlify-playground/
mkdir public/
touch public/index.html
touch netlify.toml
```

各ファイルの中身はこう:

```html:public/index.html
Hello World
```

```toml:netlify.toml
[build]
  publish = "public/"
```

netlify.tomlの`build.publish`は、どのディレクトリを公開するかの設定です。ここでは、`public/index.html`をトップページにしたいので、`"public/"`を指定しています。

ファイルができたら、コミットしてプッシュしておきます:

```shell
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」を押します:

<img width="965" alt="Sites___suin.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/e145b943-1678-3fb7-a4cc-329a6dfad683.png">

「Create a new site」では「GitHub」を選びます:

<img width="965" alt="Create_a_new_site___Netlify.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/94402c07-bd72-5b95-5784-8a8a6af754fb.png">

GitHubのアプリ連携画面が出るので、Netlifyのインストール先として、先ほど`git push`したリポジトリがあるアカウントを選びます:

<img width="1071" alt="Installing_Netlify.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/7a518f72-5ac5-96f9-7c38-86aead474abd.png">

GitHubの認可画面が出るので、Netlifyがアクセスできるリポジトリを選びます。デフォルトの「All repositories」でもいいですが、権限を必要最低限にしておく場合は「Only select repositories」を選択して、リポジトリを絞っておきます:

<img width="596" alt="Installing_Netlify.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/bafe03da-8398-5f34-3f55-d0274864b30f.png">

「Install」を押すと、GitHubの画面が閉じて、Netlifyの管理画面に戻ってきます。リポジトリをクリックします:

<img width="965" alt="Create_a_new_site___Netlify.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/f4151bdb-9510-0d77-908f-08c62d69229a.png">

最後に、デプロイ設定ページが出ますが、ここは何も変えずに「Deploy」を押します:

<img width="965" alt="Create_a_new_site___Netlify.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/292bc3df-4f16-4460-00c7-fae97511ac5b.png">

サイトの概要ページが表示され、数秒すると、作った`index.html`がデプロイされ、サイトが公開されます。サイトは、ランダムなドメインが割り当てられ、そこにアクセスするとサイトを見ることができます:

<img width="965" alt="Overview___awesome-edison-beeb6f.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/a5a8f7a8-3df9-5aa7-f1ca-3bc14413c7ad.png">

公開されたサイトの様子:

<img width="716" alt="Screen Shot 2020-05-07 at 9.51.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/9af7745d-6942-a2a1-d35e-f54d7ea1ced1.png">

以上で、Netlifyでサイトを作る手順は終わりです。

### 運用: HTMLを更新してgit push

最後に、サイトの運用として、HTMLを更新して`git push`してみます。

public/index.htmlを変更して、:

```diff:public/index.html
 Hello World!
+Edit
```

`git push`します:

```shell
git add -A
git commit -m "edit index.html"
git push
```

すると、Netfily上でデプロイが走り、公開されます:

<img width="965" alt="Overview___awesome-edison-beeb6f.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/554f789a-dbb5-26b1-14c8-44deb46845b7.png">

サイトにアクセスすると、更新されたサイトが見れます:

<img width="716" alt="https___awesome-edison-beeb6f_netlify_app.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/e984c0ca-9e34-9e87-dfb8-28f45065210b.png">

## おわり

以上、Netlifyを使った「git pushでサイトを公開する極小手順」の説明でした。コンテンツを更新したら`git push`するだけで、サイトを公開できるようになっているのが分かったかと思います。

現実のサイト運用では、テキストコンテンツはMarkdownで書いて、HTMLの生成は[Gatsby]や[Hugo]などの静的サイトジェネレーターにやらせるという流れになります。

[Gatsby]:https://www.gatsbyjs.org/
[Hugo]: https://gohugo.io/

Netlifyでは、`git push`した際に、静的サイトジェネレーター起動→HTML生成の処理をNetlifyにやらせることもできます。詳しくは公式ドキュメントを参照ください:

- [A Step-by-Step Guide: Gatsby on Netlify | Netlify](https://www.netlify.com/blog/2016/02/24/a-step-by-step-guide-gatsby-on-netlify/)
- [Host on Netlify | Hugo](https://gohugo.io/hosting-and-deployment/hosting-on-netlify/)

---

最後までお読みくださりありがとうございました。Twitterでは、Qiitaに書かない技術ネタなどもツイートしているので、よかったらフォローしてもらえると嬉しいです:relieved:→[Twitter@suin](https://twitter.com/suin)