「Deploy to Netlify」ボタンの設置方法
「Deploy to Netlify」ボタンを設置するためにDeploy to Netlify Buttonを読んでざっくりまとめつつ補足を加えました。
- 「Deploy to Netlify」ボタンはNetlifyに簡単にリポジトリの内容をデプロイできるボタンのこと
- 挙動としては指定されたGitHubリポジトリと同じものが自分のリポジトリとして作成されて、そのリポジトリがNetlify連携された状態になる。(ForkではなくCopy)
ステップ | スクショ |
---|---|
GitHubと連携する画面。 | |
GitHubのRepository nameを決める | |
連携が完了。すぐデプロイされます。 |
ボタンの設置
ボタン設置のHTML例
<!-- HTML snippet -->
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-statuskit">
<img src="https://www.netlify.com/img/deploy/button.svg" title="Deploy to Netlify">
</a>
https://www.netlify.com/img/deploy/button.svg
がボタンの見た目のSVGhttps://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-statuskit
のようにGitHubのURLをrepositoryパラメータに乗せたリンクを踏むことでデプロイ設定ページに遷移する
テンプレートの設定
- Netlifyはリポジトリごとに
netlify.toml
という設定ファイルを持っていて挙動をコントロールすることができる。参考: netlify.toml Reference
[template.environment]
SECRET_TOKEN = "change me for your secret token"
CUSTOM_LOGO = "set the url to your custom logo here"
[template.environment]
セクションに項目を追加するとデプロイ時に、環境変数のテキストフィールドが現れる。- Repository nameを入力するステップにフィールドが追加される