2020年は Notion-Blog + ZEIT Vercel で使ってブログを運用していたのですが,いくつか致命的な問題があったり,最新技術をキャッチアップしたいといった理由で,2021年新たにブログを構築しました。

旧構成

  1. Notion で記事を書く
  2. Notion-Blog (Next.js + Notion) でSSG
  3. 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をカスタマイズして乗り切ろうと思った時期もあったのですが,問題1や他の問題もいくつかあり,最終的には諦めることにしました。



今回の作り直すポイント・動機

昨年は仕事でコードに触れる機会がより減ってしまったので,コードに触れる機会を増やす,最新技術のキャッチアップ,モダンな技術を使って高速なブログサイトを作るをゴールと考えました。

新しく採用したアーキテクチャ

改めて2021年ブログ作るならどんな技術?と調べたところ,Notion-Blog が採用している技術がモダンだったため,コンテンツ部分のみ Notion から乗り換えることを考えました。
Markdown で書きたいとは思っていたところ,Mardown に JSX を埋め込むことができるという,Notion-Blogのときに苦しんだコンテンツ拡張が楽そうな MDX を採用しました。

また,独自ドメイン & サーバの運用はやりたくない ということで,引き続き Vercel を使います。

Next.js でゼロからサイトを構築しようとも思ったのですが,できあがっている良さそうなサイト Next.js + MDX でブログを書いています - HelloRusk Official Website を見つけたので,紹介されていた unix/unix.bio を使ってサイトを構築しました。

ただし,unix.bio は中国語と英語にしか対応していないため,日本語向けに少しだけ変更を加えました。

-  return new Date(date).toLocaleString('zh-cn', options).replace('日', '日,  ')
+  return new Date(date).toLocaleString('ja-jp', options).replace('日', '日  ')
-  const locale = Configs.isCN() ? 'zh-cn' : 'en-us'
+  const locale = Configs.isCN() ? 'zh-cn' : 'ja-jp'

詳細は コミット から確認できます。

記事の移行は Notion のエクスポート機能で Markdown でエクスポートし,mdx に書き換えました。

これでリニューアルしたサイトが oikawa.dev で,Lighthouseのスコアも貼っておきます。

oikawa.dev Lighthouse score

参考にした記事