Skip to content

A static blog build on top of Notion and Nextjs, deployed on Vercel.This repo is customized based on nobelium. 🛸 ⭐️✨

License

Notifications You must be signed in to change notification settings

yokinist/yokinist.me

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

yokinist.me

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

This repo is customized based on craigary/nobelium.

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

  • 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

  • The sitemap will be updated every your build

💚  Type Safety

  • The source code is written in TypeScript

Quick Start

  • Star this repo 😉

Duplicate this Notion template, and share it to the public

  • Fork this project
  • Customize blog.config.js
  • (Optional) You can customize tags in lib/tags.ts to match those in your Notion database.
  • (Optional) You can add animation to your profile by specifying the profile image block class in style/notion.css
How to check the block class?

  • (Optional) Replace favicon.svg, and favicon.ico in /public folder with your own
  • (Optional) You can set redirect custom link to /link page in blog.config.js
  • 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?

Getting started in developing

  • Once you have set the environment variables in the Vercel dashboard, run the following
    • vercel env pull (with Vercel CLI)
    • or cp .env.sample .env.local and insert YOUR_NOTION_PAGE_ID

Play With Docker

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

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

Special Thanks

Craig Hart
Craig Hart
Notion CN Community
Notion CN Community
yokinist
SilentDepth
Reynard
Lee Robinson
Niin
Spencer Woo

Contributors

License

The MIT License.

About

A static blog build on top of Notion and Nextjs, deployed on Vercel.This repo is customized based on nobelium. 🛸 ⭐️✨

Resources

License

Code of conduct

Stars

Watchers

Forks

Languages

  • TypeScript 80.4%
  • CSS 11.5%
  • JavaScript 6.9%
  • Dockerfile 1.2%