コンテンツへスキップ
NotroTail

notro-tail セットアップガイド

Notion + Astro で静的サイトを立ち上げるためのステップバイステップガイド。環境変数の設定からデプロイまでを解説します。

このガイドでは、notro-tail を使って Notion を CMS とした静的サイトを構築する手順を解説します。

前提条件

  • Node.js 22 以上
  • Notion アカウント（Internal Integration Token が必要）
  • Astro の基礎知識

1. リポジトリのセットアップ

まずリポジトリをクローンして依存関係をインストールします。

git clone https://github.com/mosugi/notro-tail.git
cd notro-tail
npm install

2. Notion Integration の作成

  1. Notion Integrations ページ を開く
  2. 「新しいインテグレーション」をクリック
  3. 名前を入力して「送信」→ Internal Integration Token をコピー
  4. Notion データベースを開き、右上「...」→「コネクト」から作成したインテグレーションを追加

3. 環境変数の設定

プロジェクトルートに .env ファイルを作成します。

NOTION_TOKEN=ntn_xxxxxxxxxxxxxxxxxxxx
NOTION_DATASOURCE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

NOTION_DATASOURCE_ID は Notion データベースの URL から取得できます（notion.so/ に続く32文字の ID）。

4. 開発サーバーの起動

npm run dev

ブラウザで http://localhost:4321 を開いて動作を確認します。

5. Notion データベースのスキーマ

データベースには以下のプロパティが必要です。

プロパティ名型用途
Nameタイトル記事タイトル
SlugリッチテキストURL スラッグ（英数字・ハイフン）
Descriptionリッチテキスト記事の概要
Publicチェックボックス公開フラグ
Tagsマルチセレクトタグ
Date日付公開日

次のステップ