Protagram

Notionで投稿できるブロクの作り方紹介

notion ブログの作成方法の説明

公開日:2024年5月12日 更新日:2024年9月9日
programming
blognotion

0から作る

0から作る場合はnotion apiのドキュメントなどをみて作ることになると思う。

すでに作り方を紹介してくれているブログ記事も複数存在する。

udemyもあって私はそれを買って、それを見ながら作ったが結果買う必要はなかったと感じている。

https://www.udemy.com/course/notion-nextjs-blog-dev/?couponCode=KEEPLEARNING

感想としては

  • 講師の方も初めて作るので作っていく過程を見ている感じ
  • nextはapp routerではなくpage routerのままなのでちょっと古い。
  • ISR対応していた。
  • コードをもうちょっと最適化できたように感じた。とりあえず動くものを作った感がある。
  • notion blockには対応していないので、notionにあるvideoやbookmark, toggleなどには対応していない。

実際以下のyoutube動画がudemyと同じ講師が作ったもので、大まかな流れだけならこれで十分

このyoutubeでは足りない情報がいくつもあるので、詳細は別記事でまた紹介します。

すでに完成しているソースコードを使う

0から作るのがめんどくさい場合誰かのコードをそのまま使っても良さそう。

まんま使わなくても、参考になる点はいくつもある。

カスタマイズも好きなようにできる。

notion apiで作られたブログのリポジトリたち

astro製

ちなみにastroというのはjsのフレームワークらしいのだが、reactライクにかけてastroの中でvueとreact両方使うみたいなこともできるっぽい。

https://github.com/otoyo/astro-notion-blog

react製

notion-to-mdを使ってnotion apiで取得したblockをマークダウン形式に変換してそれをreact-markdownなどを使ってhtml形式に変更して表示する方法があるが、それだとbookmarkなど対応していないblockが存在する。それをzennが公開してくれている変換zenn-markdown-htmlを使ってzennのブログのようなデザインで変換して表示するように設計されたブログ

その他

notion blog系star順まとめ - https://github.com/topics/notion-blog

notion-blogのリポジトリをForkしてカスタムする

https://zenn.dev/herohoro/articles/46115924d3c530 https://zenn.dev/murasaki/scraps/1a6e63fdbc632d

すぐにnotionでブログ始められるサービス

プログラミング知識不要。

ただし月額課金が必要。

また細かいデザインのカスタマイズなどは不可。

Super

notionをblogとして書けるサービスの中では大手っぽい

条件があるけどfreeプランがある

https://super.so/

N2B

astro-notion-blogを作った人が作ったサービス

日本語が良い場合はこちら

月額500円

https://n2b.site/

wraptas

https://wraptas.com/