Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 560 Commits
.github		.github
.vscode		.vscode
assets/i18n		assets/i18n
components		components
layouts		layouts
lib		lib
pages		pages
patches		patches
public		public
styles		styles
.editorconfig		.editorconfig
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.npmrc		.npmrc
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
Dockerfile		Dockerfile
LICENSE		LICENSE
Nobelium-Logo.svg		Nobelium-Logo.svg
README.md		README.md
blog.config.js		blog.config.js
consts.js		consts.js
desktop.png		desktop.png
jsconfig.json		jsconfig.json
next-sitemap.config.js		next-sitemap.config.js
next.config.js		next.config.js
package.json		package.json
pageid.png		pageid.png
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
vercel.json		vercel.json

Repository files navigation

Nobelium

A static blog build on top of Notion and Nextjs, deployed onVercel.

Demo:https://nobelium.vercel.app/

Screenshot

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 😉
Duplicatethis Notion template, and share it to the public
Fork this project
Customizeblog.config.js
(Optional) Replacefavicon.svg, andfavicon.ico in/public folder with your own
Deploy onVercel, 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 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?

Wait for a sec, what is Page ID？

Play With Docker

Unofficial, thanks to@Vaayne's work!

Build Docker image yourself

# set envexport NOTION_PAGE_ID=xxx # your NOTION_PAGE_IDexport IMAGE=nobelium:latest# build with dockerdocker build -t ${IMAGE} --build-arg NOTION_PAGE_ID .# run with dockerdocker run -d --name nobelium -p 3000:3000 -e NOTION_PAGE_ID=${NOTION_PAGE_ID} nobelium:latest

Use default docker image

# pull imagedocker pull ghcr.io/craigary/nobelium:main# run with dockerdocker run -d --name nobelium -p 3000:3000 -e NOTION_PAGE_ID=${NOTION_PAGE_ID} ghcr.io/craigary/nobelium:main

Roadmap

Check out our roadmaphere

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, Cusdis and more

FAQ

How can I change my avatar?

Nobelium fetches avatars fromGravatar. You need to set your avatar there withthe 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.