AstroとNotionでブログを構築する

Astro を学習するにあたって、何かしら Web サイト作るのが近道だと考えブログを構築することにした。
最近は思いついたことを Scrapbox に吐き出してまとまった文章は Notion に書くというスタイルで情報を整理している。
なので Notion をブログの CMS とするのが自分のスタイルに適してそうだと思い Astro と Notion によるブログを実現することにした。

この記事では概要を説明したのちに、Notion ページが正しく Markdown に変換できているかの検証を行なっている。

概要

今回のブログ構築で用いた主要ツール/サービスは 3 つある。

記事作成から公開までのワークフローは以下の通り。

  1. Notion でブログ記事を書く
  2. Astro プロジェクトで変換スクリプトを実行しブログ記事を Markdown に変換する
  3. ローカルもしくは Cloudflare Pages Preview deployments で表示確認する
  4. 問題なければ Astro プロジェクトに Markdown をマージする、誤りがあれば最初に戻る

Notion → Astro

Notion ページを Markdown に変換するために NotionAPI を使うことにしたので、ドキュメントに従いブログデータベースにインテグレーションを接続した。

Start building with the Notion API
Connect Notion pages and databases to the tools you use every day, creating powerful workflows.
developers.notion.com

Notion ページの変更イベントをトリガーにして変換スクリプトを実行したかったが、変更イベントを検知する方法が見つからなかったので cron により変換スクリプトを定期実行することにした。

Astro → Cloudflare

将来的に SSR を有効にする可能性もあるため、SSR 可能なデプロイ先として Cloudflare を選択した。
Cloudflare Pages に Astro プロジェクトのリポジトリを接続しただけで特別な設定は加えていない。

表示確認

以降は Notion ページが Markdown に意図通り変換されているか確認するセクションである。

変換対応済みブロック

Heading1

Headin2

Heading3

テーブル

column1column2
行 1_1行 1_2
Row2_1Row2_2

ToDo リスト

箇条書きリスト

番号付きリスト

  1. 番号付きリスト
  2. 番号付きリスト 2 行目
    1. ネストも可能
      1. ここまで深くしない

引用

引用テキスト
複数行またがりの引用

コードブロック

function main(text: string) {
  return `hello ${text}!!`;
}

main();

文字装飾

分割線

Web ブックマーク

GitHub: Let’s build from here
GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea...
github.com

コールアウト

💡

絵文字とテキストが表示される

変換未対応ブロック

これより下はまだ変換対応できていない。
変換対応が完了したら上に移動する。

トグルリスト
Unsupported type: toggle トグルリストの子要素のテキストが
トグルリストにより隠されること

空行が空いていても子要素なので隠される

画像

数式
Unsupported type: equation

動画
Unsupported type: video

graph TD
  Mermaid --> Diagram