Netlify CMS の導入

動機

他の環境からでも記事投稿ができるようにしたかった。
普段は、VScode でマークダウン書いてプッシュしてるんですが、それができない時があるので…。

手順

最初の心配事は、
Gatsby v2 and Netlify CMS (netlify-cms-app) 2.9.x required ここでした。

このブログは Gatsby v3 を使っているので、うまく動かないかぁと尻込みしてました。
今日は時間があったのでやってみよう！と手を出してみました。
まずはインストール

npm install netlify-cms-app gatsby-plugin-netlify-cms

スクショ撮ってなかったですが、早速バージョン合わないから非推奨！ってエラーが
まぁ気にせず入れていきます。
ここで動作確認してみた所、問題なさそうです。(ざっくりすぎ)

公式サイトを見ながら使えるようにしていきます。
config.yml を作成し、ざっくり項目を入れてみます。いつもながら詳細は使いながら調整しようとしてました。
そして紆余曲折あった末、調整した内容がこちら

config.yml

backend:
 name: git-gateway
 repo: githubのアカウント名/リポジトリ名
 branch: master

publish_mode: editorial_workflow //編集ワークフローのオプション
media_folder: "static/images/uploads"
public_folder: "/images/uploads"

site_url: https://サイトドメイン/

collections:
 - name: "blog"
   label: "Blog"
   folder: "content/blog/"
   create: true //記事投稿してもいい？いいよ！
   slug: "{{year}}{{month}}{{day}}{{slug}}"
   fields:
     - { label: "Title", name: "title", widget: "string" }
     - { label: "Date", name: "date", widget: "date", format: "YYYY-MM-DD" } //formatで指定しないと時間も入ってしまった
     - { label: "Body", name: "body", widget: "markdown" }
     - { label: "Description", name: "description", widget: "string" } //CMSで記事を書くときのオプション項目
     - { label: "Tags", name: "tags", widget: "list" } //CMSで記事を書くときのオプション項目

上記の collection が曲者なのですが後述。
Netlify の Authentication や Netlify Identity Widget の追加は公式のとおりできたのですが、Netlify の registration preference で"Invite only"を選んでいたため、自分を編集者として招待する必要があります。
この招待をどこからやればいいのか、リンクがさっぱり見つかりませんでした…。\

正解は、自分の Netlify のトップページから
上部メニュー(横並びになってる)の Site -> 該当サイトを選択 -> 上部メニューの Identity といけば Invite users が表示され、Invite できます。
Site setting の Identity 内にあるものかと思ってしばらく探していました。。。

気を取り直して、admin でログインして記事投稿してみる。

cmsinput

いくつかテスト投稿してみたところ、CMS 内では大丈夫なんだけど graphQL でエラーが出てしまう。
エラーを読んで見た所、config.yml の collections で設定している tag が原因でした。

CMS で tag を入力しても 1 つの string として扱われてしまう
tag は Array.map()として読み出しており、配列じゃないとコンポーネントでエラーがでてしまう

上記の config では直してありますが、tags を string で書いていました。
配列だから Array は無いのか探したり、text にして[]を手打ちしてみたり色々やって悩んでましたが、

list

ってあるじゃん!! ちゃんと隅々まで見ましょうね。。。
ケアレスミスで時間が削られてしまいましたが良い経験、転んでもただでは起きない、ということで！

というわけで CMS の導入ができました。
GatsbyCMS は闇が深いと教えていただきましたが、調べれば調べるほど深そうです。
このブログは Netlify を使っているので NetlifyCMS を使ってみましたが、contentful とか、headless wp も調べて見ようと思います。
ではでは〜。