Open9
Gatsby + microcms + Vercel でブログを作って公開したい
Keiichi Nomuraまずは Gatsby のプロジェクトを作って、vercel にそのままデプロイしてみる
Keiichi Nomuragatsby-cli のインストール
npm i -g gatsby-cli
Gatsby のプロジェクトを作る
デザイン的に gatsby-starter-lumen が気に入ったので、これを使ってみる。
gatsby new k1-style-blog https://github.com/alxshelepenok/gatsby-starter-lumen
GitHub に作った新しいリポジトリにpush
cd k1-style-blog
git remote add origin git@github.com:K1-Style/blog.git
git push -u origin master
Vercel で GitHub のリポジトリ指定してデプロイ実行
Vercel には GitHub のアカウントで認証。
環境変数とかオプションで指定できるけど、一旦ここではオプションは特に指定しなかった
デプロイ完了
Keiichi Nomura次は microcms の設定
Keiichi Nomuraざっとこんな感じでサービスやAPI・スキーマ定義をしてみた
Keiichi Nomura[TODO] microcms で試しに post した内容を、 gatsby で作ったプロジェクトで表示できるようにする
Keiichi Nomuramicrocms で更新した内容から Vercel にデプロイするための Webhook 設定
1. Vercel の Deploy Hook を作る
以下のドキュメントを参照
- 管理画面から Git → Deploy Hooks を参照
- Hook名と対象のブランチ名を入力して Create Hook 実行
- できた URL をコピー
2. microcms の Webhook 設定
以下のドキュメントを参照
- webhook を設定したい API の 「API 設定」→ Webhook を参照
2.「追加」ボタンを押して「カスタム通知」を選択 - Vercel の Deploy Hook URL と「コンテンツの公開時・更新時」にチェックを入れて設定
Keiichi Nomura大体この本に救われた
Keiichi Nomuragatsby-starter-lumen で作ったプロジェクトで gatsby develop を試したところ、以下の様なエラーが出た
ERROR #98123 WEBPACK
undefined failed
Node Sass version 5.0.0 is incompatible with ^4.0.0.
node-sass を 4.14.1 にダウングレードしたら解決できた
npm uninstall node-sass
npm install node-sass@4.14.1
※ただ、上記 gatsby の issue#27754 の最後の方のコメントよくよく見てみたら、 gatsby-plugin-sass のほうをアップデートしたほうが良かったかもしれない。