11
Github GitHub - craigary/nobelium: A static blog build on top of Notion and Next...
source link: https://github.com/craigary/nobelium
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Nobelium
A static blog build on top of Notion and Nextjs, deployed on Vercel.
[中文说明 | English]
Demo: https://nobelium.vercel.app/
ScreenshotHighlights
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
avatar.svg
,favicon.svg
, andfavicon.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 addressNOTION_ACCESS_TOKEN
(Optional): 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 calledtoken_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?
Roadmap
Check out our roadmap here
- Better SEO
- Dark mode
- Open Graph support
- Switch to react-notion-x
- Sitemap
Technical details
- Generation: Next.js and Incremental Static Regeneration
- Page render: react-notion-x
- Style: Tailwind CSS and
@tailwindcss/jit
compiler - Comments: Gitalk and more incoming
Special Thanks
Contributors
License
The MIT License.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK