既存のHugo製サイトにNetlify CMSを導入する。GitHubを使ってNetlify以外でのホスティングの場合

Hugoで作ったWebサイトにNetlify CMSを導入します。
Netlify CMSを入れることで今までターミナルやテキストエディタで作っていたHugoのページをWordPressと同じようにブラウザから作ることができるようになります。

多くの解説ブログではNetlifyにホスティングするケースが書かれていますが、CMSのみでの利用も可能です。

なお今回はGitHubでソースのバージョン管理を行っていますがGitLabやBitbucketでも基本的には同じです。

それでは順を追ってNetlify CMSを入れる最初から本番環境への反映までを見てきましょう。

１．staticディレクトリの中にadminディレクトリを作る

Hugoではstaticディレクトリの中のファイルにはそのままのパスでアクセスができます。
Railsでいうpublicディレクトリです。(Hugoにもpublicディレクトリがあるのですが、これはビルド後のファイルが入ります)
画像などはここに置いておけば良いでしょう。

コマンドからディレクトリを作るならこちら。

$ mkdir static/admin

Netlify CMSの管理画面は「http://example.com/admin/」になります。

２．adminディレクトリにindex.htmlとconfig.ymlを入れる

管理画面を作るJSを読み込むHTMLファイルとサイトの設定を記載するconfig.ymlをadminディレクトリの中に入れます。

index.htmlを作る

index.htmlはこのままコピペしてもらえれば大丈夫です。

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
</head>
<body>
  <!-- Include the script that builds the page and powers Netlify CMS -->
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>

index.htmlファイルを作ったら実際に管理画面にアクセスしてみましょう
http://localhost:1313/admin/
(ポート番号はHugoのデフォルトです。各々の環境で読み替えてください)

この画像のようにconfig.ymlが見つからないというエラーが出ます。
それではconfig.ymlを作ってみましょう。

config.ymlを作る

config.ymlをadminディレクトリの中に作ってください。確認のために一旦中身は空で大丈夫です。
作ったら管理画面を再読み込みしてください。

いろんな設定が足りないと出てきました。
必要な設定を書いていきましょう。

まずは「backend」です。
私はbackendを「ソースを管理してアクセスの認証をするところ」と認識していますが今のところ何も問題がありません。
今回はGitHubをbackendとして使います。

backend:
  name: github
  repo: owner-name/repo-name # GitHubのリポジトリ　「https://github.com/」の後ろの部分

他のbackendの設定は「Authentication & Backends」をご覧ください。

続いて順番が前後しますが、「media_folder」を設定します。
その名の通り「どこに画像を置くか」です。
Hugoのデフォルトの動きで考えるとこちらでしょうか。

media_folder: "static"

すでに画像を置かれている場合にはその環境のパスに合わせてみてください。

次は「public_folder」です。
これは「ビルド後にファイルをどこに配置するか」です。
これもデフォルトの通りこのように設定してみます。

public_folder: "/public"

public_folderはmedia_folderと違い「/」からはじまるパスということに注意してください。

最後は「collections」です。
「ページをどこのディレクトリに、どのような設定(Front Matterなど)で作るか」を記載します。
今回は例としてこのようなFront Matterのページを想定します。

---
title: "Let's Party"
date: 1999-12-31 11:59:59 -0800
thumbnail: "/images/prince.jpg"
rating: 5
---

This is the post body, where I write about our last chance to party before the Y2K bug destroys us all.

このMarkdownファイルをCMSから作成する場合のcollectionsはこちらです。

collections:
  - label: "Blog" # 管理画面のサイドバーで使う
    name: "blog" # 管理画面のパスで使う　例：/admin/collections/blog
    folder: "content/blog" # Markdownを保存するディレクトリ。Hugoのsectionにあたる
    create: true # 新しいページを作ることを許可する
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Markdownのファイル名　例：YYYY-MM-DD-title.md
    fields: # ページ作成画面で使う。Front Matterの値を書く
      - {label: "タイトル", name: "title", widget: "string"}
      - {label: "公開日", name: "date", widget: "datetime"}
      - {label: "サムネイル画像", name: "thumbnail", widget: "image"}
      - {label: "レーティング", name: "rating", widget: "number"}
      - {label: "本文", name: "body", widget: "markdown"}

Hugoでsectionを複数分けている場合にはlabel以下を複数記載すれば大丈夫です。

collections:
  - label: "Blog" # ブログ
    name: "blog"
    folder: "content/blog"
    (略)
  - label: "News" # ニュース
    name: "news"
    folder: "content/news"
    (略)

collectionsの他の設定は「Configuration Options」をご覧ください。

ここまでくれば基本的な設定は終わりです。

３．管理画面が表示されていることを確認

管理画面を再読み込みして管理画面が表示されることを確認しましょう。
恐らくここでGitHubへの認証リクエストがあると思います。
Netlify CMSではGitHubのユーザー認証を使用してアクセス権限を判定します。
GitHubのリポジトリにアクセスできるユーザーでログインしてください。

おめでとうございます。
そうするとこのように管理画面が表示されているのではないでしょうか。

注意：ここでページを作らないでください。
ページを作って公開するとGitHubにpushされるので気をつけてください。

４．GitHubにpushする

管理画面ができたらGitHubのリポジトリにpushしましょう。

お疲れ様でした。
これでNetlify CMSの設定が完了しました。

既存のHugo製サイトにNetlify CMSを導入する。GitHubを使ってNetlify以外でのホスティングの場合

TECH

2018.09.12

１．staticディレクトリの中にadminディレクトリを作る

２．adminディレクトリにindex.htmlとconfig.ymlを入れる

index.htmlを作る

config.ymlを作る

３．管理画面が表示されていることを確認

４．GitHubにpushする

PROFILE

RANKING

TAG

SEARCH