やりたいこと
- 作ったhtml,cssをお試しで誰もがwebで見られるようにしたいな
- フロントのコーディングを自分以外の人に頼んでいるとかで、プレビューサイトをお手軽につくりたいな
手順
コーディング用のリポジトリを作成
![スクリーンショット 2018-08-14 23.16.05.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F126002%2F5ee3b15d-d855-2b78-c5e7-62033567f638.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f47d2074f3fae8988762b029f9d7fdf1)
適当に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された...!
![スクリーンショット 2018-08-14 23.22.05.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F126002%2F1367e5ac-804d-21fd-a9f8-86f8b5080ccb.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6c08490c52bbe5efc97ab227232413c9)
netlifyで新規プロジェクトを作成
※ アカウント未作成の人はあらかじめ作成しておく
- https://app.netlify.com/ にアクセス...!
- 「New site from Git」
![スクリーンショット 2018-08-14 23.25.27.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F126002%2F0fa26534-fdc9-4d30-5f73-5974fafd4a00.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=1f506af0814d993cf40b60a006ca7de8)
- 「Github」
![スクリーンショット 2018-08-14 23.26.25.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F126002%2F9348fb70-82e8-b084-09a2-85974fd4041e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=84791720df7e43f1c8e8fb65f5e3319a)
- 今回作成したリポジトリを指定...!
![スクリーンショット 2018-08-14 23.28.33.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F126002%2Ffb2c36c6-2ba4-7695-0dd2-e74c06203273.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=716067ffab55c38ecef1824ef51bc530)
- デプロイ設定
- デプロイするブランチを指定(今回は
master
) - ビルドスクリプトの指定
npm run build
とか...(今回はビルドとかはないので未指定) - 公開するディレクトリの指定
dist/
とか...(今回はルートディレクトリにindex.html
のみなので未指定) - ビルド時に必要な環境変数があれば設定可能
- デプロイするブランチを指定(今回は
![スクリーンショット 2018-08-14 23.34.32.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F126002%2Fde26761c-928d-24e6-8832-be0285f20dde.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=36bd6fe1e016fffc7bc472c79134dc9b)
-
「Deploy site」...!
-
...しばらく待つと
![スクリーンショット 2018-08-14 23.36.23.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F126002%2Fd6a80026-5b25-7615-35dd-b3903ce8aaba.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5ac2303758fd6f248fd95044a0b98b37)
- https://vigorous-booth-03d123.netlify.com/ に作成したhtmlが表示されるよ
![スクリーンショット 2018-08-14 23.37.48.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F126002%2F1763f36c-81d7-38bb-1587-6887a08aa140.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=331bcfef2b645bca50d930d603180a79)
[参考1] デプロイされたらslackに通知させたい
- [Site settings] > 「Build & deploy」 > 「Add notification」
![スクリーンショット 2018-08-15 0.02.20.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F126002%2F27fe4453-0b47-c946-5b8f-53533480f14f.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=79cd11c632a966db628b27369e9cb103)
- 通知タイミングを設定...!(今回は
Deploy succeeded
) - Webhook URLにはslackで取得したIncoming WebHooksのURL(channel指定があれば合わせて指定)
![スクリーンショット 2018-08-15 0.02.27.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F126002%2F06f8b906-1c59-f838-beea-cffd1ce11801.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5c301b526fff456e559d978e320b5859)
- この状態で適当にファイルを修正して、push...!
- デプロイされたのがslackにきた...!
![スクリーンショット 2018-08-15 0.31.40.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F126002%2Fb8f08f8f-9535-d650-6719-46d82e46ce86.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ae2d59c6d614f22ad68356beda2d7d7d)
[参考2] 修正してプルリクエスト作成で新たにプレビューページを作成したい
-
master
ブランチから新たにブランチを作成 - 適当にファイルを修正していpush+プルリクエスト作成...!
![スクリーンショット 2018-08-15 0.27.42.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F126002%2Feb846fe3-40a9-b8b7-f8d0-015faff018d2.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=654bf637c2322e4c69dc10cfe6da840b)
- デプロイされたのがslackにきた...!(2回目)
![スクリーンショット 2018-08-15 0.28.21.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F126002%2F4031da62-c2eb-ff3c-7915-ee0da1ec1b57.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e518ea8e274789b0c425bd509fbc6502)
- 「Create pr」 のリンクを押すと、プルリクで作成した状態のソースでプレビューが確認できる...!
[参考3] プレビュー状態のサイトに認証をつけたい
- Site settings] > 「Access control」
![スクリーンショット 2018-08-15 0.35.19.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F126002%2F77c6e3c4-1a2c-b8a8-7723-f9604adb54af.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=758f9fc3de373e7c11c9c66a6664e618)
-
paid team plans
じゃないとできないらしい...?