Notion APIを使ったブログ構築(2) - Notion PageのMarkdownへの変換

2023.10.10

TECH

今回はNotionをCMSとして利用する方法について本ブログの作成において工夫した点を紹介します。

Next.js v.13の利用

今回はNext.jsのv.13を利用することにしました。

App Routerなど、最新のライブラリの利点を活かして楽に開発したいというのが狙いです。

metaタグやOGP画像の生成、サイトマップなど、SEO関連で欲しい機能が全部入りで大正解だったと思います。

NotionページからHTMLに変換する方法

では、本題です。

NotionのページからHTMLを得る方法を考えます。

APIを呼んで取得したページのデータを元にフロントエンドのフレームワークで処理するなら、公式のライブラリのnotion-sdk-jsを利用することになるかと思います。

Nextjs だと、この方法を使っているテンプレートがあり、notion-blog-nextjsやnotion-nextjs-blog が良く参照されています。

今回これらを基礎に作ることも考えましたが、以下のリンクのソースのように、NotionのひとつひとつのBlockの種類に対して、どのようにレンダリングするか定義し、自分好みのスタイルを当てていく作業は、とても面倒だと感じてしまいました。

綺麗なブログは作りたいですが、記事を書くことが本質であるため、できれば「楽に綺麗に」を目指したいと、もう少し考えてみました。

Markdownを経由するという選択肢

より簡単に、綺麗な記事表示を行えないかと考えていたところ見つけたのがZennで利用され公開されているライブラリzenn-markdown-htmlでした。このライブラリはMarkdownからZennの記事を生成するのに使われているもので、簡単に導入できてZennのような（というかそのものの）美しい記事の表示を行うことができます。

だったら、Notionから一度Markdown に変換して保存しておき、zenn-markdown-htmlでMarkdownからHTMLに変換すれば良いと考えました。

また、移行前のGatsby時代のブログでは、Markdownを書いてそれをGatsbyのプラグインで処理して静的サイトを生成していたため、Markdownで書いた移行前の記事もほとんどそのまま利用できそうというのも大きな理由になりました。

AWS Lambdaで Markdownを生成して、S3に保存する

変換はAWS LambdaにてNotionの対象データベースから変換対象ページを検索し、対象があれば生成を行うという処理を定期実行をしています。

Next.js側で Notion→Markdown→zenn-markdown-html の処理を全て行うこともできましたが、移行前のMarkdownとして存在している記事とNotionから変換する記事で処理が分かれるのも面倒でしたので、図のように一度Lambdaで処理して(移行前の記事も含めて)S3に保存という形を取りました。

Notion Page から Markdownへの変換

NotionからMarkdownへ変換

notion-to-md を使うことで、NotionのページからMarkdownに簡単に変換することができます。

https://github.com/souvikinator/notion-to-md

const n2m = new NotionToMarkdown({ notionClient: notion });

(async () => {
  const mdblocks = await n2m.pageToMarkdown("target_page_id");
  const mdString = n2m.toMarkdownString(mdblocks);
  console.log(mdString.parent);
})();

これで簡単に zenn-markdown-html に読み込むためのMarkdownを生成することができます。

ZennのMarkdown記法への対応

zenn-markdown-html にはZenn独自のMarkdown記法を読み込み埋め込み要素などを出力する機能があります。

こちらのドキュメントに記載されています。

幸いなことに、 notion-to-md にはNotionのブロックの種類ごとに、独自の変換処理を書く機能があります。

以下のように記載することで、ある程度Zennの記法にあったMarkdownに変換を行うことが可能です。

  // NotionのbookmarkからZennのカードへの変換
  n2m.setCustomTransformer("bookmark", (block) => {
    const { bookmark } = block as Bookmark;
    if (!bookmark.url) return "";

    return `
@[card](${bookmark.url})
`;
  })