Open9

Gatsby + microcms + Vercel でブログを作って公開したい

gatsby-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 のリポジトリ指定してデプロイ実行

https://vercel.com/import/git

Vercel には GitHub のアカウントで認証。
環境変数とかオプションで指定できるけど、一旦ここではオプションは特に指定しなかった

デプロイ完了

https://k1-style-blog.vercel.app/

ざっとこんな感じでサービスやAPI・スキーマ定義をしてみた

[TODO] microcms で試しに post した内容を、 gatsby で作ったプロジェクトで表示できるようにする

microcms で更新した内容から Vercel にデプロイするための Webhook 設定

1. Vercel の Deploy Hook を作る

以下のドキュメントを参照

https://vercel.com/docs/more/deploy-hooks
  1. 管理画面から Git → Deploy Hooks を参照
  2. Hook名と対象のブランチ名を入力して Create Hook 実行
  3. できた URL をコピー

2. microcms の Webhook 設定

以下のドキュメントを参照

https://microcms.io/blog/custom_webhook/
  1. webhook を設定したい API の 「API 設定」→ Webhook を参照
    2.「追加」ボタンを押して「カスタム通知」を選択
  2. Vercel の Deploy Hook URL と「コンテンツの公開時・更新時」にチェックを入れて設定

gatsby-starter-lumen で作ったプロジェクトで gatsby develop を試したところ、以下の様なエラーが出た

ERROR #98123  WEBPACK

undefined failed

Node Sass version 5.0.0 is incompatible with ^4.0.0.

https://github.com/gatsbyjs/gatsby/issues/27754

node-sass を 4.14.1 にダウングレードしたら解決できた

npm uninstall node-sass
npm install node-sass@4.14.1

※ただ、上記 gatsby の issue#27754 の最後の方のコメントよくよく見てみたら、 gatsby-plugin-sass のほうをアップデートしたほうが良かったかもしれない。

ログインするとコメントできます