Docs

NotroTail は Notion をコンテンツ管理システムとして使う Astro 静的サイトジェネレーターです。このドキュメントでは、セットアップから API リファレンスまでを解説します。

NotroTail とは

NotroTail は Notion の Public API（Markdown Content API）からコンテンツを取得し、 @mdx-js/mdx でコンパイルし、 Notion ブロックタイプを Astro コンポーネントにマッピングする npm ワークスペースモノレポです。 TailwindCSS 4 でスタイリングされた高速・SEO 最適化済みの静的サイトを出力します。

📦

remark-nfm

Notion Flavored Markdown 向け純粋 remark プラグイン。Astro 依存なしで独立して npm 公開可能。

🔧

notro

Astro Content Loader・MDX コンパイルパイプライン・Notion ブロックコンポーネント。

🌐

notro-tail

デプロイ可能な Astro 6 ウェブサイト（テンプレート・リファレンス実装）。

クイックスタート

GitHub で「Use this template」→ リポジトリ作成
または git clone https://github.com/mosugi/notro-tail
ルートで依存関係をインストール
```
npm install
```
apps/notro-tail/.env を作成して環境変数を設定
```
NOTION_TOKEN=secret_xxxx
NOTION_DATASOURCE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
```
詳細は Notion セットアップを参照してください。
開発サーバーを起動
```
npm run dev --workspace=notro-tail
```
http://localhost:4321 でプレビューできます。
Vercel / Netlify にデプロイ（詳細はデプロイガイドを参照）

必要な環境

Node.js 22 以上
npm 10 以上
Astro 6（npm でインストール済み）
Notion アカウント（インテグレーション作成のため）

次のステップ

🔑

Notion セットアップ

インテグレーション・データベース・環境変数の設定方法

🚀

デプロイガイド

Vercel・Netlify へのデプロイ手順

📖

API リファレンス

loader()・NotroContent の全 props

🎨

レンダリング検証

全 Notion ブロックタイプの実際のレンダリング例