Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

TL;DR

本文

Gatsby と Netlify CMS の便利なところはやはり気楽に始められるところです。

Gatsby の Starter のページから Try this starter を押せば勝手にレポジトリを作ってデプロイまでやってくれて最高のスタートを切れます。

gatsby-starter-typescript-power-blog__Gatsby_Starter___GatsbyJS.png

今回私は次の 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' }

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

seya
最近の趣味はGraphQLとFigmaです。
https://note.mu/seyanote
linc-well
Linc'well(リンクウェル)は2018年創業のヘルスケアスタートアップです。我々は、医療のIT化を通じて、人々と社会の健康に貢献します。
https://www.linc-well.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away