目次:
- easy-notion-blogとは
- easy-notion-blog
- easy-notion-blogを利用すれば、15分でNotionブログを作ることができる…!?
- 職業プログラマでなくても（少し頑張れば）Notionブログのカスタマイズが可能
- easy-notion-blogを導入してみた人の声
- notion-blog-nextjsと比べeasy-notion-blogを使えば手早くブログ公開させることができる
- 速さを求める人のための高速Notionブログ開発キット”astro-notion-blog” （2023/01/23追記）
easy-notion-blogとは
Notionをカスタマイズ可能な形で、簡単にブログ化させたいときの決定版となるスターターキット。（Next.js製アプリケーション）
Notion Blog が簡単に始められる easy-notion-blog の紹介
Next.jsで書かれていることにより、柔軟なカスタマイズが可能となります。
同様にNotionをブログ化させるNext.js製アプリケーションとしては、”Notion-blog-nextjs”がありますが、easy-notion-blogはより素早く簡単に公開させることを目指した「スターターキット」としての立ち位置となるようです。
参考: Notionをブログ化して自由にカスタマイズ"Notion-blog-nextjs"
なお、かつ非エンジニアの方の場合で、多少お金がかかってOK・カスタマイズはある程度でOKという場合には SuperやWraptasというサードパーティのサービスを利用するという手段もあります。
参考: NotionをWebサイトとして公開する方法 : SuperとWraptas（Anotion）
本ブログはSuperを採用しています。
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 を使用 すべてカスタマイズ可能 (カスタマイズしたい場合は下記も) notion.so にログインします 新規に空のページを作成します /table とタイプし "Table - Inline" を選択します(下図 1) "Untitled" と名前のついた一階層下のページ(データベース) に移動します(下図 2) データベースの列名が Name, Tags になっていることを確認します。そうなっていない場合は変更します URL から次の部分を DATABASE_ID としてメモします https://notion.so/your-account/ ?v=xxxx Create an integration からインテグレーションを作成し "Internal Integration Token" を
github.com
easy-notion-blogの作者は @Otoyoさんという日本人のWebアプリケーションエンジニアの方。
easy-notion-blogを利用すれば、15分でNotionブログを作ることができる…!?
easy-notion-blog は、私の Notion Blog から一般的な機能を抽出し、簡単な操作で素早く Notion Blog を開始できることを意識して作っています。 「Notion Blog はどこから手をつけていいかわからない」という人にこそ easy-notion-blog を使ってほしいと思っています。下記のスクリーンショットをご覧ください。下記のブログが easy-notion-blog を使えば15分ほどでできてしまいます。
Notion Blog が簡単に始められる easy-notion-blog の紹介
初めて Zenn に投稿します。 この記事では、Notion Blog の開設を補助してくれる easy-notion-blog という自作の Next.js 製アプリケーションを紹介したいと思います。 Notion Blog はいわゆるヘッドレス CMS で、 Notion に書いた記事データを API で取得し、別の場所にホストしているブログアプリケーションに表示するシステムです。 ブログ部分は Next.js で書かれ、Next.js と親和性の高い Vercel でホスティングされます。 Notion Blog のシステム構成 Notion Blog と言ったとき、広義にはこれらシステム全体を指し、狭義には Next.js 製のアプリケーション（上図の Notion Blog 部分）を指している場合が多いです。 Notion Blog は、Notion でブログが執筆できること、高速な Next.js の恩恵を受けられること、そして Vercel が高機能な上に趣味用途では無料であることから、一部のブロガーの間で話題となり広まりました。 Notion Blog と言えば、登場からしばらくは本家とも言うべき下記リポジトリのことを指していました。 ヘッドレス CMS ではデータを取得するための
zenn.dev
（スクリーンショットについてはリンク先よりご確認ください。）
職業プログラマでなくても（少し頑張れば）Notionブログのカスタマイズが可能
各種ブロックの表示だけでなく、ブログのレイアウトも含め easy-notion-blog では全てがカスタマイズ可能です。 つまり、不満なところは自分で変えてしまえば良いのです。 プログラミングが必要ですが、それほど難しくはないはずです。 実際、職業プログラマーでないユーザーもカスタマイズを楽しんでおられます。
Notionで技術ブログを書いてみませんか？ - アルパカログ
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 を使用 すべてカスタマイズ可能 (カスタマイズしたい場合は下記も) notion.so にログインします 新規に空のページを作成します /table とタイプし "Table - Inline" を選択します(下図 1) "Untitled" と名前のついた一階層下のページ(データベース) に移動します(下図 2) データベースの列名が Name, Tags になっていることを確認します。そうなっていない場合は変更します URL から次の部分を DATABASE_ID としてメモします https://notion.so/your-account/ ?v=xxxx Create an integration からインテグレーションを作成し "Internal Integration Token" を
github.com
ソフトウェアエンジニアではない人向けにも「よくある質問」がWikiにまとめられてあり、親切です。
よくある質問 (ソフトウェアエンジニアでない人向け) · otoyo/easy-notion-blog Wiki
easy-notion-blogを導入してみた人の声
easy-notion-blogを触ってみながら感じた最大の感想は、「めちゃくちゃ勉強になる」ということです。おとよさん(＠otoyo0122)のソースコードが見れるというのがとてもありがたい。
Nextjsの学習をしていて、覚えたての技術で自社のサイトを作ったりもしてみましたが、わからないことだらけ。
見た目は問題なさそうに作れても、ソースコードは正直無理やりで人様に見せられるようなものではありませんでした笑
しかしeasy-notion-blogを自分のブログ用にカスマイズしようとおとよさんのコードを読んでいると開発のヒントがたくさん散りばめられていて感動でした。
ブログのシステムをeasy-notion-blogに変更 - 分解ちゃんねる
やっぱ日本語ってありがたいです。リポジトリの公開だけではなく、開発者の個人ブログにもカスタマイズに関する記事が投稿されている部分にすごく惹かれました。
easy-notion-blogのリポジトリへ行くと、丁寧に説明されたクイックスタートがあり感動。
こんなに充実したREADMEは珍しいなと思い「このリポジトリを信じて進めよう！」と心に決めました。
職業プログラマでない私がeasy-notion-blogをカスタムして楽しんでいるうちにContributorになれちゃった
2つ目の引用のhiromi（@mineral_30）さんは、職業プログラマではないもののeasy-notion-blog製のWebサイトをカスタマイズされながら運用されています。
DATA-WORLD-BLOG
This blog is written in Notion. If you want to start a blog in Notion, Try easy-notion-blog. easy-notion-blog is open source software created by Alpaca teacher(@otoyo0122). There is a URL to the Japanese explanation article, but you can use google translate.
data.herohoro.com
notion-blog-nextjsと比べeasy-notion-blogを使えば手早くブログ公開させることができる
「スターターキット」と言われるとおり、easy-notion-blogでは「よく使われる機能をパッケージングした、公開できるレベルのブログ」をデプロイ後すぐに公開させることができます。
この点、冒頭で紹介した”Notion-blog-nextjs”の方は、まっさらに近い状態であるため、実装したあとに自分で手を加えることが念頭に置かれています。
easy-notion-blogは手早くNotionブログを公開させたい！というニーズに応えるプロダクトであると言えそうです。
速さを求める人のための高速Notionブログ開発キット”astro-notion-blog” （2023/01/23追記）
2023/01/22に、easy-notion-blog開発者である”@おとよ”さんより、近年注目を集めているビルドツール（静的サイトビルダー）Astroを利用した”astro-notion-blog”がリリースされました。
速さを追い求める人のためのNotionブログ astro-notion-blogをリリースしました - アルパカログ
Astroはstateofjs2022のRendering Frameworksにおいても注目を集めている技術です。
脱WordPressのための代替ノーコードツール・ヘッドレスCMS でも言及していますが、CMS構築の際の有力な選択肢となります。
Astroの特筆すべきはページ表示の速さ。
ページ表示の速さastro-notion-blogは全てのページをビルド時に静的生成します。 ユーザーがアクセスしたときにはURLごとに対応するページを返すだけなのでページ表示は非常に高速です。 ときどき阿部寛さんのホームページが非常に表示が速いことで話題になりますが、その理由はすでにあるHTMLを返しているだけだからで、astro-notion-blogも同じ原理です。
速さを追い求める人のためのNotionブログ astro-notion-blogをリリースしました - アルパカログ
前述のeasy-notion-blogとこのastro-notion-blogの違いについて開発者さまブログで比較表つきでまとめられているので、興味のある方はチェックしてみましょう。
この記事の気になる箇所を読み返す:
- easy-notion-blogとは
- easy-notion-blog
- easy-notion-blogを利用すれば、15分でNotionブログを作ることができる…!?
- 職業プログラマでなくても（少し頑張れば）Notionブログのカスタマイズが可能
- easy-notion-blogを導入してみた人の声
- notion-blog-nextjsと比べeasy-notion-blogを使えば手早くブログ公開させることができる
- 速さを求める人のための高速Notionブログ開発キット”astro-notion-blog” （2023/01/23追記）
category: Notion
tag: Notion | CMS一般
