Github+Netlifyでお手軽静的ファイル公開

# やりたいこと
- 作ったhtml,cssをお試しで誰もがwebで見られるようにしたいな
- フロントのコーディングを自分以外の人に頼んでいるとかで、プレビューサイトをお手軽につくりたいな

# 手順
## コーディング用のリポジトリを作成
<img width="793" alt="スクリーンショット 2018-08-14 23.16.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/126002/5ee3b15d-d855-2b78-c5e7-62033567f638.png">

## 適当にhtmlファイルを作成
```
$ git clone git@github.com:yomasaa/sample-netlify.git
$ vi index.html
test
$ git add index.html
$ git commit -m "Add 'index.html'"
$ git push
```

これで、超適当なhtmlが作成されて、githubにpushされた...!

<img width="798" alt="スクリーンショット 2018-08-14 23.22.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/126002/1367e5ac-804d-21fd-a9f8-86f8b5080ccb.png">

## netlifyで新規プロジェクトを作成
※ アカウント未作成の人はあらかじめ作成しておく

- https://app.netlify.com/ にアクセス...!
- 「New site from Git」 

<img width="1034" alt="スクリーンショット 2018-08-14 23.25.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/126002/0fa26534-fdc9-4d30-5f73-5974fafd4a00.png">

- 「Github」

<img width="1009" alt="スクリーンショット 2018-08-14 23.26.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/126002/9348fb70-82e8-b084-09a2-85974fd4041e.png">

- 今回作成したリポジトリを指定...!

<img width="995" alt="スクリーンショット 2018-08-14 23.28.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/126002/fb2c36c6-2ba4-7695-0dd2-e74c06203273.png">

- デプロイ設定
    - デプロイするブランチを指定（今回は `master` ）
    - ビルドスクリプトの指定 `npm run build` とか...（今回はビルドとかはないので未指定）
    - 公開するディレクトリの指定 `dist/` とか...（今回はルートディレクトリに `index.html` のみなので未指定）
    - ビルド時に必要な環境変数があれば設定可能

<img width="862" alt="スクリーンショット 2018-08-14 23.34.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/126002/de26761c-928d-24e6-8832-be0285f20dde.png">

- 「Deploy site」...!

- ...しばらく待つと

<img width="855" alt="スクリーンショット 2018-08-14 23.36.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/126002/d6a80026-5b25-7615-35dd-b3903ce8aaba.png">

- https://vigorous-booth-03d123.netlify.com/ に作成したhtmlが表示されるよ

<img width="399" alt="スクリーンショット 2018-08-14 23.37.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/126002/1763f36c-81d7-38bb-1587-6887a08aa140.png">

## [参考1] デプロイされたらslackに通知させたい
- [Site settings] > 「Build & deploy」 > 「Add notification」

<img width="455" alt="スクリーンショット 2018-08-15 0.02.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/126002/27fe4453-0b47-c946-5b8f-53533480f14f.png">

- 通知タイミングを設定...!（今回は `Deploy succeeded` ）
- Webhook URLにはslackで取得したIncoming WebHooksのURL（channel指定があれば合わせて指定）

<img width="444" alt="スクリーンショット 2018-08-15 0.02.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/126002/06f8b906-1c59-f838-beea-cffd1ce11801.png">

- この状態で適当にファイルを修正して、push...!
- デプロイされたのがslackにきた...!
- 
<img width="528" alt="スクリーンショット 2018-08-15 0.31.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/126002/b8f08f8f-9535-d650-6719-46d82e46ce86.png">

## [参考2] 修正してプルリクエスト作成で新たにプレビューページを作成したい
- `master` ブランチから新たにブランチを作成
- 適当にファイルを修正していpush+プルリクエスト作成...!
<img width="612" alt="スクリーンショット 2018-08-15 0.27.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/126002/eb846fe3-40a9-b8b7-f8d0-015faff018d2.png">


- デプロイされたのがslackにきた...!（２回目）

<img width="559" alt="スクリーンショット 2018-08-15 0.28.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/126002/4031da62-c2eb-ff3c-7915-ee0da1ec1b57.png">

- 「Create pr」 のリンクを押すと、プルリクで作成した状態のソースでプレビューが確認できる...!

## [参考3] プレビュー状態のサイトに認証をつけたい
- Site settings] > 「Access control」

<img width="634" alt="スクリーンショット 2018-08-15 0.35.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/126002/77c6e3c4-1a2c-b8a8-7723-f9604adb54af.png">

- `paid team plans` じゃないとできないらしい...?