search

mosugi / NotroTail

NotroTail is Notion, Astro, Tailwind CSS based CMS.
https://notrotail.mosugi.com
MIT License
12 stars 0 forks source link
astro astro-blog astro-integration blog cms notion notion-api notion-blog notion-cms ssg static-site-generator tailwind tailwindcss website-template

readme

English | 日本語

NotroTail.webp

Website | Documentation | Quick Start

[!NOTE] NotroTail is currently in alpha release. Please provide feedback to help us achieve a stable release.

Demo

Original | NotroTail

BeforeAfter.png

Quick Start

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

Features

🚀 Content-First

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

⚡️ High Performance

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.

📷 Image Optimization

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

🎨 Modern Styling

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

📚 Templates & Free Format

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

🔧 Advanced Customization

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

Installation Instructions

For running locally or in an environment without Notro Connect.

1. Create a Notion Internal Integration

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

2. Select or Create a Notion Page

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.

3. Identify the Notion ID

Record the ID part of the URL as NOTION_ID.

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

4. Configure Integration

Share the page with your integration following the steps here.

5. Set Environment Variables

NOTION_ID=<NOTION_ID>
NOTION_SECRET=<NOTION_TOKEN>

6. Launch

Install dependencies

npm install

Run the development server

npm run dev

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

Contributing

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

Roadmap

See the Github Projects roadmap

License

MIT

Special Thanks

NotroTail was inspired by the following repositories: