Hugoのブログを更新するときには基本的にはローカルPCを使っています。僕の場合はNetlifyを絡めて、

1. 記事更新
2. Gitへpush
3. Netlifyでビルド
4. Netlifyで最新バージョンが配信

という流れで配信まで行っています。

記事の新規追加はこれで十分なのですが、タイポの修正のようなちょっとした修正までPCを使うのは非常に面倒だなと思っていました。

NetlifyにはCMS機能を提供するような仕組みがあることは知っていました。しかし、2018/04/09現在Gitリポジトリとして使っているBitbucketには対応していません。

このあたりでやりとりがあります。

• Netlify CMS on Bitbucket · Issue #234 · netlify/netlify-cms
• (WIP) Bitbucket integration by zanedev · Pull Request #525 · netlify/netlify-cms

当初はこれを待ってからでいいなと思ってたんですが、検索機能を作るときに参考にしたブログがforestry.ioというサービスの記事で、よく見たらCMS機能があるじゃないですか。簡単に使えるならいいなと思い、早速使ってみました。

ログインからサイト追加まで

こちらからサインアップしましょう。

Git-based CMS for Hugo, Next.js, Gatsby, Jekyll, Nuxt.js, Hexo, Eleventy, Docusaurus, Gridsome and more. | Forestry.io

Content management system for sites built with static site generators. Get the speed, security, and reliability of static and the power of a Headless CMS. /

forestry.io

Bitbucketログインにも対応しています（最近はGitLab対応しているところが増えてきね）。

ログインが終わると空のダッシュボードに来ます。Add Siteに進みます。

続いてサイトの種類を選びます。Hugoかjekyllが選択できるようですね。今回はHugoを選んでいます。

続いてソースを指定します。置き場所はBitbucketを選び、リポジトリとブランチを指定します。

これでしばらく待つとインポートが完了します。

記事の登録や編集

ダッシュボードにサイトが追加されました。

続いてサイトダッシュボードに入っていくと、こんな風になってます。記事の一覧がでていたり、config.tomlに書いているようなサイト設定を確認・変更できるようになっていたりします。

では、ADD NEWから記事を追加してみましょう。ADD NEWするとダイアログが出て、タイトルとPATHを決めろとなります。

また、ここでテンプレートを指定できます。記事のdescriptionやタグ、アイキャッチなどのメタデータを設定するのですが、これのフィールドを予めテンプレートとして追加しておくことができます。

元々入っていたタイトル、日付、下書きの3項目に加え、タグ、description、thumbnailの3項目を追加しておきました。

最後に本文を書いて公開状態にしてPUBLISHすれば公開となります。少し時間がかかりますが、プレビューなんかもできてまずまずいい感じです。

とは言えやはり本文を新たに書く場合にはローカルのエディタとローカルのサーバーのほうが確認の手間も含めて楽です。CMSは微修正を中心に活用します。