August 11, 2023

Notionic - A static blog that updates in real time with Next.js

Notionic

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

Notionic

Demo

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, 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/?v=

More details about Notionic deployment:

Development

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

Reference & License

The MIT License.