Notionic

Notionic is a static blog that updates in real time, synchronizing changes to Notion pages without rebuilding the deployment.

Demo

• Notionic: https://notionic.vercel.app
• My Blog: https://zuolan.me

Features

• Incremental static regeneration
• Outline
• Theme switch
• Multi-language
• Native style comments
• Loading and transition animation
• Block page support
• SEO and Open Graph optimization
• Newsletter support
• Contact Form
• Telegram bot integration

Quick Start

• Duplicate Notionic template, and share it to the public
• Fork this project
• Customize blog.config.js file
• (Optional) Replace favicon.svg/png/ico in public folder with your own
• Modify lib/lang.js with your self introduction
• Deploy on Vercel, Netlify, or Cloudflare Pages, set following environment variables：
  • NOTION_PAGE_ID (Required): The ID of the Notion page you previously shared to the web, usually has 32 digits after your workspace address
  • eg: https://your-username.notion.site/<NOTION_PAGE_ID>?v=<view_id>
  • NOTION_SPACES_ID (Optional): Your Notion workspace ID
  • NOTION_ACCESS_TOKEN (Optional): Token for private Notion pages
  • TELEGRAM_TOKEN (Optional): Telegram bot token for share button
  • DATABASE_URL (Optional): PostgreSQL URL for Fuma Comment system (only needed if you use comments)
  • GITHUB_ID / GITHUB_SECRET / NEXTAUTH_SECRET (Optional): GitHub OAuth for comment login (only needed if you use comments)

Netlify Deployment

This project includes a netlify.toml configuration file. To deploy to Netlify:

1. Push your code to GitHub
2. Sign up at Netlify and click "Add new site" → "Import an existing project"
3. Select your GitHub repository
4. Netlify will auto-detect the netlify.toml configuration
5. Set the required environment variables in Netlify Dashboard → Site settings → Environment variables
6. Click "Deploy site"

Comments are optional. If DATABASE_URL is unset, the site still builds and deploys; the Fuma comment widget is hidden. When using comments, DATABASE_URL must point to a PostgreSQL instance Netlify can reach at runtime.

More details about Notionic deployment:

• English
• 中文

Development

# Init
pnpm install
# Develop
./dev.sh
# Build & Serve
pnpm build
pnpm start

Reference & License

• Notion-X
• Nobelium
• NotionNext

The MIT License.