ブログをNotion+Vercelに移した

By: Tomohiro Imaizumi
Posted: March 23, 2021

最近流行りのNotionは外部向けのブログにもできるらしいということで、お試しで作ってみたらなかなか良い感じでした。

ということで自分もはてなブログからNotion+Vercelにブログを移しました。

普段からよく使っていて、極力メモやらクリップした情報はここにまとめて置きたいなと思っていたところだったのでちょうど都合がよく。

正直ベース最近は年に1回も書かないので、実質書くたびに変わっている気がしますが 😓

いわゆるJamstackフレームワークと呼ばれるやつで、昔流行ったJekyllとかHugoとかと同じような感じです。 これらはMarkdownから静的ページを生成していましたが、このnotion-blogはNotionから生成するというもの。

JSについてはjQueryの頃で知識が止まっていたが、今は型があるのとIDEの機能が充実しているおかげで、とりあえずプロジェクト上でコードジャンプしながら追うことができました。 デフォルトのテンプレートは著者の名前とかがハードコードされていたりテンプレが固定だったりするので、自分なりにカスタマイズする必要があります。この辺はまた別のポストで書くかもしれません。

各コンテンツの変換プレビュー

ひとまずここではnotion-blogを利用して生成した静的ページで各コンテンツがどんな感じで表示されるのかを見ていきます。

Notionページのリンクはこちら

Notionはいろんなコンテンツがよしなにまとまって表示されるので、これがnotion-blogを経由して静的ページ化した場合にどんな感じになるかプレビューしてみます。

自分と同じようにNotionへの移行を検討している方の参考になれば幸いです。

画像

An image from Notion

デフォルトだと画像にはシャドーが入るほか、若干枠と大きさがあってないので、CSSを変更するとかしたほうが良さそうです。

インライン数式

3x+1x\int{\frac{3}{\sqrt{x+1}-\sqrt{x}}}

数式も問題ないようです。

embed(iframe)

iframeの場合は大きさを自分で調整できるので余白を詰めてあげれば割ときれいに表示されます。

embed(PDF)

枠だけは出ていますが中身は出ませんね。

コードスニペット

let x: Int = 3
struct X: Y {
    let y: String 
    init(y: String) {
        self.y = y
    }
}

Notionのスニペットは言語別のシンタックスハイライトに対応していて、テーマは固定だがかなり見栄えが良いです。 ただしコードスニペットに入れられる注釈はページだと表示されないみたいですね。

引用

商売とは、感動を与えることである。 (松下幸之助)

区切り線

コールアウト

💡
これは名言ですね 😲

インラインテーブル

どうも表示が出ないですね 🙅‍♂️ <table> に変換はされないようです。

チェックリスト

こちらも表示が出ず。逆にこれを利用して公開前のTODOなどをメモしておくのにも良さそう ❓

カレンダー

Notionでは大きくカレンダーが表示されていますが、ページに書き出すと出ていないですね。

サブページ

こちらも表示されません。

Tweet

Google Maps

まとめ

正常に表示される

ちょっとズレはあるが表示される

全く表示されない