A static blog build on top of Notion and Nextjs, deployed on Vercel.
Demo: https://nobelium.vercel.app/
🚀 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
- Star this repo 😉
- Duplicate this Notion template, and share it to the public
- Fork this project
- Customize
blog.config.js
- (Optional) Replace
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, 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 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?
Unofficial, thanks to @Vaayne's work!
# set env
export NOTION_PAGE_ID=xxx # your NOTION_PAGE_ID
export IMAGE=nobelium:latest
# build with docker
docker build -t ${IMAGE} --build-arg NOTION_PAGE_ID .
# run with docker
docker run -d --name nobelium -p 3000:3000 -e NOTION_PAGE_ID=${NOTION_PAGE_ID} nobelium:latest
# pull image
docker pull ghcr.io/craigary/nobelium:main
# run with docker
docker run -d --name nobelium -p 3000:3000 -e NOTION_PAGE_ID=${NOTION_PAGE_ID} ghcr.io/craigary/nobelium:main
Check out our roadmap here
- Better SEO
- Dark mode
- Open Graph support
- Switch to react-notion-x
- Sitemap
- ...
- Generation: Next.js and Incremental Static Regeneration
- Page render: react-notion-x
- Style: Tailwind CSS and
@tailwindcss/jit
compiler - Comments: Gitalk, Cusdis and more
How can I change my avatar?
Nobelium fetches avatars from Gravatar. You need to set your avatar there with the same email address that you defined inblog.config.js
.
My posts disappear after I set up grouping in Notion database!
Nobelium currently doesn’t support Notion database grouping. If you really want to manage your posts by groups, you can create views with filters instead.Notion CN Community |
SilentDepth |
Lee Robinson |
Spencer Woo |
Craig Hart 🎫 🔧 🎨 🐛 |
yokinist 🔧 🐛 |
Reynard 🎨 🐛 |
Niin 🔧 🐛 |
Ruter 🔧 🐛 |
The MIT License.
notion-blog's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.