Notion × Astro × Honoで、Lighthouse 100点の爆速ブログ基盤を作った話【完全OSS】

はじめに

こんにちは、miya025です。

「最高の執筆体験（Notion）」と「最高の配信パフォーマンス（Edge）」を両立させたい。 そんな思いから、NotionをCMSとして利用し、AstroとCloudflareで配信するブログ基盤 を開発しました。

単なる静的サイト生成(SSG)ではなく、Hono (Edge Functions) を組み込んだハイブリッド構成にすることで、「リアルタイムプレビュー」 や 「動的OGP生成」 を実現しています。

今回、これをボイラープレートとして OSS（MITライセンス）で公開 しました。 この記事では、このアーキテクチャの技術的な裏側について解説します。

コンセプト：Astro Notion Edge

"Write in Notion, Deploy on Edge."

Notionのデータベースに行を追加するだけで、自動的に最適化されたWebページとして配信されます。 既存のNotion連携ツールとの最大の違いは、「Edge Runtimeを活用した動的機能」 を備えている点です。

主な特徴

  • Lighthouse オールグリーン (100点)
  • Notion API によるヘッドレスCMS化
  • リアルタイムプレビュー機能 (ドラフト記事の即時レンダリング)
  • OGP生成
  • サイト内全文検索

技術スタックとアーキテクチャ

Astroの静的生成能力と、Cloudflare Pages Functionsの動的処理能力を組み合わせた ハイブリッド構成 です。

  • Frontend: Astro v4 (Server Output)
  • Edge Runtime: Cloudflare Pages Functions
  • Backend Middleware: Hono
  • Database: Notion API
  • Styling: Tailwind CSS + shadcn/ui

こだわった技術的挑戦

NotionをCMSとして本格利用する際にぶつかる「3つの壁」を、アーキテクチャで解決しました。

1. SSGとSSRのハイブリッド・プレビュー

Jamstack（静的サイト）の課題は、記事を書いている最中に「実際の見た目」を確認できない点です。 これを解決するために、Hono をEdge上で動かしています。

  • 通常アクセス: ビルド済みの静的HTMLを返す（最速・APIコールなし）
  • プレビュー: /api/preview へのアクセスのみHonoがインターセプトし、Notion APIからDraft記事を取得してその場でSSRする。

これにより、静的サイトのパフォーマンスを維持したまま、動的なプレビュー機能 を実装しました。

2. 画像の永続化と最適化パイプライン

Notion APIから返される画像URL（AWS S3）には有効期限があり、そのままSSGで埋め込むと一定時間後にリンク切れを起こします。また、サイズも最適化されていません。

そこで、環境に応じた最適化パイプラインを構築しました。

  • ビルド時: astro:assets を活用し、画像をダウンロードしてWebP形式に変換・静的アセット化。
  • Edge時: Cloudflare Image Resizing API を活用し、CDNエッジでリサイズとキャッシュを行う。

パフォーマンス

Astroの「Islands Architecture」により、クライアントサイドのJavaScriptを最小限に抑えているため、LCP（最大視覚コンテンツの表示時間）は極めて高速です。

まとめ

「Notionで書きたいが、パフォーマンスや機能性も妥協したくない」 そんなエンジニアのために、Astro Notion Edge をOSS化しました。

環境構築は git clone して Notionのキーを設定するだけです。 ぜひリポジトリを覗いてみてください。Pull Requestもお待ちしています！

GitHubリポジトリ:https://github.com/miya025/astro-notion-edge

今後の展望

今後は、この基盤をベースに、検索精度の向上や、タグベースのレコメンド機能などを強化していく予定です。 少しでも「良いな」と思ったら、GitHubのスター⭐️を頂けると開発の励みになります！

Back to all posts