NotroTail
NotroTail is Notion, Astro, Tailwind CSS based CMS.
MIT License
[!NOTE] NotroTailは現在アルファリリースです。安定したリリースのために、フィードバックをお寄せください
デモ
クイックスタート
Notro Connect (Notion Public Integration) で、IDやTokenを自動的に設定し、数ステップでNetlifyなどにデプロイ可能です。 早速試してみましょう！（リポジトリに⭐️をつけるのも忘れずに！）
Notro ConnectでNetlifyやVercelに今すぐデプロイする
特徴
🚀 コンテンツファースト
Notionの使いやすいインターフェースでコンテンツを作成し、Webサイトを構築できます。コーディングの知識は不要です
⚡️ 高いパフォーマンス
WebサイトはAstroによって静的なHTMLとして出力されるため、非常に高速でSEOにも最適化されます。個人のブログにもビジネス目的でも快適な体験を提供します
📷 画像の最適化
Notionで利用している画像は、Astro Assetsによりデバイスごとに最適化されたWebP形式のファイルで配信されます
🎨 モダンなスタイリング
TailwindCSSが提供するユーティリティが組み込まれており、モダンでレスポンシブなサイトを簡単に構築できます
📚 テンプレート&フリーフォーマット
データベース形式のテンプレートからWebサイトを生成する方法のほか、特定のページからフリーフォーマットで作成することもできます
🔧 高度なカスタマイズ
tailwind.cssで定義済みのCSSを変更することに加えて、本来の使い方と同じ様にNotionでも直接ユーティリティを適用でき、コンテンツに近い箇所で見た目を定義できます。さらにHTMLも書けるため高度なカスタマイズが可能です
Tailwind PlayでNotroTailのスタイルを確認する
インストール方法
Notro Connect を利用せず、ローカル環境や任意の環境で動かす場合の方法です
1. Notion Internal Integrationを作成する
Create an integration からインテグレーションを作成し Internal Integration Token を NOTION_TOKEN として記録します
2. Notionページを選択または作成する
テンプレートを複製するか、既存のNotionページを選択します。NotroTailはどのNotionページでも機能しますが、テンプレートを利用するとヘッダーやブログ機能などのリッチな機能が利用できるようになります
3. NotionのIDを特定する
URLのID部を NOTION_ID として記録します
https://www.notion.so/myworkspace/a8aec43384f447ed84390e8e42c2e089?v=...
|---------- NOTION_ID ----------|
4. Integrationを設定
Share a database with your integration の手順でインテグレーションにページを共有します
5. 環境変数を指定
NOTION_ID=<NOTION_ID>
NOTION_SECRET=<NOTION_TOKEN>
6. 起動する
依存関係をインストールします
npm install
npm run dev
ブラウザで http://localhost:4321 を開きます
Contributing
バグ報告や機能要望は Issue を作成してください。どんなことでも、どんな言語でも大丈夫です。お気軽にどうぞ。プルリクエストももちろん歓迎します。
Roadmap
Licence
MIT
Special Thanks
NotroTail は下記のリポジトリから着想を得て開発されました
-
Next.js Notion Starter Kit
- 初めてNotionをベースとしてWebSiteを作るのに利用させてもらいました
-
Astro Notion Blog
- Astroベースのブログを作るのに利用させてもらいました
-
AstroWind
- デザインの参考にさせてもらいました