- Published on
ブログサイトを Notion-Blog から Next.js + MDX に移行する
- Authors
- Name
- Satoshi Oikawa
- @oikwsat
2020 年は Notion-Blog + ZEIT Vercel で使ってブログを運用していたのですが，いくつか致命的な問題があったり，最新技術をキャッチアップしたいといった理由で，2021 年新たにブログを構築しました。
旧構成
- Notion で記事を書く
- Notion-Blog (Next.js + Notion) で SSG
- Vercel にホストする
というブログ運用をしていました。
Notion-Blog を使ったブログサイト構築は過去記事 Notion でブログを始めよう 参照。
Notion-Blog の問題
Notion-Blog を採用した最大のポイントが，一度構築すれば「Notion のみでブログ運用できる」だったのですが，いざ運用してみると致命的な問題がいくつか見つかりました。
1. 数週間で Cookie の有効期限が切れ，記事が一切表示されなくなる
これが一番致命的で，記事が全部表示されなくなったときは絶望しました…。
慌てて原因を調べて，Notion-ID を再設定することで難を脱したのですが，今後も ID の有効期限を気にしながら，サイトを運用していく気にはなれませんでした。
2. 書いた記事の表示が，Notion と Notion-Blog で異なる
Notion-Blog では，Notion から Markdown を取得し，HTML を生成するのですが，すべての Notion 記法に対応できているわけではないのです。
例えばブックマーク機能を使ったリンク埋め込みやツイート埋め込み，テーブル機能には対応していません。
これにより「Notion で表示されている内容が，ブログでは違う見え方になる」ので， Notion だけでブログを運用することはできないことがわかり，「Notion で記事を書く意味とは…」に至りました。
- Notion-Blog での見え方を確認するために，ローカルでビルドするかデプロイして，ブラウザで確認する必要がある
- Notion で書いてうまく表示されない場合は，「Notion-Blog 向けに記事を修正する」という不毛な作業が発生する
蛇足
Notion-Blog をカスタマイズして乗り切ろうと思った時期もあったのですが，問題 1 や他の問題もいくつかあり，最終的には諦めることにしました。
- 記事が多くなってくると，Notion のテーブルで管理しづらい
- Notion に 公開機能があるので，そっち使えばいいんじゃ
- Notion-Blog はほとんどメンテされていない
今回の作り直すポイント・動機
昨年は仕事でコードに触れる機会がより減ってしまったので，コードに触れる機会を増やす，最新技術のキャッチアップ，モダンな技術を使って高速なブログサイトを作るをゴールと考えました。
新しく採用したアーキテクチャ
- Next.js
- MDX
- Vercel
改めて 2021 年ブログ作るならどんな技術？と調べたところ，Notion-Blog が採用している技術がモダンだったため，コンテンツ部分のみ Notion から乗り換えることを考えました。
Markdown で書きたいとは思っていたところ，Mardown に JSX を埋め込むことができるという，Notion-Blog のときに苦しんだコンテンツ拡張が楽そうな MDX を採用しました。
また，独自ドメイン & サーバの運用はやりたくない ということで，引き続き Vercel を使います。
Next.js でゼロからサイトを構築しようとも思ったのですが，できあがっている良さそうなサイト Next.js + MDX でブログを書いています - HelloRusk Official Website を見つけたので， 紹介されていた unix/unix.bio を使ってサイトを構築しました。
ただし，unix.bio は中国語と英語にしか対応していないため，日本語向けに少しだけ変更を加えました。
- lib/components/posts/post-item.jsx
- return new Date(date).toLocaleString('zh-cn', options).replace('日', '日, ')
+ return new Date(date).toLocaleString('ja-jp', options).replace('日', '日 ')
- lib/components/title.jsx
- const locale = Configs.isCN() ? 'zh-cn' : 'en-us'
+ const locale = Configs.isCN() ? 'zh-cn' : 'ja-jp'
詳細は コミット から確認できます。
記事の移行は Notion のエクスポート機能で Markdown でエクスポートし，mdx に書き換えました。
これでリニューアルしたサイトが oikawa.dev で，Lighthouse のスコアも貼っておきます。
