English | 日本語

Website | Documentation | Quick Start

Original | NotroTail

Using Notro Connect (Notion Public Integration), you can automatically set up IDs and tokens and deploy to platforms like Netlify in just a few steps. Give it a try! (And don't forget to star the repository!)

Deploy to Netlify or Vercel with Notro Connect

Create content and build a website with Notion’s user-friendly interface. No coding knowledge required.

Websites are output as static HTML by Astro, making them extremely fast and optimized for SEO. Whether for personal blogs or business purposes, it offers a great experience.

Supports Notion's Markdown Content API, so page content is fetched in a single API call rather than block by block. This significantly reduces the number of API calls at build time, resulting in fast builds.

Images used in Notion are delivered in WebP format, optimized for each device by Astro Assets.

Integrated with TailwindCSS, it allows you to easily create modern and responsive sites.

Generate websites from database templates or create from specific pages in a free format.

In addition to changing pre-defined CSS in tailwind.css, you can apply utilities directly in Notion, defining the appearance close to the content. HTML can also be written for advanced customization.

Check out NotroTail's style on Tailwind Play

Check out NotroTail's Collection style on Tailwind Play

For running locally or in an environment without Notro Connect.

Create an integration from here and record the Internal Integration Token as NOTION_TOKEN.

Choose an existing Notion page or duplicate a template. NotroTail works with any Notion page, but using a template provides rich features like headers and blogs.

Record the ID part of the URL as NOTION_ID.

https://www.notion.so/myworkspace/a8aec43384f447ed84390e8e42c2e089?v=...
                                 |---------- NOTION_ID ----------|

Share the page with your integration following the steps here.

NOTION_ID=<NOTION_ID>
NOTION_SECRET=<NOTION_TOKEN>

NotroTail needs Astro 5.0 and Node.js 22 or later

Install dependencies

```bash
npm install

Run the development server

npm run dev

Open http://localhost:4321 in your browser.

NotroTail uses Astro's static output mode — no SSR adapter required. Config files for each platform are included in the repository.

1. Click the button above, or import the repository at vercel.com
2. Add environment variables: NOTION_TOKEN and NOTION_DATASOURCE_ID
3. Click Deploy — vercel.json handles all build settings automatically

1. Click the button above, or import the repository at netlify.com
2. Add environment variables: NOTION_TOKEN and NOTION_DATASOURCE_ID
3. Click Deploy — netlify.toml handles all build settings automatically

1. Click the button above, or go to Workers & Pages → Create → Pages → Connect to Git in the Cloudflare dashboard
2. Select the repository and enter the following build settings:

   Build command:    npm run build
   Build output dir: apps/notro-tail/dist
   Root directory:   (leave empty)
   

3. Add environment variables: NOTION_TOKEN and NOTION_DATASOURCE_ID
4. Click Save and Deploy — wrangler.toml is also included for reference

After updating Notion content, trigger a manual redeploy from the platform dashboard to rebuild the static site.

This repository is an npm workspace monorepo containing three packages:

Dependency graph:

remark-nfm  ←  notro  ←  notro-tail

The Notion API truncates page content at approximately 20,000 blocks. There is no pagination API for this endpoint, so truncated content cannot be retrieved in full. notro logs a warning and builds with what is available.

Workaround: Split large Notion pages into smaller sub-pages.

Some Notion block types cannot be converted to Markdown by the API. These blocks are silently omitted from the response. notro logs the affected block IDs so you can identify and update the content.

For details, see the Notion API documentation and the notro package README.

Please create an issue for bug reports or feature requests. Any feedback is welcome in any language. Pull requests are also appreciated.

See the Github Projects roadmap

NotroTail was inspired by the following repositories:

• Next.js Notion Starter Kit
  • Used for creating a website based on Notion for the first time.
• Astro Notion Blog
  • Used for creating a blog based on Astro.
• AstroWind
  • Used as a design reference.