WebSite | Documentation | Quick Start
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 を利用せず、ローカル環境や任意の環境で動かす場合の方法です
Create an integration からインテグレーションを作成し Internal Integration Token を NOTION_TOKEN
として記録します
テンプレートを複製するか、既存のNotionページを選択します。NotroTailはどのNotionページでも機能しますが、テンプレートを利用するとヘッダーやブログ機能などのリッチな機能が利用できるようになります
URLのID部を NOTION_ID
として記録します
https://www.notion.so/myworkspace/a8aec43384f447ed84390e8e42c2e089?v=...
|---------- NOTION_ID ----------|
Share a database with your integration の手順でインテグレーションにページを共有します
NOTION_ID=<NOTION_ID>
NOTION_SECRET=<NOTION_TOKEN>
依存関係をインストールします
npm install
npm run dev
ブラウザで http://localhost:4321 を開きます
バグ報告や機能要望は Issue を作成してください。どんなことでも、どんな言語でも大丈夫です。お気軽にどうぞ。プルリクエストももちろん歓迎します。
MIT
NotroTail は下記のリポジトリから着想を得て開発されました
- Next.js Notion Starter Kit
- 初めてNotionをベースとしてWebSiteを作るのに利用させてもらいました
- Astro Notion Blog
- Astroベースのブログを作るのに利用させてもらいました
- AstroWind
- デザインの参考にさせてもらいました