Netlify CMSを使ってみる

# 概要
技術的な情報発信のブログ作成したい。
複数人で編集したいため、CMSのような共同で編集できるソリューションが必要
**最近よく聞く、Headless CMSがマッチしそう！**:smiley:

ということで、以下の構成で試してみました。

### 構成
* CMSは**NetlifyCMS**
* コンテンツ・ソースは**GitHub**
* 静的ジェネレータは**vuepress**
* ホスティングは**Netlify**

![構成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/78f704f3-e1bb-b6b3-19b0-a43779f7e9f4.png)


# NetlifyCMS+vuepress+GitHubの準備
### NetlifyCMSのサイトからテンプレートをコピー
[netlifycms-examples](https://www.netlifycms.org/docs/examples/)からVuePress-NetlifyCMSのテンプレートをコピーする

```bash
# テンプレートコピー
git clone https://github.com/DemoMacro/VuePress-NetlifyCMS.git [your project]
yarn install

# ローカルのGit環境を初期化
rm -rf .git
git init
# リモートのURLは適宜指定
# 予めGitHub上に空のrepositoryを作成しておくこと
# ※以降の手順で「master」を作成するため、mdファイルの初期作成等は不要
git remote add origin https://github.com/[your project].git

# コミットしてプッシュ　※ここで「master」ブランチ作成
git add .
git commit -m "first commit"
git push -u origin master
```
テンプレート超便利！

### Netlify Identity Widgetの追加
コンテンツ編集画面はNetlify Identity Widgetを用いて、ログイン認証をかけます。
.vuepress/public/admin/index.htmlの`<head>`に以下を追加します。

```html:.vuepress/public/admin/index.html
<head>
～
    <script src="https://cdn.jsdelivr.net/npm/netlify-identity-widget@1.5.2/build/netlify-identity-widget.min.js"></script>
</head>

```

### NetlifyCMSの設定
NetlifyCMSでのエンティティや保存場所などを設定します。
以下は代表的な設定を記載しています。
詳細は[公式ドキュメント](https://www.netlifycms.org/docs/configuration-options/)を参照ください。

```yaml:.vuepress/public/admin/config.yml
# GitHubのブランチ指定
backend:
  name: git-gateway
  branch: master 
locale: 'ja' #メッセージが日本語化
media_folder: ".vuepress/public/media" # 画像ファイルの格納場所を指定
public_folder : "/media" #公開する際の画像フォルダのパスを指定

# NetlifyCMSの編集画面をフロー化
publish_mode: editorial_workflow

# 編集オブジェクト
collections:
  - name: "Blog" 
    label: "Blog"
    folder: "docs/Blog"
    create: true
    slug: "{{slug}}" #ファイル名になる
    editor:
      preview: true #CMSの編集画面にプレビューがつく
    # コレクションのフィールド
    fields:
      - {label: "Title", name: "title", widget: "string"} 
      - {label: "Body", name: "body", widget: "markdown"}
```
ソースは以上！
GitHubに変更をプッシュします。

# Netlifyの準備
### Netlifyでサイト作成
<img width="538" alt="01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/5b9ae7e0-b20e-86cb-7713-3ec8ed4df231.png">

[New site from Git]を押下

<img width="538" alt="02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/51450219-0039-a53d-c164-96bcc40c7d35.png">

[GitHub]を押下

<img width="437" alt="03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/72dc041c-aec0-b9e6-845e-7fcec50b8861.png">


[Only select repositories]を選択
※Git内のリポジトリーをすべて共有する場合は[All repositories]を選択

<img width="537" alt="04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/7b97e6f2-6ed8-7812-6009-af5e3b00fd00.png">

公開対象のリポジトリを選択

<img width="529" alt="05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/7b1901e3-455c-5ffa-a033-0fc9b8d42665.png">

Build command：`vuepress build`
Publish directory：`pages`
を設定し、[Deploy site]を押下

<img width="495" alt="08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/fc986c84-5b24-4a88-9c03-37a13794c8f5.png">
デプロイ完了するとこんな表示になります。


### Netlify Identityの設定
NetlifyCMSの認証は`Netlify Identity Widget`を利用するため、以下の設定をします。
1. Settings > Identity　「Enable Identity」を実行します。
2. Registrationでユーザ登録の方式を選択できます。[Open]か[Invite only]です。
※外部の認証機関にゆだねたい場合はExternal providersで指定。
3. 最後にGit Gatewayで「Enable Git Gateway」を実行します。この設定により、GitHubアカウントを持たずともNetlifyCMSを通じてコンテンツの編集が可能になります。
※サイトのドメインの指定は適宜

<img width="500" alt="06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/faf32637-46d0-6f25-bcc8-a583a2606bd0.png">
<img width="500" alt="07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/7f73519e-ffb0-2c9e-5665-0432a7c7468b.png">


:warning:
>GitHub Organizationを利用している場合、GitHub側でサードパーティのアクセス許可が必要です。
NetlifyCMSのコンテンツの保存で
`Failed to persist entry: API_ERROR: Not Found`というエラーが発生したら、GitHubの`Organization`の設定を変更してください。
GitHub->setting->Third-party accessを選択し
`Third-party access policy`の[Remove restrictions]を押下することで許可されます。

### コンテンツの登録
サイトの準備は完了したので、コンテンツを登録します。
サイトの`/admin`のパスで編集画面にアクセスできます。
以下のURLにアクセスすることでコンテンツの登録・編集が可能になります。
※Netlify Indentifyでの認証付きです。NetlifyのIndentifyの設定からアクセスユーザ（メールアドレス）を登録してください。

編集画面URL：`https://[your site]/admin`

![NetlifyCMS編集画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/522729e5-0b90-9457-afe9-8d82c5ac6e92.png)

こんなワークフローも活用できます。
<img width="500" alt="09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/3c38457b-fdc5-85cf-ba05-8a3556dc526e.png">


# まとめ
テンプレートもGatsbyやNext.js、Nuxtなどいろいろあるため、準備は容易でした。
NetlifyとGitHubの組み合わせの為、小難しいところもなく超簡単でした！
NetlifyCMS自体はカスタムコンポーネントも作成できるようで、奥が深そうでした。

:cold_sweat:
CMSの`markdown`のリッチオブジェクトが日本語入力するときにおかしな挙動になるため改善して欲しい！

# 参考
[netlifycms-examples(本家)](https://www.netlifycms.org/docs/examples/)
[VuePressとnetlify](https://qiita.com/tomopict/items/400bc4ce76ba1d8abfa2)