2018-10-29に更新

「Deploy to Netlify」ボタンの設置方法

自分のブログから転載です。


「Deploy to Netlify」ボタンを設置するためにDeploy to Netlify Buttonを読んでざっくりまとめつつ補足を加えました。

  • 「Deploy to Netlify」ボタンはNetlifyに簡単にリポジトリの内容をデプロイできるボタンのこと
  • 挙動としては指定されたGitHubリポジトリと同じものが自分のリポジトリとして作成されて、そのリポジトリがNetlify連携された状態になる。(ForkではなくCopy)
ステップ スクショ
GitHubと連携する画面。 app.netlify.com_start_deploy_repository=https___github.com_mottox2_slack-esa-preview(iPad).png (212.2 kB)
GitHubのRepository nameを決める app.netlify.com_start_deploy_repository=https___github.com_mottox2_slack-esa-preview(iPad) (1).png (176.0 kB)
連携が完了。すぐデプロイされます。 app.netlify.com_start_deploy_repository=https___github.com_mottox2_slack-esa-preview(iPad) (2).png (271.1 kB)

ボタンの設置

```html:ボタン設置のHTML例



- `https://www.netlify.com/img/deploy/button.svg`がボタンの見た目のSVG
- `https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-statuskit`のようにGitHubのURLをrepositoryパラメータに乗せたリンクを踏むことでデプロイ設定ページに遷移する

## テンプレートの設定
- Netlifyはリポジトリごとに`netlify.toml`という設定ファイルを持っていて挙動をコントロールすることができる。[参考: netlify.toml Reference](https://www.netlify.com/docs/netlify-toml-reference/)

```netlify.toml
[template.environment]
  SECRET_TOKEN = "change me for your secret token"
  CUSTOM_LOGO = "set the url to your custom logo here"
  • [template.environment]セクションに項目を追加するとデプロイ時に、環境変数のテキストフィールドが現れる。
  • Repository nameを入力するステップにフィールドが追加される
    app.netlify.com_start_deploy_repository=https___github.com_netlify_netlify-statuskit&_ga=2.162346552.543342698.1533062015-2009648869.1533062015(iPad).png (230.0 kB)
Originally published at mottox2.com

mottox2

Freelance Web Engineer. UI Designer.

Crieitはαバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか
関連記事

コメント