/notion-next-blog

Deploy your own Notion-powered website in minutes with Next.js and Vercel.

Primary LanguageJavaScriptMIT LicenseMIT

Notion Next Blog

A notion-powered blog based on nobelium but with more feature.

Demo: https://notion-next-blog-olive.vercel.app

Overview

screenshot

screenshot_dark

screenshot_mobile

Features

Again, this repo based on nobelium but with Next.js 13 and React 18.

Thanks to Craig Hart's work!

  • Added features:
    • ๐Ÿ’ซ New style with Tailwind CSS 3.0
    • ๐Ÿ™ˆ Reasonable 404 Not Found page
    • ๐ŸŒ“ Friendly dark mode switcher
    • ๐Ÿ—บ๏ธ Dynamic generating sitemap
    • ...

Origin Features:

๐Ÿš€  Fast and responsive

  • Fast page render and responsive design
  • Fast static generation with efficient compiler

๐Ÿค–  Deploy instantly

  • Deploy on Vercel in minutes
  • Incremental regeneration and no need to redeploy after update the content in notion

๐Ÿš™  Fully functional

  • Comments, full width page, quick search and tag filter
  • RSS, analytics, web vital... and much more

๐ŸŽจ  Easy for customization

  • Rich config options, support English & Chinese interface
  • Built with Tailwind CSS, easy for customization

๐Ÿ•ธ  Pretty URLs and SEO friendly

Quick Start

  • Star this repo ๐Ÿ˜‰
  • Duplicate this Notion template, and share it to the public
  • Fork this project
  • Customize blog.config.js
  • (Optional) Replace favicon.svg, and favicon.ico in /public folder with your own
  • 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
    • NOTION_ACCESS_TOKEN (Optional, not recommended): If you decide not to share your database, you can use token to let Nobelium grab data from Notion database. You can find it in your browser cookies called token_v2
      • Keep in mind Notion token is only valid for 180 days, make sure to update manually in vercel dashboard, we probably switch to Official API to resolve this issue in the future. Also, images in Notion database will not properly rendered
  • That's it! Easy-peasy?

pageID

Todo

  • Refactor with Typescript
  • Improve about/profile page
  • Imporove image previews with lqip-modern