mottox2 blog

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

mottox2
mottox2
2018/08/01

「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 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がボタンの見た目のSVG
  • https://app.netlify.com/start/deploy?repository=https://github.com/netlify/netlify-statuskitのようにGitHubのURLをrepositoryパラメータに乗せたリンクを踏むことでデプロイ設定ページに遷移する

テンプレートの設定

  • Netlifyはリポジトリごとにnetlify.tomlという設定ファイルを持っていて挙動をコントロールすることができる。参考: 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)
@mottox2フリーランスWebデベロッパー

都内でフリーランスエンジニア・デザイナーとしてWebサービスやスマホアプリを作っています。Ruby on Railsでの新規事業の爆速立ち上げや、使いやすいSPAの開発が得意です。

お問い合わせはこちら

自分のGitHubから読み取る挫折の歴史 in 2018

この記事は、「Crieitアドベントカレンダー」9日目の記事です。遅刻ごめんなさい。 Crieitはプログラマー・クリエイターのためのサイトなので、自分のクリエイターになろうとして失敗した記録をG

Netlify Functions + TypeScriptのボイラープレートを作った

8月に書いた「Netlify FunctionsでTypeScriptを使う」という記事で、netlify-lambdaをフォークしてTypeScriptを使っていると書きました。 数ヶ月経ち、フォ

netlify

Netlify FunctionsでTypeScriptを使って開発する

この記事は既に内容が古くなっています。最新の内容は「Netlify Functions + TypeScriptのボイラープレートを作った」をご覧ください 先日Netlify Functionsの

netlify

技術ブログを支える技術(Gatsby + esaio)

2018年5月に公開を始めた当ブログですが、Gatsbyをより多くの人に使ってもらいたいと考えソースコードをオープンにしたので、ブログで用いている技術について説明します。 > 当サイトについて当サ

esaiogatsby