遠出する用事ができまして。いつも使用しているパソコンが使えません。
でもこのブログ、Netlify に引っ越ししていました。
という事は…… Netlify CMS を使用して、
Web ブラウザから投稿・編集するようにできるんですね!
リポジトリに Bitbucket、静的サイトジェネータ Hugo という構成での
Netlify CMS 設定方法を残しておきます。

Netlify CMS

CMS と名乗ってはいますが、管理している Web に admin フォルダを追加する事で
Web ブラウザからの編集機能を追加するものです。
Git は Netlify 対応の GitHub、GitLab、Bitbucket からの選択で、
これが Oauth の認証して使用することになります。

GitHub を使用している事が多いと思いますが、
今回は無償アカウントでもプラベートリポジトリを作成でき、
表示も日本語表示になる Bitbucket を使用していますよ。

admin フォルダの生成先(Hugo の場合)

admin フォルダ

Hugo は static フォルダ内をそのまま公開フォルダ(通常 public)にコピーします。
なので、static フォルダ内に admin フォルダを生成し、
この中に index.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/[email protected]^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>

config.yml の生成方法

config.yml はブログによって変わってきます。
なので、このままコピーしても使えません。説明に応じて編集して下さい。

backend:
  name: bitbucket
  repo: fu-sen/balloon.gq
  branch: master

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

collections:
  - name: "post"
    label: "Post"
    folder: "content/post"
    create: true
    slug: "{{year}}{{month}}{{day}}{{slug}}"
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Categories", name: "categories", widget: "list", required: false}
      - {label: "Tags", name: "tags", widget: "list", required: false}
      - {label: "Keywords", name: "keywords", widget: "list", required: false} 
      - {label: "Thumbnail Image", name: "thumbnailImage", widget: "image", required: false}
      - {label: "Image", name: "image", widget: "image", required: false}
      - {label: "Body", name: "body", widget: "markdown"}

backend(Bitbucket の場合)

backend:
  name: bitbucket
  repo: fu-sen/balloon.gq
  branch: master

Bitbucket を使っているみなさん、おまたせしました。こんな感じですよ。
name: bitbucket として、repo: は アカウント/リポジトリ、
buanch: は master などのブランチとなります。

メディア・アップロードフォルダ

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

画像などを入れているフォルダを指定します。
このブログは通常 年月 でフォルダを分けているのですが、
可変できないようなので、static 内にある images フォルダとしています。
公開は balloon.gq/images/画像ファイル名 になるので、images です。

collections(Hugo の場合・一例)

collections:
  - name: "post"
    label: "Post"
    folder: "content/post"
    create: true
    slug: "{{year}}{{month}}{{day}}{{slug}}"

Hugo のブログは contect フォルダ内の post フォルダにファイルを生成します。
slug は生成ファイル名、いつもは 2018121001.md という感じに作っているので、
年月日 を加えた名称としました。

collections/fields(記事のヘッダに合わせて)

    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Categories", name: "categories", widget: "list", required: false}
      - {label: "Tags", name: "tags", widget: "list", required: false}
      - {label: "Keywords", name: "keywords", widget: "list", required: false} 
      - {label: "Thumbnail Image", name: "thumbnailImage", widget: "image", required: false}
      - {label: "Image", name: "image", widget: "image", required: false}
      - {label: "Body", name: "body", widget: "markdown"}

ここは記事のヘッダに合わせて可変する事になります。
Hugo でもテーマによってヘッダは変わってきます。

---
title: "ブログに IchigoJam フォント。"
date: 2018-10-17T08:57:01+09:00
categories:
- ブログ
tags:
- Hugo
- IchigoJam
- CSS
- Blog
- ブログ
keywords:
- Hugo
- IchigoJam
- CSS
thumbnailImage: /201810/ichigojambasic.png
---

このブログのヘッダは通常こんな感じです。
これに画像の image と本文の body を追加しています。

OAuth の設定(Bitbucket)

はい、Bitbucket 使いのみなさま、お待たせいたしました。
Web ブラウザで bitbucket を開いて、
左下自分のアイコン - bitbucket settings を選びます。
アカウント設定画面に変化するので、設定 - OAuth と選択し、
OAuthコンシューマ にある コンシューマキーを追加 を選択します。

BitBucket OAuth 1

多くの項目がありますが、入れるのが次の項目だけです。

  • Name: Netlify CMS(別の名前でも OK)
  • コールバック URL: https://api.netlify.com/auth/done

BitBucket OAuth 2

権限はリポジトリの読み・書き・管理だけで良いと思うのですが……

BitBucket OAuth 3

OAuthコンピューマ にこんな感じで表示されれば設定完了です。

OAuth の設定(Netlify)

次は Netlify。意外とこの説明をしているブログで記載されていないのは
Netlify で複数サイトを運用している場合は、サイト毎に OAuth を設定します。
これとは別に Account Setting にも OAuth はありますが、こちらではありません。
Netlify で試しに 1 サイト作った状態で投稿している人が多いのでしょうね。

Netlify OAuth 1

Netlify CMS を導入する Web サイトを選択した後、
上部 Settings - 左サイドバー Access Control - OAuth を選びます。

Netlify OAuth 2

「OAuth」にある Install provider を押します。

Netlify OAuth 3

このような表示になります。Provider は GitHub・BitBucket・GitLab の選択、
Bitbucket だと Key=鍵、Secret=シークレット です。コピー→貼り付けしましょう。
これで設定完了です。

動作確認

Web ブラウザから Web サイト・ブログのアドレスに /admin/ を付けて参照します。
このブログだと https://balloon.gq/admin/ ですね。
admin から名前を変えていた場合はその名前になりますよ。
画面が出てきて、クリックすると GitHub・Bitbucket・GitLab の認証になります。

Netlify CMS 1

ログインして、今まで投稿しているブログの一覧表示が出てきている事を確認します。

Netlify CMS 2

Media をクリックし、フォルダに入っている画像が出てくる事を確認し。
Upload now から画像を追加して、正常に追加される事を確認します。

Netlify CMS 3

すでに公開されている記事を参照し、すべての項目が表示されている事を確認します。
これらが確認できれば OK。Netlify CMS は使えるようになりました。

記事の投稿

Image は 1 項目の選択ですが、これは画像を選択する必要はありません。
Choose an image から一覧表示を表示し、
Upload Now から画像を選ぶ事で画像をアップロードするために追加しています。
あとはそのフォルダ内にあるファイルを本文で指定すれば
プレビューで画像が確認できます。

GitHub では Draft による下書きが可能ですが、他ではできません。(2018/12 現在)
Publish で完全に入れて公開するしかありません。
記事を途中まで入れて中断する事ができないので、注意を要します。

Git 環境を主に使っている場合は git pull でファイルをダウンロードし、
Netlify で投稿・編集したファイルをローカルに反映して下さい。

……と、この記事も Netlify CMS で作ってみましたよ。
このブログも Netliy CMS が無事使えるようになりました。


追記 2019/01/02

Hugo は date の日時が hugo コマンドを実行した日時より新しい場合に
その記事・ページは生成を行いません。
これを使用してわざと数時間~数日後の日時にしておく事で
非表示にする手段があります。
または draft の項目次第なので、1 項目作成して yes・no を入れても良いです。