NetliyとGithubを連携して公開!

投稿日:2020年10月7日

更新日:2020年10月7日

Gitに必要ファイルをあげる

Git上に新しくレポジトリを作って必要ファイルをPUSHします。

必要ファイルと言われても…「gridsome-site-starter」以下にはメチャクチャ多くのファイルが、、とアタフタしていましたが、SourceTreeがファイルをちゃんと取捨選択してやってくれましたw

参考:私が作ったこのサイトのレポジトリ

私は黒い画面が苦手なのと、SourceTreeが大好きなので、エディターがVScodeになっても、まだSourceTreeから離れられていません。。。SourceTree公式ページ

netlify.tomlの作成

これ何のための?と言われてもちゃんと説明できないんですが、Netliy上で公開するディレクトリはココですよっていう指定と、このコマンドでビルドしてねっていう指定だと思われる。。。

これも「gridsome-site-starter」の直下に作ってGitにPushしておきます。

[build]
  publish = "dist"
  command = "gridsome build"

Netlifyでアカウントと作ってサイトを立ち上げる

Netlifyのアカウント登録はGitHubのアカウントを使いました。

ログインした後は右上の緑色の「New site from Git」をクリックします。

ログイン後の画面キャプチャ

「Creat a new site」のステップ1の画面が表示されます。
「Continuous Deployment」は「GitHub」を選択します。

Connect to Git providerの画面キャプチャ

「Install Netlify」の表示が出ます(自分が必死過ぎてキャプチャ取り忘れた…)
「Only select repositories」のトコロをチェックして今回作ったレポジトリを選択しました。

Only select repositoriesの画面キャプチャ

次に「Creat a new site」のステップ2の画面が表示されます。
ココで今回作ったレポジトリを選択します。

Pick a repositoryの画面キャプチャ

次に「Creat a new site」のステップ3の画面が表示されます。
この画面の「Build command」と「Publish directory」に先に作っていたnetlify.tomlと同じ内容を入れます。
私は勝手に焦ってこの設定をすっ飛ばしてしまいましたが、Netlifyの設定画面で後からも設定できます。

Build options and deployの画面キャプチャ

Deploy site で完了です!

GitHubにPushする度に自動的にサイトが更新されます。(≧▽≦)
とりあえず当初の目的までは果たすことができました。

目次ページに戻る