Decap CMS (旧称 Netlify CMS) を導入した

2023-06-26 備忘録

Hugo のブログをブラウザから編集できたら便利なのにな〜って Twitter で言ったらフォロワーさんに Decap CMS というものを紹介してもらったので導入しました。この記事は投稿テストを兼ねています。

Decap CMS とは？

Decap CMS は静的サイトジェネレーター用の静的サイトジェネレーターです。原理的には Hugo でも Hexo でも Hakyll でも使えると思います。

かつては Netlify CMS と呼ばれていたこともあり、Netlify との連携が強いのが特徴です。認証周りも Netlify に任せられます。便利やね。

導入方法

今回は Hugo に導入する前提で紹介します。

ファイルを置く

Hugo のプロジェクトディレクトリ内の static/admin ディレクトリに admin ディレクトリを作成し、index.html と config.yml を作成します。

index.html はコピペでいいです。嫌なら公式のドキュメントをコピペしてください。

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="robots" content="noindex" />
  <title>Content Manager</title>
</head>
<body>
  <!-- Include the script that builds the page and powers Decap CMS -->
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
  <script>
    if (window.netlifyIdentity) {
      window.netlifyIdentity.on("init", user => {
        if (!user) {
          window.netlifyIdentity.on("login", () => {
            document.location.href = "/admin/";
          });
        }
      });
    }
  </script>
</body>
</html>

config.yml は画像ファイルの保存場所だとか URL の構成だとか指定します。ドキュメントの設定周りを読んで設定してください。以下に参考用にこのブログの設定も貼っておきます。

backend:
  name: git-gateway
  branch: master

media_folder: "static/images" # 画像をアップロードするディレクトリ
public_folder: "/images" # 記事を公開するときに画像が置かれるディレクトリ

collections:
  - name: "blog" # 識別子、他の被らなければなんでもいい
    label: "Blog" # 管理画面に表示される名前
    folder: "content/blog" # Markdown のファイルが保存されるディレクトリ
    create: true # 新しいファイルの作成を許可するか否か
    slug: "{{fields.slug}}" # ファイル名の指定
    fields: # Markdown の yaml フィールドの項目
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Slug", name: "slug", widget: "string", default: "2023-01-01-weekly"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Description", name: "description", widget: "string"}
      - {label: "Categories", name: "categories", widget: "list"}
      - {label: "Tags", name: "tags", widget: "list"}
      - {label: "Draft", name: "draft", widget: "boolean", default: true}
      - {label: "Body", name: "body", widget: "markdown"}

fields ってやつは、Markdown で記事を書くときにタイトルとかタグとか日付とか設定する箇所です。具体的に例を出すと以下の部分。難しく考える必要はないです。

---
title: "記事のタイトル"
date: "2023-06-27T04:44:00+09:00"
tags: ["タグ"]
---

サイトをデプロイする

普通にいつも通り GitHub からデプロイすればいいです。

Netlify Identity と Git Gateway を有効化する

設定から有効にします。

これが無いと認証周りの情報を引っぱってこれないので設定します。

以下の行を static/admin/index.html とブログのトップページの <head> 内に追加します。ただ、前者はともかく後者はブログのテンプレートをいじらないといけなくて面倒なので Script Injection を使って Netlify 側で挿入してもらうのが楽だと思います。

<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

気になった点

フィールドの初期値に変数が使えない

フィールドには初期値が設定できます。で、Decap CMS では日付などの変数が存在し、slug などの項目に使うことができます。ただ、フィールドのデフォルトの値には変数として展開されずにそのまま文字列として表示されました。

さっき紹介した設定構成だとこの部分が URL の一部になるのですが、日付とか自動で今日の日付を出してくれると便利なのにな〜〜〜〜〜〜ってなりました。

ibus-skk だと日本語入力ができない

日本語入力が全くできません。一瞬、おま環を疑いましたが Issue が立ってました。Slate のバージョンが古いことに起因するらしく、今のところどうしようもないです。この記事は HackMD で書いたやつをコピペしました。

まとめ

スマホとかから編集するとき便利そうだと思いました。日本語入力〜〜〜〜〜〜〜〜〜〜〜〜〜。

なーのブログ