WordPress 以外を探し始めた君へ贈る Netlify CMS

こんにちは。[リケイのオコジョ](https://twitter.com/mounmou_design)です。
Apple関連、Web開発やSaaSの情報を発信しています。

![_prof-header-202206.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710694/b9ad8799-f34b-a7ed-7be5-7ab45921b58c.png)

# はじめに
[Netlify CMS](https://www.netlifycms.org/)は[gatsby](https://www.gatsbyjs.com/)や[Jekyll](https://jekyllrb.com/)、[Hugo](https://gohugo.io/)などの静的サイト生成フレームワークや、[NextJS](https://nextjs.org/)、[Nuxt](https://nuxtjs.org/)などのJavaScriptフレームワークと合わせて使うことでWordPressのようなCMSを作ることができます。

WordPressの運用辛い。WordPress以外を触ってみたい。
そんな方に贈る、運用レスで軽量なCMSの紹介です。

:::note warn
**おことわり**
Netlify CMS は WordPress よりもできることが少ないです。
ですが Netlify CMS には得意なことがあります。その辺りをご紹介します。
:::

## WordPress の辛いところ
WordPressは基本的にはサーバーの管理が必要になります。
**データベース管理**や**セキュリティ対策**など、どうしても**運用せざるを得ない箇所**が出てきてしまいます。

公平性を記すため紹介しますが、最近は[shifter](https://www.getshifter.io/ja/)という**WordPressから静的サイトを生成する悪魔的サービス**が出てきました。
これは本当に素晴らしくWordPressの辛い箇所がかなり解決しそうです。

https://www.getshifter.io/ja/

ですが、私たちはエンジニア。
[Hugo](https://gohugo.io/)や[NextJS](https://nextjs.org/)、[Nuxt](https://nuxtjs.org/)のような新しいフレームワークは触ってみたくなりますよね。
オープンソースなのですから。誰に承認をとる必要もなく、知識欲を満たせば良いのです。

# Netlify CMS のご紹介
[Netlify CMS](https://www.netlifycms.org/)は、WordPressのようにサーバやDBを持たなくても、WordPressのような文章の編集や画像の管理、投稿機能といったCMS機能をWeb UIから行うことができます。

https://www.netlifycms.org/

不思議ですね。
どんな仕組みで動いているのでしょう。

# Netlify CMS の仕組み
普段私たちはHTMLやJavascriptを書き、GitHubでソースコードを管理し、AWS S3やNetlifyなどにホスティングしているわけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710694/4866c792-9780-c3a6-d659-0b2e4f2241a7.png)

Netlify CMSはGitHub上の任意のフォルダの任意のファイルをWebUIから編集、管理できるようになります。
最初にデザインの雛形を決め、WebUIから文章や画像を編集、管理します。

記事を書く人は**GitHubの知識がなくてもNetlify CMSのUI操作でPull RequestやMergeなどの処理**が走ります。
これは便利そうですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710694/1847d296-90e5-fe8e-798d-a509ff4e6afa.png)

# Netlify CMS もう少し具体的に
例えば以下のようなフォーマットの記事を書きたいとします。

```yaml
---
title: Webページをオープンしました！
date: "2022-06-26"
eyecatch: /images/eyecatch.png
categories:
  - news
slug: "20220626"
draft: false
---

リケイのオコジョに関する最新のニュースをお届けします。
リケイのオコジョはPR記事やイラストのお仕事の依頼を受け付けております。

[お問い合わせ](/contact)のページからご連絡をお願いします。
```

サーバやデータベースに設定を入れる必要はなく、以下のような設定ファイルを１つ置くだけで

```yaml: config.yml
backend:
  name: github
  repo: <YOUR GITHUB REPO>
  branch: main
media_folder: "static/images" # 画像を置くフォルダを指定
public_folder: "public"
publish_mode: editorial_workflow
collections:
  - name: "news"
    label: "news"
    folder: "content/news"    # markdownファイルを置くフォルダを指定
    create: true
    fields:　                  # markdownで設定したい項目を書くだけ
      - {label: "Title", name: "title", widget: "string", required: true}
      - {label: "Date", name: "date", widget: "date", required: true}
      - {label: "Eyecatch", name: "eyecatch", widget: "image", required: true}
      - {label: "Categories", name: "categories", widget: "list",default: ["news"], required: true}
      - {label: "Slug", name: "slug", widget: "string", required: true}
      - {label: "Draft", name: "draft", widget: "boolean", default: true}
      - {label: "Body", name: "body", widget: "markdown"}
```

以下のようなWebUIが生成されます。
この画面上で`Save`や`Publish`を行うとGitHubのレポジトリに対し、各CommitやPull Requestが飛びます。

![netlify-cms-editor-ui.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710694/ecf9dfaa-9f13-b1d5-d1bc-c663a39d3159.png)

また以下ような`workflow UI`があり、ドラッグアンドドロップで確認/承認のワークフローを組むことができます。

![netlify-cms-workflow-ui.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710694/d0c023fc-4856-df07-e4ef-e3812a3bc5b9.png)

[NextJS](https://nextjs.org/)、[Nuxt](https://nuxtjs.org/)でフロントエンドを書いてみたかったけど、サーバーアプリやDBの管理は無理...という方でも簡単なWebサイトの管理ができそうですね。
これは夢が広がります。

# まとめ
WordPress以外を探し始めたあなたへNetlify CMSを紹介しました。
WordPress自体もどんどん進化していくと思いますが、少し別のフレームワークを使ってみたくなった方の管理がより簡単になるNetlify CMSもぜひ試してみてください！

もし動かしてみたい！と思った方はGitHubやNetlify CMSの設定を以下の記事まとめていますのでご覧ください！

https://zenn.dev/rikei_ocojo/articles/hugo-netlify-cms


# 参考

https://zenn.dev/rikei_ocojo/articles/hugo-typescript-tailwind