Stackbit というサービス、ご存知でしょうか？

頑張って一文で紹介すると「5分くらいでテーマを選べて JAMStack のサイトをCMS付きでレポジトリを作ってデプロイまでやってくれるサービス」です。 ちなみに今ご覧いただいているこのブログも Stackbit を使って作成いたしました。

本記事では軽いサービスの紹介と、使ってみた感想などを述べます。

「それっぽいテーマで自作ブログ始めてみたかったわ〜」という方にはいい感じのサービスかと思うのでぜひ試してみてください。

使い方

サービスのURLは以下の通りで GET STARTED からポチポチしていけばすぐにサイトが作れます。

https://www.stackbit.com/

一応最初は自分でスクショ撮りつつ使い方の解説を作っていたのですが、下記公式アカウントのGIFの方が遥かに伝わりやすかったのでまずはご覧ください。テーマを選んでデプロイされるまでの一連の手順が紹介されています。

ものの5分くらいでそれっぽいCMS付きの JAMStack で構成されたブログがデプロイされレポジトリも手に入るわけですね。いい時代になった。

ちなみに将来的にはいくつかの機能が有料になるかもしれないですが、この記事執筆時点ではベータ版で全ての機能が無料だそうです。

Stackbit is currently in beta and completely free. Once we go out of beta we plan to keep a large chunk of the functionality free to enable developers to use Stackbit for personal projects, learning new technologies, etc. We plan to introduce an affordable SaaS pricing tier for people who build websites for a living, agencies, etc.

https://docs.stackbit.com/faq/#isstackbitfree

使用感

当然ながら選んだテーマのものをそのままでは使えないのでいくつか変更を加えました。 いじったのは細かいのも含めて挙げると次のようなタスクになります。

- 細々とした表示する情報の変更
  - アイコン変える
  - サイト名とタグライン変える
  - SNS のURLとラインナップ変える
- OGPなどのメタ情報追加
- 表示するページ減らす(Contact とか Aboutとか削除)

これくらいです。作業時間は1時間くらいです。

細々とした表示する情報の変更

生成されたソースコードの特徴としてサイト名やアイコン画像のpathなどの設定系のものがJSONとして外出しされていることがあります。 具体例をあげるとPCレイアウトで見た時に左にあるサイドナビに表示される情報は次のようなJSONにまとまってました。

{
  "title": "Stackbit Fresh Theme",
  "layout_style": "overflow",
  "palette": "blue",
  "header": {
    "title": "Stackbit Fresh",
    "tagline": "Header Tagline",
    "profile_img": "images/icon.png",
    "bg": "dark",
    "has_nav": true,
    "has_social": true
  },
  "footer": {
    "content": "© Stackbit-Fresh. All rights reserved.",
    "links": [
      {
        "text": "Made with Stackbit",
        "url": "https://www.stackbit.com",
        "new_window": true
      }
    ]
  }
}

「えーそれJSXに直で書いて良くない？」みたいなことを直感的に思ってしまいましたが、おそらく将来的に非技術者でもいじれるようなインターフェイスを用意するための布石なのではないかとは思います。

結構この辺りテーマによって制約強そうなので、今回の私のような「ちょっとしたブログ作ってみた〜い」くらいの要件ならハマりそうですが、ゴリゴリカスタマイズしたメディアサイト作っていきたいとかであれば普通に自前で作った方が良さそうだと感じました。

OGPなどのメタ情報追加

react-helmet は最初から含まれているのでちょっと Meta タグ追加するだけと言えばそうなんですが、出力されるサイトは TS でなく JS なのが微妙に面倒くさかったです。

記事のタイトルとかはこんな感じで取り出していたので、これを console.log して記事のOGPに必要な情報取るという原始的な進め方をしました。

_.get(props, 'pageContext.frontmatter.title')

表示するページ減らす

ここは pages ディレクトリにマークダウンがあるのでそれを削除すればいいだけでした。

サービスに関して思うこと

Stackbit がこの先何を目指しているのかについては明文化されたものが見当たらなかったので察するしかないのですが、Stackbit の Founder の人の dev.to の投稿でこんな発言を見かけました。

I aspire for tools that help people build awesome things without requiring them to be the best in their field

https://dev.to/stackbit/project-benatar-publishing-dev-powered-websites-with-stackbit-lfo

CMS界隈は未だにWordpressが覇権を握っていますが、Wordpressで体験のいいサイトを作るのはそれ固有の知識がある程度必要なため、それを簡単に作れるようにすることがゴールなんじゃないかと思います。そして JAMStack の技術はフロントの知識が多少ある人であれば誰でもお手軽に触れて高速なサイトを実現できるものではあると思うのですが、そうでない人にはまだまだ触りづらい技術スタックだなと言うのが正直な感想です。

この辺のバリアを Stackbit が取り払ってくれて体験のいいサイトが増えるといいですね。とりあえず私は綺麗な感じのブログがサクッと作れて大変助かりました。