ブログを Hugo + Firebase Hosting -> Hugo + Netlify + Netlify CMS に移行してみました。

移行理由

Hugo で生成→Gitリポジトリでホスティング→Firebase Hostingにデプロイというフローで書いており、パフォーマンス、費用面でも問題なく利用できていました。

ただ、 hugo new post/hoge.md 、記事を書く、 firebase deploy という手順が若干面倒になっていたのと、端末が増えてどこからでも簡単に書けるようにしておきたかったので、Netlify CMSにたどり着きました。

良さそうだなと思ったポイントはこのあたりです。

駄目なら Revert すればよいので、早速導入してみました :)

移行手順

元々 Hugo を使っていたので、その部分については変更する必要が有りません。ホスティング先を変更し、DNS を変更すれば、移行完了。
その後、Netlify CMS の機能を有効化します。

Netlify でホスティング

これは非常に簡単。本当に数クリック。

  1. netlify.com でアカウントを作成
  2. Hugo のファイルが置いてあるリポジトリを指定
  3. (自動)静的ジェネレータを自動で判別し、デプロイ開始
  4. DNS設定を変更(AレコードあるいはCNAME)。HTTPS化もクリック一発で完了 :)

なお、今まではローカル環境から firebase deploy を使っていて気づきませんでしたが、Hugo のテンプレートを導入している場合、モジュールが無く Netlify のデプロイに失敗。 git submodule add で解決。

また、 theme = "hugo-tranquilpeak-theme" のテーマを利用している場合は、以下のようにjsを読み込ませることができます。

https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md#add-custom-js-or-css-using-configuration

[params]
  [[params.customJS]]
    src = "https://example.com/hoge.js"

Netlify CMS の導入

元々の目的であった、GUI で記事を書けるようにします。 既存のサイトに対しても、Netlify CMSを有効化することができます。

Hugo 向けの説明ページ に従って、幾つかファイルを変更します。

  1. static/admin 以下にファイルを作成
  2. js を読み込むように修正
  3. Netlify 側で認証を設定する

なお、既存のリポジトリではなく、新規に作成することで、どこに何が書いてあるか理解するのに役立ちました( チュートリアル )。

ただ、Netlify CMS の設定と Hugo の対応関係が少し分かりづらいです。参考までに、config.yml を載せておきます。

backend:
  name: git-gateway
  branch: master # Branch to update (optional; defaults to master)
media_folder: 'static/images'
public_folder: 'images'
collections:
  - name: 'post'
    label: 'Post'
    folder: 'content/post'
    create: true
    fields:
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Description', name: 'description', widget: 'string' }
      - { label: 'Categories', name: 'categories', widget: 'list' }
      - { label: 'Keywords', name: 'keywords', widget: 'list' }
      - { label: 'Body', name: 'body', widget: 'markdown' }

Editing...

画像のように入力すると、以下のような markdown が生成されます。

---
title: test
date: 2020-05-05T16:42:21.034Z
description: test
categories:
  - aaa
  - hoge
keywords:
  - aaa
  - hoge
---
# Netlify CMS test

hoge

## header 2

fuga

Netlify CMS のワークフロー機能

最後に、ワークフロー機能 を有効化します。

現状だと、下書きの保存など、ワークフローを回すことができません(git上は、masterブランチに直接コミットされ、それが即公開されます)。それでもいいのですが、書きかけの記事を残しておけたほうが便利でしょう。

Netlify CMS の設定ファイル ( static/admin/config.yml )に、以下の設定を追加するだけで有効化できます。 GitLab の Web UI でちょちょっと書き換えてコミットすれば完了です。

...
publish_mode: editorial_workflow
...

これを有効化することで、以下のようなフローを回すことができました。

Netlify CMS workflow

git の方ではどうなっているかというと、ブランチが切られています。

Netlify CMS workflow with GitLab

満足!