アルパカログ

📅  2020-12-28

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


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

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

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

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

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

Notion Blogとは?

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

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

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

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

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

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

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

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

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

Notion Blogを始めるにあたって参考にしたサイト

Notion Blogを開設するにあたっては、下記サイトを見ればほぼ完結します。10分ほどでデフォルトのNotion Blogが開設できます。

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

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

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

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

Notion Blogの他のいろんなカスタマイズについても @___35d さんのブログで紹介されているので是非参考にしてみてください。私も大変参考にさせていただきました(ありがとうございます)。

このブログでも今後Notion Blogのカスタマイズについて書いていきますので、よかったら参考にしてみてくださいね。さっそく下記のような移行ツールも作ってたりします。

以上です。このエントリではNotion Blogについてと、Notion Blogを始める際に参考にしたサイトを紹介しました。