はてなブログからNotion Blogに移転した理由と方法

ブログをはてなブログから Notion Blog に移転しました。

私がブログを書く目的のひとつは自分用の備忘録なのですが、「そういえばこれ、前に書いたな」と思ってブログを探す際に、どうしても重いと感じてしまったのが理由でした。

高速化のためにできることを調べましたが、下記サイトに書かれている通り、ユーザーにできることはほとんどないようでした。

• はてなブログを自分で出来る範疇で高速化してみる

Webサイトは速ければ速いほど良いです。そういうわけで、Notion をデータベースにしつつ爆速なことで今年話題になった Notion Blog へ移行することにしました。

せっかくなので、このエントリでは Notion Blog についてと、Notion Blog を始めるにあたって参考になるサイトを紹介します。

Notion Blog は、Next.js を開発している ZEIT社（≠Notion）が提供するサービスです。Notion Blog は下記の3つから成り立っています。

• 記事データベースとして Notion を用いる
• サイトのソースコードは自由にカスタマイズ可能なオープンソース(MITライセンス)
• GitHub へのプッシュをトリガーにしたビルド&デプロイとCDN(Vercel というサービス)

下記のサイトが詳しいので気になる方はご覧ください。

• NotionがヘッドレスCMSになる！ZEIT製のNext.jsベースのテンプレートはお手軽にブログ・メディアを始められるツールになりそう

良いことづくめのように見えますが、当然不足している点もあります。

JSONにシリアライズされたNotionの記事データから自前でDOMを作っているので、Notionで書いたとおりには表示されない

• Notion Blogは銀の弾丸ではないがブログのBoilerplateとしては便利

上記サイトに書かれているように、Notion のデータを元にそれらしいスタイルになるように HTML を構築しているだけなので、自分でカスタマイズすることが必須です（例えば画像のキャプションやテーブル表示に対応していません）。

なので、一般的な無料ブログと思って始めるとかなりの不足を感じてしまうでしょう。

一方、Notion で記事が書ける、ソースコードベースでフルカスタマイズ可能、自動デプロイのための CI/CD と CDN 付きサービスと言えば、エンジニアの人にはそのすごさがわかっていただけるでしょう。

しかも、趣味用途では無料です！

Notion Blog を手っ取り早く始めるには Notion Blog 始めたい人に向けてスタートキットを作ったので紹介する を見ていただければ、ものの15分ほどでこのブログと同じような Notion Blog が開設できます。

Notion Blog について詳しく知りたい人は Notion Blogの始め方から最新情報までを詳しく解説する をご覧ください。

独自ドメインの割り当ても簡単です。基本的には下記のサイトを見つつ、ネームサーバーだけは更新されているのでVercelのページを参考にしましょう。

• Notion Blog に独自ドメインを当てる（Vercel (旧 Zeit Now) + お名前.com）【Notion Blog 徹底解説 #2】
• Step 4: Configuring the Domain

Google Analytics の導入も Vercel の公式サンプルがあるので簡単です。

• Example app with analytics

Google Analytics を導入した私のコミットも置いておくので、よかったら参考にしてみてください。

開発環境で動かないようにドメイン名でフィルタしている箇所があるので、ご自身のドメインに置き換えてくださいね。

const handleRouteChange = url => {
  if (location.host === 'alpacat.com') {
    gtag.pageview(url)
  }
}

• https://github.com/otoyo/notion-blog/commit/daa842205a98ff5e612b30caf581ccd9d66942ed

Notion Blog のいろいろなカスタマイズもこのブログで紹介しているのでぜひ参考にしてください。

• Notion Blog が含まれる記事一覧

以上です。

このエントリでは Notion Blog について紹介し、Notion Blog を始めるにあたって参考になるサイトを紹介しました。