netlify
Pocket

前回NetlifyでHugoをホスティングする手順をまとめてみました。

NetlifyでHugoで作った静的サイトをホスティングしてビルドを自動化する

HugoやJekyll、Hexoなどスタティックサイトジェネレーターを使う場合はだいたいマークダウンで記事を書いて、コマンド使って、Git使ってみたいな手順になるはずです。

上記記事の手順を踏める人はコマンドやGitは問題ないと思いますが、記事を書く人がコマンドが使えない場合、導入の急にハードルがあがってしまいます。

Netlify CMSを使えば、HugoやJekyllなどのスタティックサイトジェネレーターに管理画面を追加して、WordPressのように管理画面内で記事を書いて公開することができます。

Netlify CMS

netlifycms

だいたいQuick StartをGoogle翻訳にかけつつ、手順通りやっていけば管理画面追加まではもっていけます。

前回作ったこちらのサイトに管理画面を追加してみます(これはもうNetlify CMSを入れた状態です。外からじゃ分からないけど…)

もくじ
  1. GitHub認証
  2. index.html
  3. config.yml
  4. 公開
  5. さいごに

記事長いですが、設定の詳細や画像があるためで、GitHubの認証をして、index.htmlとconfig.ymlをちょっと書けばすぐに終わります。

GitHub認証

Netlify CMSとGitHubリポジトリを連携するにはまずは認証が必要です。

GitHubのアカウントページの設定内にある「Developer applications」を開きます。

「Register a new application」をクリックします。

こんな感じで入力します。だいたい分かると思います。「Authorization callback URL」には「https://api.netlify.com/auth/done」と入力します。

githubnetlifyauth

入力したら「Register application」ボタンを押します。

登録できると次の画面で「Client ID」と「Client Secret」の2つのコードが表示されます。このコードはNetlifyの管理画面で使います。

次にNetlifyの管理画面へ。

Netlify dashboard

CMSを追加したいサイトを選び、Accessタブを開きます。

netlifyaccess

下の方に「Authentication providers」があるので、そこの「Install provider」をクリック。モーダル上で「GitHub」を選択し、「Client ID」と「Client Secret」を入力しInstallします。

authmodal

これで準備OKです!

index.html

管理画面を作るためのファイル構成が静的サイトジェネレーターによって決まっています。

App File Structure

Hugoの場合は「static」ディレクトリ以下に「admin」というディレクトリをつくるようです。adminディレクトリ以下にはindex.htmlとconfig.ymlが必要ですが、まずはindex.htmlから。

adminディレクトリ以下に作った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>

  <link rel="stylesheet" href="https://unpkg.com/netlify-cms@~0.4/dist/cms.css" />

</head>
<body>
  <script src="https://unpkg.com/netlify-cms@~0.4/dist/cms.js"></script>
</body>
</html>

config.yml

index.htmlと同じディレクトリに作るconfig.ymlはサイトの設定ファイルです。このファイルの内容はサイトによって変わります。

先に最終的なconfig.ymlの状態です。

backend:
  name: github
  repo: mismith0227/hugo-netlify-sample
  branch: master

publish_mode: editorial_workflow

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

collections:
  - name: "post"
    label: "Post"
    folder: "content/posts"
    create: true
    slug: "{{slug}}"
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Descreption", name: "description", widget: "text"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Featured Image", name: "thumbnail", widget: "image"}
      - {label: "Category", name: "categories", widget: "list", required: false}
      - {label: "Tags", name: "tags", widget: "list", required: false}
      - {label: "Body", name: "body", widget: "markdown"}

これでmasterにプッシュ・マージすると管理画面ができます。

管理画面のURLはURLのあとに「/admin」と入力してアクセスするとログイン画面が出てきてGitHub認証でログインできます。えらい殺風景です…。

netlifycmslogin

ログインすると前回書いた記事があります!

netlifyadmin

記事投稿ページはこんな感じです。

netlifycmspost

書いてる内容は右側にリアルタイムで反映されますし、マークダウンも使えます。config.ymlで設定したカテゴリやタグも記事を投稿画面で設定できます。エディタエリアの操作はブログを書いたことがあれば難なく操作できるはず。

以下config.ymlの各項目について簡単に説明します。

BACKEND

以下はGitHubを使っている例です。

repoには「mismith0227/hugo-netlify-sample」という感じで入力、branchは省略するとデフォルトでmasterです。

backend:
  name: github
  repo: owner-name/repo-name
  branch: master # Branch to update

EDITORIAL WORKFLOW

Netlify CMSはデフォルトでは、エディタで記事を書いて「Save」を押すと、すぐにGitHubにプッシュされて記事が公開されてしまいます。記事を書く人にとっては書いてそのまま公開は困るでしょうし、一旦下書き状態で置いておきたいことは当然あると思います。

Editorial Workflowを使うことで、下書き状態の記事を作ったり、複数人で運営するブログならレビュー待ち状態にしたり、公開までのワークフローを踏むことができます。

以下を追加するだけでそれができます。

publish_mode: editorial_workflow

これを追加すると、Editorial Workflowというメニューが

workflowmenu

このページを開くとこんな感じです。

EditorialWorkflow1

ドラッグアンドドロップでレビュー状態に

EditorialWorkflow2

「Wating to go live」状態にすると「PUBLISH NOW」ボタンが出てくるので、これをクリックすると記事が公開されます。

EditorialWorkflow3

状態が分かりやすくていいですね!

また、日本語で記事を書く場合で、かつ、URLを日付ではなくslugにしたい場合は使うことをオススメします。

というのがタイトルに入力した内容がそのままslugになり、マークダウンファイルの名前になるんですが、日本語タイトルだと反映されず記事が公開されません。そのため、このEDITORIAL WORKFLOWで一旦タイトルは英語で下書きしてファイルは作ってしまい、公開までのフローの間にタイトルを日本語に修正という手順を踏めば、日本語タイトルの記事で公開できます。

上記の3枚の画像でタイトルが最初は「hanabi」なのに途中で「花火」に変わってるのはそのせいです。

Editorial Workflowを使わないで日本語タイトルの記事を公開する場合は、一度公開してしまってすぐにタイトルだけ変更するか、URLをslugではなく日付にするなどの対応が必要です。

という事情もありますが、便利なので使うといいと思います。

MEDIA AND PUBLIC FOLDERS

Netlify CMSの管理画面で直接画像をアップロードすることができます。そのための画像の保存場所を指定します。ドキュメント通り以下のように書いてみます。

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

COLLECTIONS

ここはサイトのコンテンツの構造を定義するところです。

いろいろ設定があるので、直接見てみる方がいいと思います。また、テーマによっても用意されてるものが違うはずなので、設定しても反映されなかったり、ビルドできなかったりすることがあるので注意が必要です。

COLLECTIONS

今回はQuick Startの内容を少し変更して以下のようにしてみました。

collections:
  - name: "post"
    label: "Post"
    folder: "content/posts"
    create: true
    slug: "{{slug}}"
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Descreption", name: "description", widget: "text"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Featured Image", name: "thumbnail", widget: "image"}
      - {label: "Category", name: "categories", widget: "list", required: false}
      - {label: "Tags", name: "tags", widget: "list", required: false}
      - {label: "Body", name: "body", widget: "markdown"}
name
nameは管理画面のURLで使われるものだと思います。ユニークなものでなければなりません。
label
管理画面のメニュー等で使われるラベル名です。
folder
マークダウンファイルが保存されるディレクトリです。これはテーマや使い方によって違うかも。
create
Google翻訳によると「ユーザーがこのコレクション内に新しいファイルを作成できるようにするには、trueに設定します。」なんですが、まだよく分かってないです。。
slug
URLをどうするかです。{{year}}, {{month}}, and {{day}}は日付などで、デフォルトは{{slug}}.です。
fields
fieldsで設定した内容はエディタのフィールドとして表示されます。例えば、タイトルやディスクリプション、投稿部分など。必要であればカテゴリやタグも。

fieldsについて

fieldsは上記の通り設定するとエディタ上で表示されます。

「label」は表示されるタイトル、nameはHugoでいうとFront Matterでのラベル、widgetは入力のデータタイプとインターフェイスの設定です。

required: falseを追加すると必須ではなくなります。デフォルトで必須みたいです。

上記のcollectionsの設定で書いた記事をGitHubからプルしてくるとFront Matterはこんな感じになっています。

---
title: 花火
description: 花火大会の写真
date: 2017-08-05T04:40:59.130Z
thumbnail: /images/uploads/hanabi.jpg
categories:
  - 写真
tags:
  - 花火
  - 夏
  - 祭り
---

詳しくはWidgetsページなどをみるといいです。

Widgets

最後にもう一度設定した内容をまとめて

backend:
  name: github
  repo: mismith0227/hugo-netlify-sample
  branch: master

publish_mode: editorial_workflow

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

collections:
  - name: "post"
    label: "Post"
    folder: "content/posts"
    create: true
    slug: "{{slug}}"
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Descreption", name: "description", widget: "text"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Featured Image", name: "thumbnail", widget: "image"}
      - {label: "Category", name: "categories", widget: "list", required: false}
      - {label: "Tags", name: "tags", widget: "list", required: false}
      - {label: "Body", name: "body", widget: "markdown"}

公開

長くなりましたが、設定自体はadminフォルダを作って、index.htmlとconfig.ymlをつくるだけです。

2つを作ってmasterへプッシュし、記事を書いて公開すると、ちゃんと表示されました!カテゴリやタグ、サムネイルも出ています。

ふたたび、そのサイトです。

https://mismith-hugo-netlify-sample.netlify.com/

さいごに

長くなりましたが、要はGitHubの認証をして、adminフォルダにindex.htmlとconfig.ymlを作って終わりです。めっちゃ簡単です。ドキュメントにはもっといろんなこと書いてあるので試していこうと思います。

管理画面とエディタがあれば、静的サイトのデメリットもだいぶ減ると思います。さらにNetlifyは問い合わせフォームをつくることもできるので、最低限ほしいものはできそうです。

NetlifyのForm Handlingで静的サイトに簡単にお問い合わせフォームを作る

Netlify CMSはオープンソースで開発されてますし、今後もっと便利になっていきそうで期待できます!

今回のサンプルのソースコードはこちらです。

https://github.com/mismith0227/hugo-netlify-sample

Pocket