移行してきた記事をnetlifycmsで管理する

Netlify CMSを導入してみました。 Netlify CMS | Open-Source Content Management System

Gatsby.jsを使っているので、gatsby pluginを利用します。 gatsby-plugin-netlify-cms

Netlify CMSの管理画面へアクセス

「gatsby-plugin-netlify-cms」の使い方のとおり、staticディレクトリの下にconfig.ymlというファイルを作ります。

src/static/admin/config.yml

設定の詳細は以下で説明します。

とりあえず、以下のExampleを利用してみても良いと思います。 https://www.netlifycms.org/docs/collection-types/

これで、localhost:8000/admin/にアクセスすると、認証画面が現れます。 認証をすると、管理画面に入ることができます。

config.yml 設定ファイルを作る

設定ファイルを作ります。

src/static/admin/config.yml

backend:
  name: github
  repo: username/reponame
  branch: master
media_folder: "content/blog"
public_folder: "/static"
site_url: https://usomitainikagayakumachi.tokyo
logo_url: https://usomitainikagayakumachi.tokyo/icons/icon-512x512.png
collections:
  - name: "blog"
    label: "Blog"
    extension: "md"
    folder: "content/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    editor:
      preview: false
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Digest", name: "digest", widget: "string" }
      - { label: "Category", name: "category", widget: "string" }
      - { label: "Tags", name: "tag", widget: "list" }
      - { label: "GiphyKey", name: "giphy", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Body", name: "body", widget: "markdown" }

これまで書きためたmarkdownファイルに書いていた設定項目を、同じようにfieldsに作ります。

記事一覧のソート機能がまだないようなので、その点だけがちょっと不満ですね。

すでにあるmarkdownを読み込む

僕の場合、すでに元になるmarkdownファイルがあります。 これをnetlify CMS側にインポートしたい。

collectionsに以下の設定を入れると、markdownファイルを読み込んでくれます。 extension: “md”

デフォルトではjsonになっているので、記事をjson形式で持っている場合は、この設定をしなくても反映されるはずです。

突然ログイン認証ができなくなる

突然、GitHub authがうまくいかなくて、ハマりました。 どうやら、最初にテストでnetlify CMSを試しているときにアクセスして、その後にカスタムドメインを設定したことが影響しているようでした。

これは、ブラウザのローカルストレージに古いnetlifySiteURLというデータが残っていることが問題です。

これを削除して、認証をしなおします。 もう一度githubアカウントで接続することで、無事にログインできました。

https://github.com/netlify/netlify-cms/issues/766#issuecomment-406328310

まとめ：更新方法が二つあるのはめっちゃ便利かもしれない

CMS機能は、当初は「あまり使わないかも？」と思っていたのですが、画面を見たら良い感じでした。

記事を追加するときにはCMSを利用すると便利。 CMSでは、それまで手作業で記事ファイルを追加していたのですが、それをやってくれるのは楽です。

タイトルを一覧で見られるのも良くて、推敲するのも捗りそうです。