Netlify

NetlifyCMSを導入する際のTips

Gatsbyで作ったサイトにNetlifyCMSを導入する方法を解説しています。

このWebサイトはGatsbyというツールで製作されており、ホスティングにはNetlifyを使用しています。複数人でコンテンツの作成を行う予定だったため、管理しやすいようNetlifyCMSというコンテンツ管理のプラグインを導入することにしました。簡単にNeltlifyCMSについて解説しておきます。

NetlifyCMSについて

gatsby等で制作した静的サイトにおいてコンテンツの追加や管理はエディタ等で直接ファイルをいじくるしかありませんでしたが、NetlifyCMSを導入することでWordpressやブログサービスのような管理画面からコンテンツを作成・管理できるようになります。特に画像の追加が楽になったのと、命名等含めたファイルパスの管理を自動で行ってくれる点が優れていると感じます。また、NetlifyCMS上で作成したコンテンツは自動でリモートレポジトリにcommit&pushしてくれる点も良いです。

今回はgatsbyを例にしてますが、HUGOやJekyll等のツールにも対応しています。

導入

gatsbyプロジェクトの場合はnpmでインストールします。以下のコマンドを打つことで導入できます。

npm install --save netlify-cms-app gatsby-plugin-netlify-cms 

やるべきことは主に2つです。

  1. 設定ファイルの記述
  2. Githubログインの実装

1. 設定ファイルの記述

どのようにコンテンツを参照し、管理するかの設定を記述します。デフォルトのパスはstatic/admin/config.tomlとなっています。記述する際はローカルコンテンツを参照する形でサーバーを立てておき(後述)、挙動を確認しながら行うと良いと思いでしょう。

・基本設定

backend: # 参照するレポジトリを指定する
  name: github
  repo: hoge/sample-repository 
  branch: master

locale: 'ja' #日本語対応
local_backend: true # ローカルサーバーに対応させる設定

publish_mode: editorial_workflow

media_folder: content/img    # I'm not using these default media directories at the moment.
public_folder: /img

・コンテンツ管理の設定(Collections)

NetlifyCMSでは記事・タグなどのコンテンツは全てCollectionsとして扱われます。従ってCollectionsをどのように管理するかも同ファイルに記述します。文字列を扱ったり画像を扱ったりなど用途に応じたウェジットが用意されています。さらにrelationというウェジットを用いれば、Collection同士を関連付けるみたいな動的チックな挙動をさせる事も可能です!

また、各ウェジットに対し対応したオプションを付与することで以下のような設定も可能となっています。

  • required(必須項目であるかどうか)
  • multiple(複数選択)
  • default(デフォルト値)

最後に記述例を紹介しておきます。選択したtagをpostsに関連付けることができるようになっています。

collections:
  - name: "posts"
    label: "Posts"
    folder: "content"
    create: true
    delete: true
    path: "{{year}}-{{month}}-{{day}}-{{slug}}/index"
    slug: "{{fields.permalink}}"
    media_folder: "img"
    public_folder: "./img"
    fields:
      - { label: "Layout", name: "layout", widget: "hidden", default: "post"}
      - { label: "url(ファイル名)", name: "permalink", widget: "string" }
      - { label: "タイトル", name: "title", widget: "string" }
      - { label: "投稿者", name: "author", widget: "relation", collection: "authors", valueField: "id", searchFields: ["id"], multiple: true }
      - { label: "タグ", name: "tags", widget: "relation",  collection: "tags", valueField: "id", searchFields: ["id"], multiple: true }
      - { label: "投稿日", name: "date", widget: "datetime", format: "YYYY-MM-DD", dateFormat: "YYYY-MM-DD", timeFormat: false }
      - { label: "説明文", name: "excerpt", widget: "string", required: false }
      - { label: "サムネイル", name: "image", widget: "image" }
      - { label: "記事本文", name: "body", widget: "markdown" }

  - name: "tags"
    label: "Tags"
    folder: "data/tags"
    create: true
    delete: true
    format: "yml"
    identifier_field: "id"
    media_folder: "icons"
    public_folder: "./icons"
    editor:
      preview: false
    fields:
      - { label: Name, name: id, widget: string }
      - { label: Desc, name: description, widget: string }
      - { label: Icon, name: image, widget: image }
コードをレンダリングする

Codeというウェジットを使うことで、文字通りコードを値として入力することができるようになりました。そのままpropsで渡しても単なる文字列としてレンダリングされてしまいます。その場合dangerouslySetInnerHTMLというタグに渡すことでDomとして認識してくれます。

  <div dangerouslySetInnerHTML={{ __html: props.someHtml }} />

2. 本番環境でのGithubログインの実装

localhostでは特に設定せずともadminページにアクセスできますが、本番環境だとadminページへのGithubログインは弾かれてしまいます。Githubの開発者用設定画面からOAuthアプリケーションを作成します。

  • ClientID
  • ClientSecret

の二つが発行されるので、Netlifyの「Settings」→「Access Control」からOAuthアプリケーションを登録します。

netlify-oauth

おまけ

複数人運営

複数人でadminにログインしてコンテンツを管理することも可能です。認証システムを提供するNetlify Identityを活用することで実現できます。簡単に手順を説明します。もし分かりにくければNetlify CMSのGit Gatewayで複数人ログインを可能にするが詳しいです。

GitGatewayの有効化

一人運営ではOAuthを用いる認証が簡単ですが、複数人で運営する場合全員にレポジトリの編集権限を渡す必要があります。これは手間やセキュリテイの観点から好ましくないので、認証にはGitGatewayを用います。

コンソールのSettings > Identity > Services Git Gateway > Enable Git Gatewayとして有効化した後、netlifyCMSのconfig.tomlを以下のように変更します。

backend:
	name: git-gateway

NetlifyIdentityの有効化

<head>に以下のコードを挿入します。

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

ちなみに「Snippet injection」という機能を使うことでNetlifyのコンソール画面からコードを挿入することが可能です。

img

ユーザーを招待する

後はユーザーの招待を行うのみです。Netlifyのコンソールから可能です。

img

招待を受けた人は招待メールのaccept the inviteから該当のメールアドレスでユーザー登録&ログインができるようになっているはずです。

invited

ローカルのファイルを参照・操作する

adminのlocal_backendを有効化しておきます。

#admin/config.toml
backend:
  name: github
  repo: hoge/sample-repository 
  branch: master

locale: 'ja'
local_backend: true #ココ

続いて以下のコマンドを打った後にビルドコマンドを打ちます。これによりlocalhostのadminページではローカルのファイルを参照・操作することができます。役に立つ場面は多いです。

npx netlify-cms-proxy-server

Media Libary自動リサイズ

  • Uploadcare
  • Cloudinary

Media Libraryを活用すると上記の画像ホスティング系のクラウドサービスとの連携が可能になります。有料サービスですがパラメーターを渡すことで画像のリサイズ等を行うことができるようです。試す機会あれば追記します

読んでいただきありがとうございます!!

記事として取り上げたトピックを体系化してまとめた内容を電子書籍として販売しています。購入していただくことで執筆の応援ができます。詳細はこちらから