近頃「本当に太りましたよね…」って言われるようになったベルです。非常にまずい。夏までになんとかしたいと思っていましたがもう6月です。スポーツジムに通うことも考えましたが、多分続かないのでとりあえずランニングから始めよう！と心に決めてから数ヶ月が経ちました。大丈夫ではありません。

サイトの必要性

宮崎オフィスは2022年の4月から本格的にスタートをしたわけですが、宮崎での新たなメンバーを増やしていきたいこと、宮崎オフィスならではな情報（イベント等）の発信をしたいなーと思い始め、今年に入ってから本サイトの制作に取り掛かりました。

どう作るのか？

会社としての一体感を表現するには、カラビナの公式サイト内のコンテンツとして制作することがもしかすると一般的であり効果的かもしれませんが、面白いサイト構築方法はないか？とか、宮崎のインターンシップ等で触れるモノにできないか？など、今後の利用を考えつつ宮崎オフィスを盛り上げていく施策の一つとして1から構築しました。

Notionateとの出会い

カラビナでは、情報共有のツールとして「Notion」を利用しており、Notion単体でもwebサイトとして公開することは可能です。ただ、将来的にはおしゃれで宮崎っぽいUIにしたいし、普段からドキュメント置き場として利用しているNotionでコンテンツを管理したい、っていうかそれが便利、という思想のもとで色々調べていると、linyowsさんのOSS「Notionate」を見つけました。

Notionateは、NotionAPIを使ってNotion上のページやデータベースを表示するReactコンポーネントで、Notion上にホストしている画像や、ブックマークのOGP画像のエクスポートも一緒に行ってくれる最強のライブラリです。Next.jsと掛け合わせることによって比較的簡単に静的なwebページを出力することができます。最高すぎやしないか？という気持ちでいっぱいでございます。本当にありがとうございます。

※最新のバージョン（≧10.0.0）では、画像圧縮とwebpへのコンバートまでやってくれます。神か、、

余談ですが、こういったサイトをすぐ立ち上げたい時に思いつくものが「Wordpress」で、僕も昔からすごくお世話になっている世界一のCMSです。しかしながらご存知の通り、危険度の高い脆弱性があったり改竄されたり…と、サイト内のコンテンツ制作に集中したいはずなのに、セキュリティ関連のメンテナンスコストが意外と高かったりします。（でも好きです）

このようなメンテナンスコストをできる限り下げ、管理を楽にする方法の一つとして「マネージドなHeadless CMS」を使うことが挙げられます。現行のカラビナ公式サイトもContentfulをつかったwebサイトになっています。

宮崎オフィスのサイトはこうなっている

カラビナ宮崎オフィスサイトは以下の通り、2つのデータソースしかありません。非常にシンプルです。

赤枠がNotionのページ、青枠がNotionDBからデータを取得していますが、Notionateのもう一つの特徴として、Notionっぽいサイトのパーツを再現するReactコンポーネントが同梱されているので、一旦はNotionっぽい見た目でいいじゃん！という場合は高速でデリバリーできます。最高！

また、ファイル自体は next build & export で静的に出力し、一般的なレンタルサーバにデプロイしています。特にブログなどは画像を多く使っていますが、表示スピードも悪くありません。素晴らしい！

さいごに

本サイトはNotionateとNotionのおかげで運用できています。Notionateは使い方も本当に簡単なので割愛しますが、GitHubのリポジトリを見ていただければサンプル等もありますのですぐ使えるようになっています。もしNotion＋Next.jsをつかった静的webサイトの構築をやってみたい！という方はぜひ利用されてみてはいかがでしょうか？