目次:
- Notion Blogとは？
- Notionは他のヘッドレスCMS活用と比べて導入ハードルが低い
- 非エンジニア向けのNotion-blog-nextjsの具体的な導入手順
- より手早くNotionブログを公開でき、日本語情報の多い”easy-notion-blog”も
Notion Blogとは？
今回はNotionをヘッドレスCMSとして利用し、フロントエンド側でNotionの非公式APIと繋ぎ込んで情報取得してブログ化しますよーってのがNotionBlogです。 今回紹介するNotionBlogは上記概要を実現したOSSライブラリ
今回はコンテンツを作る&管理も優秀で最高な体験が出来るNotionをヘッドレスCMSにしちまえばいいじゃん！複数ブログ作ったとしても、一箇所のNotionで完結出来る未来、めちゃ楽じゃんっていう発想を叶えるのがNotionBlogだったというわけです。
15分で一緒に作ろう！NotionをヘッドレスCMSにして爆速ブログを作る方法 - Qiita
引用内のNotionBlogと、今回記事タイトルの"notion-blog-nextjs"は指しているものは異なりますが、公式APIを活用する形で構築されているのか/いないのかの違いだけで、概念は同様のものとなります。
Notion-blog-nextjs はNotionが提供する公式APIを活用するOSSライブラリとなります。
下ツイートにもあるように、Notion + Next.js + TailwindCSS 版ライブラリのnotion-nextjs-blogもあります。
Notionは他のヘッドレスCMS活用と比べて導入ハードルが低い
ヘッドレスCMSは、 ・Strapi ・Contentful ・Netrify CMS などなど色々あると思いますがそれらはセットアップがかなり大変だと思います。 ヘッドレスCMS側もセットアップが必要ですし、それを活用するフロントエンドを作るのも案外手間です。ヘッドレスCMS側で作ったデータ構造を適切にTypeScriptで処理できるようにしていくのも結構骨が折れるのでできればやりたくない...。 でもこのテンプレートはそこをすべて一気通貫で整えてくれるのがかなりポイント高いと思います。
NotionがヘッドレスCMSになる！ZEIT製のNext.jsベースのテンプレートはお手軽にブログ・メディアを始められるツールになりそう - 飽き性の頭の中
導入ハードルが低いとはいえ、「他のヘッドレスCMSと比べると」というだけで一定の工数はかかります。
「とりあえず何も考えずにNotionをブログ化したい」という方はNotionをサイト化・ブログ化するSaaSである Super あるいは Wraptas を利用するのが手っ取り早いでしょう。
参考: NotionをWebサイトとして公開する方法 : SuperとWraptas（Anotion）
非エンジニア向けのNotion-blog-nextjsの具体的な導入手順
Notion公式アンバサダーのYuji Tsuburaya(@____35d)さんが動画でわかりやすく解説してくださっています。
テキストでの解説は下記。
（非エンジニア向け） notion-blog-nextjs で Notion をヘッドレス CMS にしたブログを開設する （Notion API）｜Yuji Tsuburaya / Notion アンバサダー｜note
（非エンジニア向け） notion-blog-nextjs で Notion をヘッドレス CMS にしたブログを開設する （Notion API）｜Yuji Tsuburaya / Notion アンバサダー｜note
こんにちは、 円谷です。表題にもある通り、今日は notion-blog-nextjs という Notion をヘッドレス CMS にしたブログの紹介をしたいと思います。CMS が Notion で、フロントエンドが Next.js というアーキテクチャでブログを開設することができるというものです。 This is a Next.js blog using Notions Public API.
note.com
より手早くNotionブログを公開でき、日本語情報の多い”easy-notion-blog”も
本記事でご紹介した”Notion-blog-nextjs”の方は、まっさらに近い状態であるため、実装したあとに自分で手を加えることが念頭に置かれています。
そこで、「よく使われる機能をパッケージングした、公開できるレベルのブログ」をすぐに公開できる”easy-notion-blog”というスターターキットも公開されています。
easy-notion-blog/README.ja.md at main · otoyo/easy-notion-blog
easy-notion-blog/README.ja.md at main · otoyo/easy-notion-blog
English | 日本語 easy-notion-blog を使えば簡単にブログを開設できます。 ブログは Notion で書くことができます。 https://easy-notion-blog-otoyo.vercel.app/blog 高速な表示 Notion でブログが書ける Notion 公式 API を使用 すべてカスタマイズ可能 (カスタマイズしたい場合は下記も) このリポジトリを Star します😉 テンプレート を自分の Notion へ複製します 複製したページの URL の次の部分を DATABASE_ID としてメモします https://notion.so/your-account/ ?v=xxxx 例) 158bd90116004cd19aca26ad88cb5c07 Create an integration からインテグレーションを作成し "Internal Integration Token" を NOTION_API_SECRET としてメモします 複製したページを再度開き Share a database with your
github.com
参考: 職業プログラマでなくてもカスタムNotionブログを手早く公開！easy-notion-blog
開発者のおとよさん（@otoyo0122）が日本人ということもあり、日本語のREADMEが容易されていることから、日本語の情報を参照しながら開発したいという方には適しているでしょう。
Twitterコミュニティの動きも活発に思えます。
ぜひeasy-notion-blogも試してみてください。
同作者さんが2023年1月、高速な静的サイトビルダーAstroを活用したastro-notion-blogを公開しています。この astro-notion-blog についても 職業プログラマでなくてもカスタムNotionブログを手早く公開！easy-notion-blog の記事で紹介していますので、ぜひお読みください。
Category: Notion
Tag: Notion | CMS一般
