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

💡

easy-notion-blog を使えば無料かつ15分ほどでブログを開設できます。日本語のマニュアルもありますよ。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以上です。

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