Jiyu's Protfolio & Blog

A static website build on top of Notion and Nextjs, Modified from Craig Hart's Nobelium.

Why not use Nobelium directly?

• 😭 Nobelium is using the old Notion API, which is deprecated and buggy
• 😁 New UI design
• 😁 using pnpm

Technical details

• Data Fetching: Notion Official API @notionhq/client
• Generation: Next.js and Incremental Static Regeneration
• Page render: react-notion-x
• Style: Tailwind CSS and @tailwindcss/jit compiler
• Comments: Gitalk, Cusdis and more

Support List

• page => page
• heading_1 => header
• heading_2 => sub_header
• heading_3 => sub_sub_header
• paragraph => text
• bulleted_list_item => bulleted_list
• numbered_list_item => numbered_list
• toggle => toggle
• code => code
• bookmark => bookmark
• image => image
• callout => callout
• table => table
• table_row => table_row
• table_row => table_row
• column_list
• column
• quote
• divider
• table_of_contents
• child_page
• child_database
• link_to_page
• unsupported: other unsupported blocks...

Highlights ✨

🚀  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_API_KEY (Required): The API key of your Notion account
  • NOTION_DATABASE_ID (Required): The ID of the Notion database you previously shared to the web, usually has 32 digits after your workspace address
• That's it! Easy-peasy?

Special Thanks

• 2021-2024, Craig Hart for the original Nobelium
• 2024-present, Jiyu Shao for the maintenance and updates

License

The MIT License.