AMPに対応した静的サイトを素早くデプロイできるHabanero Beeというオープンソースのツールを作りました。

今日は、私が最近オープンソースで開発しているHabanero BeeというCMS（Static Site Generator）について書いていこうと思います。

Habanero Beeとは？

Habanero Beeは、Next.jsをベースに作成された、AMP対応のサイトを素早く生成するための静的サイトジェネレーターです。

Googleスプレッドシートを用いてサイトのコンテンツを管理することができ、簡易的なCMSとしても利用することができます。

このHabanero Beeですが、あらかじめ Netlify 上での展開を想定して作成されており、少ない労力と時間で作成したコンテンツを公開することができます。
(もちろんNetlify以外のサービスにもデプロイは可能です)

Habanero Beeの特徴

AMPに対応したサイトを簡単に素早く作成できる

Habanero BeeはAMP対応のサイトを簡単に作成することができ、またAMP対応であることで、サイトのパフォーマンスもある程度保証されます。
(これは、AMPに対応するということそのものが、ウェブのベストプラクティスに従っていることを意味するからです)

これはあくまでDEMOサイトでの例ですが、実際にHabanero Beeで生成したサイトをLighthouseで計測したもの。
(本当は all grean出したかったんですけどね...ここは今後の課題ということで)

計測に利用したHabanero Beeのデモサイトはこちら

Google スプレッドシートを用いてサイトのコンテンツを簡単に素早く作成・管理することができる

Habanero Beeにはコンテンツを管理するためのダッシュボードは用いません。
サイトの設定からコンテンツ管理までGoogleスプレッドシートの１ファイルだけですべてが完結するため、作成や管理がとても簡単です。

簡単・かつ迅速にサイトを公開することができます

Habanero BeeはNetlifyを使ってサイトをデプロイするように設計されています。
詳しくは後述しますが、Deploy to Netlifyボタンの仕組みを用いて、サイトのデプロイに関する工程を大幅に簡略化しています。

で、結局のところ、このツールを使うメリットとデメリットは何？

メリット

• サクッとAMP対応のサイトを公開できる。
  • ちなみに公開して２〜３日ぐらいでGoogle AMP キャッシュに乗っていました。ここらへんはGoogle次第なのでなんとも言えないですが、ご参考までに
• 何も考えずともパフォーマンスもそれなりに出る。
• ダッシュボードなどの画面は存在せず、一つのGoogle スプレッドシートファイルだけでコンテンツを管理できるので、新たに覚えることがない。
• (アクセスがそこまで集まっていない段階であれば) Netlifyの無料プランで運用できるので、WordPressのように毎月のサーバー代がかからない
• 独自ドメインを取得していれば、Netlifyで設定することですぐに独自ドメインのサイトを運用できる。
  • 無料のブログサービスだとここらへんはたいてい有料オプションなので、ここらへんもアドバンテージかと

デメリット

• AMP対応のサイトのため、AMP特有の制限がかかる
  • AMPではJavaScriptの利用が制限されているため、リッチな表現などはできない
  • amp-scriptなどでどこまでやれるかはまだ調べていませんが、通常のサイトに比べると制限はあるのかと思っています。
• Google スプレッドシートでコンテンツ管理するのを面倒と感じる人もいる。
  • Developerであればmarkdownファイルで管理したいと思う人が多いかと思う
  • ここは今後、Googleスプレッドシート以外でも管理できるようにしていきたいと思っていますが、それはまだ先の話
• 現状サイトデザインが固定となっている。
  • 上に上げたHabanero Beeのデモサイトの通りのデザインしか現在はありません。
  • ページデザインは後々テンプレートの種類を増やしたいところですが、それもまた先の話
• GitHubやNetlify、Googleのサービスに依存した設計となっているので、今後いずれかのサービスがもし無くなったり仕様が大幅に変更されたときに困りそう
  • ただ、コンテンツ自体はGoogle スプレッドシート一つにまとまっているので、万が一そうなったときでもなんとかなりそうではある。
  • いずれにせよvercelなど他のサービスにもデプロイできるようになっていくとよいかもしれませんね。
• 公開することを前提としたサイトしか作成できない
  • 例えばログインして利用するようなサイトは作成できません

というわけで、思いついたメリット・デメリットを書き出してみましたが、以上のようなことから、Habanero Bee自体はこれから事業を始める人や小規模なサイトをサクッと作りたい、という方向けのツールとなります。
例えば、ポートフォリオサイトをサクッと作りたい、新しく事業を始めたんだけど、その名刺代わりのサイトをサクッと作りたい、というようなケースはHabanero Beeがフィットします。

ダッシュボードを用いて複数人でコンテンツを管理したい場合はWordPressを使ったほうが良いですし、サイト内で決済できるようなサービスをやりたい方はそれに見合ったツールやサービスを使ったほうが良いです。

Habanero Beeの仕組み

Habanero BeeではNext.jsの静的サイト生成の仕組みを利用しています。
サイトのビルドを行う際に、予め指定したGoogleスプレッドシートの公開URLにサイトの情報を取りに行き、そちらの情報を元にページの生成を行います。

下記のイメージ図を見ていただくと分かりやすいかもしれません。

Deploy to Netlifyボタンを用いたHabanero Beeのデプロイ戦略

先ほども書いたようにHabanero Beeは少ない労力と時間で、作成したコンテンツを公開することを得意としています。
Netlifyで公開することを前提に作成しているのですが、最終的にはこのツールをプログラマー以外の方々にも利用してもらいたいと考えています。

GitHubでホスティングされているオープンソースのツールをNetlifyにデプロイする、そのようなことを開発者以外の方にもデプロイ方法として提示するのは難しいのではないか？

当然ながら、そのような疑問が浮かびます。
その問題を解決するのがDeploy to Netlifyボタンです。

Introducing the Deploy to Netlify button

Netlifyでこの機能がリリースされてからもう数年が経っているので、今更説明は不要かと思いますが、この機能を使うことでプログラマーではない方にとっても、比較的簡単にサイトをNetlifyにデプロイできるようになります。
(もちろん、この機能を使うにはGitHubとNetlifyのアカウントを作成することが必須となりますが、それでもターミナルを開いてデプロイのためのコマンドをアレコレ叩くよりは簡単なはずです)

Habanero Beeのデプロイデモ

では、具体的にどれぐらい簡単にデプロイができるかを、ここでお見せできたらと思います。
Habanero Beeでは簡単に動作チェックだけしたい方に向けて、予めデモサイト用のデータを公開しています。

下記のリンクをクリックすると、Habanero Beeのデモサイト用のデータがJSON形式で返ってきます。
このデータを用いてサイトを生成し、Netlifyにデプロイします。
(ちなみに下記のURLはGoogle スプレッドシートの内容をJSON形式で返すようにデプロイしたAPI的なものです。このように作成しています。)

Habanero Beeのデモサイト用データ

デモはこちらです。YouTubeにアップしている3分半ほどの短い動画です。

https://www.youtube.com/watch?v=v1EhZcyqKfE

Habanero Beeをプライベートリポジトリで試したい人へ

ちなみにDeploy to Netlifyボタンを使用してサイトをデプロイした場合、Deploy to Netlifyボタンの仕様としてデプロイした人のGitHubリポジトリにパブリックなリポジトリとしてHabanero Beeがコピーされますが、パブリックな形で試したくないなーという恥ずかしがり屋の方向けに、プライベートリポジトリで管理する方法もあります。下記の記述を参考にしてみてください。
(こちらは少々アナログのやり方ですが)

Habanero Bee - Advanced: How to manage Habanero Bee in a private repository

Habanero Bee開発のモチベーション(開発するきっかけ)

ある時、サイトのAMP対応に興味を持ち、Next.jsで作った 自分のサイト のAMP対応を進めていました。昨年のことです。
Next.jsでAMP対応のサイトを作成するのはとても簡単です。

興味ある方は下記をご覧ください。とても分かりやすいドキュメントです。
next/amp | Next.js

自分のサイトをAMPに対応させることで、Googleからのメリットだけでなく(そしてモバイルだけでなく)、サイト全体のパフォーマンスも向上します。
先にも書いたように、AMPで定められていることはウェブのベストプラクティスでもあるからです。

私はNext.jsを使ってAMP対応のサイトを簡単に作れることを知ったので、この仕組みを使ってAMP対応のサイトを簡単に作れるツールを作ろうと考えました。

そのツールがHabanero Beeです。

最初はプライベートリポジトリで開発していましたが、ある程度汎用性が出てきたので、パブリックリポジトリに移し、オープンソースで開発することにしました。

最初はすべてJavaScriptで書いていましたが、オープンソースとしてパブリックなリポジトリに移す前に大半のコードをTypeScriptに移行し、eslintやhuskyなどの設定を追加しました。
ここの作業については結構急ピッチで進めたため、例えば @ts-ignore でしのいでいるところとかがあったりするのですが、機能実装優先のため、これは後々解消していこうという方針でとりあえず書き直しました。

まだ色々と粗い箇所や整いきっていない部分もあるリポジトリですが、PRなどもウェルカムな感じなので、興味湧いた方はPRやissueなどお気軽にいただけたら幸いです。

本当はもう少し技術的な話も書こうと思ったのですが、文章も結構長くなってきてしまったので、一旦ここで区切り、また別の機会に書かせていただこうと思います。

もしこの文章を読んで興味を持ってもらえた方はHabanero Beeのリポジトリも覗いてみていただけたら幸いです。
上にも書いたように、GitHubとNetlifyのアカウントがあれば簡単なデモも試せるので、ぜひ触ってみてください。