地味に30分くらい彷徨ったのでメモ。
TL;DR
-
/staticディレクトリにadminディレクトリ作ってindex.htmlとconfig.yml作る - 参考: https://www.netlifycms.org/docs/add-to-your-site/
- config.yml のドキュメント: https://www.netlifycms.org/docs/configuration-options/
本文
Gatsby と Netlify CMS の便利なところはやはり気楽に始められるところです。
Gatsby の Starter のページから Try this starter を押せば勝手にレポジトリを作ってデプロイまでやってくれて最高のスタートを切れます。
今回私は次の Starter を利用しました。
https://www.gatsbyjs.org/starters/mhadaily/gatsby-starter-typescript-power-blog/
そして下記の記事を参考にして設定を進めまして「CMSログインユーザの追加」まで進めて {サイトのURL}/admin を開いたところ、 Starter の 404 が表示されるだけで Admin 用の画面が表示されませんでした。
https://qiita.com/jshimazu/items/e102cde5124609384d0c
結論から言うと、今回私が今回選んだ Starter に Netlify CMS 用の設定がなかっただけでした。
冒頭でも述べた通り /static ディレクトリに adminディレクトリ、その中に HTML と config ファイルが必要です。
こんな感じ
- static
|- admin
|- index.html
|- config.yml
それぞれのファイル中身はこちらを参考にすればいいですが
https://www.netlifycms.org/docs/add-to-your-site/
私は次のように書きました
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Content Manager</title>
</head>
<body>
<!-- Include the script that builds the page and powers Netlify CMS -->
<script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</body>
</html>
config.yml
backend:
name: git-gateway
branch: master
publish_mode: editorial_workflow
media_folder: static/images/uploads
public_folder: /images/uploads
collections:
- name: 'blog'
label: 'Blog'
folder: 'blog'
create: true
slug: 'test/{{year}}-{{month}}-{{day}}_{{title}}_{{some_other_field}}'
fields:
- { label: 'Template Key', name: 'templateKey', widget: 'hidden', default: 'blog-post' }
- { label: 'Slug', name: 'slug', widget: 'string' }
- { label: 'Title', name: 'title', widget: 'string' }
- { label: 'Publish Date', name: 'date', widget: 'datetime' }
- { label: 'Body', name: 'body', widget: 'markdown' }
- { label: 'Tags', name: 'tags', widget: 'list' }
いやーしょうもない詰まり方した。