Author image

ぺんすけブログ

リモートワークと子育てとTechな日常

Cover image

GridsomeでNetlify CMSを利用する

Netlify CMSというのをご存知でしょうか?言ってしまえばWordPressみたいなものがNetlifyで無料でできるというものです。素晴らしいですね。

今回はNetlify CMSをGridsomeとともに使ってみたいと思います。

追記
この記事の作業分のPRがありますので、サクッと差分が見たい方はこちらをおすすめします。

Netlify CMSを導入しました by pensuke81 · Pull Request #3 · pensuke81/gridsome-blog

Netlify CMSのGridsomeプラグインをインストール

$ yarn add netlify-cms gridsome-plugin-netlify-cms

gridsome.config.jsに設定を追記

あらかじめ、 @gridsome/source-filesystem@gridsome/transformer-remark の設定(markdown形式のファイルからブログ記事を表示出来ている状態)は終わっている前提で進めます。

plugins: [
  {
    use: `gridsome-plugin-netlify-cms`,
    options: {
      publicPath: `/admin`
    }
  },
]

Netlify CMSの設定

  1. admin ディレクトリを src ディレクトリに作成
  2. uploads ディレクトリをプロジェクトのルートディレクトリに作成
  3. index.html, index.js, config.ymladmin ディレクトリに作成

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Netlify CMS</title>
</head>
<body>
  <script src="index.js" type="module"></script>
</body>
</html>

index.js

import CMS from "netlify-cms"

config.yml

backend:
  name: github
  repo: github-username/repo-name

media_folder: "static/uploads"
public_folder: "/uploads"

collections:
  - name: "posts"
    label: "Posts"
    folder: "content/posts/"
    create: true
    slug: "{{slug}}"
    fields:
      - {label: "タイトル", name: "title", widget: "string"}
      - {label: "概要", name: "description", widget: "string"}
      - {label: "公開日", name: "date", widget: "date"}
      - {label: "内容", name: "body", widget: "markdown"}

repoの部分はgithubのuser名とリポジトリ名に変更してください。

ポイントとしては、frontmatterにおいて本文が name: "body" となるようです。それ以外は自分で自由に追加できます。

Netlify CMSの Widgets を見ると色々できそうですね。タグの設定やRelationみたいなこともあるみたいです。

GithubでNetlify CMSの認証を行います

Github側の設定

  1. GithubのDeveloper settings
  2. Register a new application
  3. 必要な情報を入力していきます。Authorization callback URLは https://api.netlify.com/auth/done です

Netlify側の設定

NetlifyのDashboardから

Settings → Access control → OAuth

→ Install provider

で、Githubを選択して入力します。Client IDとClient Secretは先程のDeveloper settingから該当のapplicationを選択して確認できます。

Client IDとClientSecret

NetlifyでInstall provier

以上で設定は完了です。 gridsome developして、 /admin にアクセスするとログイン画面が現れます。

記事を書いてみる

実際に記事を書く画面はこのような感じです。設定次第で色々自由度高くできそうです。また、一応保存せずに落とした場合、「前の状態から復帰しますか?」的な画面もでてきました。親切ですね。

まとめ

Netlify CMSでもCMSの機能としてWordPressに負けないぐらい基本的な機能は揃ってきてるのではないかと思いました。今後も色々試してみたいです。

WordPressみたいなコンテンツマネジメントシステムがほしいけど、WordPressは嫌だという方、お仕事のご相談お待ちしております。