New Blog and Nobelium
date
Apr 28, 2021
slug
nobelium
status
Published
summary
Nobelium is a static blog build on top of Notion and Nextjs, deployed on Vercel.
tags
Coding
type
Post
A static blog build on top of Notion and Nextjs, deployed on Vercel.
Initially, I designed Nobelium because I couldn't find a blog theme I was happy with, and I just had to design my own website, so I decided going to write one myself. Then I saw SpencerWoo's article and found that I could use a third-party API / rendering tool to display Notion pages, so I decided to use Notion as a data source.
Notion has perhaps the best Headless CMS 😂, with Next.js Incremental Static Regeneration (ISG), where articles are updated in Notion and the site is synchronized with updates without redeployment.
Demo: nobelium.vercel.app
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
avatar.svg,favicon.svg, andfavicon.icoin/publicfolder 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
- That's it! Easy-peasy?
Wait for a sec, what is Page ID？
Technical details
- Generation: Next.js and Incremental Static Regeneration
- Page render: react-notion-x
- Style: Tailwind CSS and
@tailwindcss/jitcompiler
- Comments: Gitalk and more incoming
License
The MIT License.