PIYO - Tech & Life -

forestry.ioでHugoブログにCMS機能を一瞬で追加した

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

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

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

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

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

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

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

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

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

Git-backed CMS for Gatsby, Gridsome, Eleventy, Hugo, VuePress, Jekyll, etc. | 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. /

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


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


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


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


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

記事の登録や編集

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

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

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

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

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

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

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