2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-08-14

やりたいこと

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

手順

コーディング用のリポジトリを作成

スクリーンショット 2018-08-14 23.16.05.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された...!

スクリーンショット 2018-08-14 23.22.05.png

netlifyで新規プロジェクトを作成

※ アカウント未作成の人はあらかじめ作成しておく

スクリーンショット 2018-08-14 23.25.27.png
  • 「Github」
スクリーンショット 2018-08-14 23.26.25.png
  • 今回作成したリポジトリを指定...!
スクリーンショット 2018-08-14 23.28.33.png
  • デプロイ設定
    • デプロイするブランチを指定(今回は master
    • ビルドスクリプトの指定 npm run build とか...(今回はビルドとかはないので未指定)
    • 公開するディレクトリの指定 dist/ とか...(今回はルートディレクトリに index.html のみなので未指定)
    • ビルド時に必要な環境変数があれば設定可能
スクリーンショット 2018-08-14 23.34.32.png
  • 「Deploy site」...!

  • ...しばらく待つと

スクリーンショット 2018-08-14 23.36.23.png スクリーンショット 2018-08-14 23.37.48.png

[参考1] デプロイされたらslackに通知させたい

  • [Site settings] > 「Build & deploy」 > 「Add notification」
スクリーンショット 2018-08-15 0.02.20.png
  • 通知タイミングを設定...!(今回は Deploy succeeded
  • Webhook URLにはslackで取得したIncoming WebHooksのURL(channel指定があれば合わせて指定)
スクリーンショット 2018-08-15 0.02.27.png
  • この状態で適当にファイルを修正して、push...!
  • デプロイされたのがslackにきた...!
スクリーンショット 2018-08-15 0.31.40.png

[参考2] 修正してプルリクエスト作成で新たにプレビューページを作成したい

  • master ブランチから新たにブランチを作成
  • 適当にファイルを修正していpush+プルリクエスト作成...!
スクリーンショット 2018-08-15 0.27.42.png
  • デプロイされたのがslackにきた...!(2回目)
スクリーンショット 2018-08-15 0.28.21.png
  • 「Create pr」 のリンクを押すと、プルリクで作成した状態のソースでプレビューが確認できる...!

[参考3] プレビュー状態のサイトに認証をつけたい

  • Site settings] > 「Access control」
スクリーンショット 2018-08-15 0.35.19.png
  • paid team plans じゃないとできないらしい...?
2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?