Posted at

Gatsby Starter Library から Netlify CMS 始めた時に {サイトのURL}/admin を開いても何も出ない時に確認すること

地味に30分くらい彷徨ったのでメモ。


TL;DR


本文

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' }


いやーしょうもない詰まり方した。