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

Overview

Nobelium

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

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 😉
  • Duplicate this Notion template, and share it to the public
  • Fork this project
  • Customize blog.config.js
  • (Optional) Replace favicon.svg, and favicon.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 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 called token_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!

# 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
  • Comments: Gitalk, Cusdis and more

Special Thanks

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

Contributors

Craig Hart
Craig Hart

🎫 🔧 🎨 🐛
yokinist
yokinist

🔧 🐛
Reynard
Reynard

🎨 🐛
Niin
Niin

🔧 🐛
Ruter
Ruter

🔧 🐛

License

The MIT License.

Issues
  • Deployment Error On Vercel

    Deployment Error On Vercel

    Here are logsimage

    deployment 
    opened by yizhen666 8
  • add build with docker

    add build with docker

    opened by Vaayne 8
  • NotionAPI collectionQuery error Response code 400 (Bad Request)

    NotionAPI collectionQuery error Response code 400 (Bad Request)

    When i deploy the blog ,i got the wrong info

    18:44:27.890 | NotionAPI collectionQuery error Response code 400 (Bad Request)
    -- | --
    18:44:27.892 | > Build error occurred
    18:44:27.894 | TypeError: Cannot convert undefined or null to object
    18:44:27.895 | at Function.values (<anonymous>)
    18:44:27.895 | at getAllPageIds (/vercel/path0/.next/server/chunks/272.js:37:12)
    18:44:27.896 | at getAllPosts (/vercel/path0/.next/server/chunks/272.js:186:21)
    18:44:27.896 | at processTicksAndRejections (internal/process/task_queues.js:95:5)
    18:44:27.896 | at async getStaticPaths (/vercel/path0/.next/server/pages/tag/[tag].js:54:17)
    18:44:27.896 | at async buildStaticPaths (/vercel/path0/node_modules/next/dist/build/utils.js:472:31)
    18:44:27.897 | at async /vercel/path0/node_modules/next/dist/build/utils.js:615:119
    18:44:27.897 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:60:20) {
    18:44:27.897 | type: 'TypeError'
    18:44:27.897 | }
    18:44:27.954 | error Command failed with exit code 1.
    18:44:27.955 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    18:44:27.985 | Error: Command "yarn run build" exited with 1
    

    I think I have set the env correctly,it still not work image

    deployment 
    opened by p0wer0ff 6
  • Trobles w/ cacheable-lookup: Module not found: Can't resolve 'dns'

    Trobles w/ cacheable-lookup: Module not found: Can't resolve 'dns'

    Describe the bug doesn't build

    To Reproduce

    1. I run yarn && yarn dev
    2. when build complete,
    3. browser shows: 'Module not found: Can't resolve 'dns''. Also I see many similar errors in console

    Expected behavior I must see my notion mirror site

    Screenshots Screenshot 2021-08-21 at 20 15 52

    Platform:

    • OS: macOS
    • Browser N/A, chrome, any other will so
    • Version N/A

    Additional context repo: https://github.com/a-x-/nobelium

    bug wontfix 
    opened by a-x- 6
  • Error: Command

    Error: Command "next build" exited with 1

    Vercel Deployment error: Error: Command "next build" exited with 1

    deployment 
    opened by ankylau 6
  • Attempt to add FR as French; need help to understand my mistake before PR

    Attempt to add FR as French; need help to understand my mistake before PR

    I basically replicated what @GermanHeim did with Spanish but when I generate my website, only the next.js part is translated, and what is in lang.js js ignored. So before doing my PR I would like to make it work ;) image

      fr: {
        NAV: {
          INDEX: 'Blog',
          RSS: 'RSS',
          SEARCH: 'Chercher',
          ABOUT: 'À propos'
        },
        PAGINATION: {
          PREV: 'Précédent',
          NEXT: 'Suivant'
        },
        POST: {
          BACK: 'Retour',
          TOP: 'Haut'
        }
      }
    

    ...

        case 'fr':
        case 'fr-CA':
        case 'fr-FR':
          return lang.fr
    
    enhancement wontfix 
    opened by JOduMonT 5
  • fix(a11y): tag link & header logo link

    fix(a11y): tag link & header logo link

    Thank you for develop awesome blog system 💯 I sent PR for the following reasons:

    1. The tag link was implemented with click event on non-interactive content. -> fixed link to use next/router for accessibility
    • (enter tab & on key press...)
    • FYI: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-element-interactions.md
    1. The style of selected tag was not applied on search page.

    2. (New) Header logo was not wrapped with a tag image

    |Before|After| |---|---| |https://nobelium.vercel.app/tag/Sociology|https://nobelium-ge7u39giu-yokinist.vercel.app/tag/Sociology| |Image from Gyazo|Image from Gyazo| |https://nobelium.vercel.app/what-make-vs-code|https://nobelium-ge7u39giu-yokinist.vercel.app/what-make-vs-code| Image from Gyazo|Image from Gyazo| |Image from Gyazo|Image from Gyazo|

    opened by yokinist 5
  • vercel error

    vercel error

    08:38:24 | > Build error occurred -- | -- 08:38:24 | Error [HTTPError]: Response code 400 (Bad Request) 08:38:24 | at Request. (/vercel/path0/node_modules/got/dist/source/as-promise/index.js:117:42) 08:38:24 | at processTicksAndRejections (internal/process/task_queues.js:93:5) {

    opened by oozry12 5
  • Errors about TOC

    Errors about TOC

    Describe the bug The TOC will not be displayed if it is placed on the left side so that it is in the left and right columns with the text.

    To Reproduce Placing the TOC and the title left and right will produce.

    Expected behavior TOC can display correctly.

    Screenshots image image

    Platform:

    • OS: Windows
    • Browser: Edge
    • Version: 90.0.818.51

    Additional context N/A

    bug wontfix 
    opened by jixianyan 4
  • The Less code block do not display

    The Less code block do not display

    Describe the bug

    The Less code block do not display, If I turn the less or css block to text or qoute, It can be render correctly. images follow: image The original notion page: https://www.notion.so/Vue-Js-Loading-40d9bae0cef64fb2bf1a7280b10141e1 The web page with error: https://blog.432000.xyz/vue-loading-mask

    To Reproduce

    copy a less code to notion, turn it to code block, select code type as 'less'

    Expected behavior A clear and concise description of what you expected to happen.

    Screenshots image

    Platform:

    • OS: [Windows NT 10.0; Win64; x64]
    • Browser [ Chrome/90.0.4430.93 ]
    • Version [Latest version]

    Additional context Add any other context about the problem here.

    bug question 
    opened by lijiext 4
  • Notion Table view rendering failed:using empty component

    Notion Table view rendering failed:using empty component

    Describe the bug Notion Table view rendering failed

    To Reproduce Steps to reproduce the behavior: Open https://jiangzilong.vercel.app/soft Erro Info:713-e0006cc78f34fa8e7fcd.js:1 Error using empty component: collection You should override this in NotionRenderer.components image

    Expected behavior Display the table on this page normally image

    Platform:

    • OS:macOS
    • Browser:chrome
    bug 
    opened by draJiang 0
  • NotionAPI collectionQuery error Response code 400 (Bad Request)

    NotionAPI collectionQuery error Response code 400 (Bad Request)

    Describe the bug When I run it, I get the error

    To Reproduce

    1. I forked a repo, specified a config and cloned a notion table.
    2. I added NOTION_PAGE_ID=bd12382834294cf681b356c3c7fd5fdc into .env.local
    3. I ran yarn && next dev

    Expected behavior Get local copy of you demo

    Screenshots

    Platform:

    • OS: macOS
    • Browser chrome
    • Version latest

    Additional context https://www.notion.so/ru-tesla/bd12382834294cf681b356c3c7fd5fdc

    https://github.com/a-x-/nobelium

    bug wontfix 
    opened by a-x- 5
  • Fix: NotionAPI collectionQuery error Response code 400 (Bad Request)

    Fix: NotionAPI collectionQuery error Response code 400 (Bad Request)

    Hi, I'm hisasann.

    Deployment failed: NotionAPI collectionQuery error Response code 400 (Bad Request) · Issue #176 · craigary/nobelium

    NotionAPI was breaking changes to API. Because of that, it seems that the API of the blog is not working.

    NotionAPI collectionQuery error Response code 400 (Bad Request)
    > Build error occurred
    TypeError: Cannot convert undefined or null to object
        at Function.values (<anonymous>)
        at getAllPageIds (/vercel/path0/.next/server/chunks/272.js:37:12)
        at getAllPosts (/vercel/path0/.next/server/chunks/272.js:186:21)
        at processTicksAndRejections (internal/process/task_queues.js:95:5)
        at async getStaticPaths (/vercel/path0/.next/server/pages/tag/[tag].js:54:17)
        at async buildStaticPaths (/vercel/path0/node_modules/next/dist/build/utils.js:472:31)
        at async /vercel/path0/node_modules/next/dist/build/utils.js:615:119
        at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:60:20) {
      type: 'TypeError'
    }
    

    Seems to fix the problem for me. Like this.

    "notion-client": "^4.9.3"
    

    ✌🏻

    opened by hisasann 1
Owner
Craig Hart
I write really bad code, sorry 🥺
Craig Hart
Virtual Event Starter Kit Built With Next.js

Virtual Event Starter Kit Demo: https://demo.vercel.events This virtual event starter kit was used to run Next.js Conf 2020, which had almost 40,000 l

Ismail Ghallou 5 Oct 15, 2021
A headless starter for WordPress powered by Next.js.

A headless starter for WordPress powered by Next.js.

WebDevStudios 361 Oct 21, 2021
Bookmark manager on steroid built with React / NextJs / Apollo Tools / Prisma 2 — styled with TailwindCSS 🌱🎺

Tottem is an open source experimentation, it aims combining personal productivity tool approach with (slow) social media capabilities to make users em

Vincent Poulain 745 Oct 20, 2021
🐄 Easy way to generate open-graph images dynamically using Next.js API Routes. Suitable for serverless environment.

Next.js API OG Image · Simple library with purpose of providing easy way to dynamically generate open-graph images using Next.js API routes. If you're

Igor Klepacki 23 Oct 15, 2021
Rauchg Blog - Blog built by a Next.js core maintainer.

blog This is the blog that powers rauchg.com, built on next.js and deployed to the cloud via Vercel. How to run First, install Vercel CLI. Development

Guillermo Rauch 724 Oct 19, 2021
A Quine of Next.js app

This is a Next.js project bootstrapped with create-next-app.

Yusuke Endoh 13 Jul 10, 2021
Projeto criado na trilha de React JS no Ignite da Rocketseat, utilizando Next e Chakra UI.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Moisés Neto 1 Oct 18, 2021
Next.JS App to convert currencies!

Next.JS App to convert currencies!

Carl Edward 1 Oct 3, 2021
About A basic demo example for integrating between Appwrite & Next JS 💙

About A basic demo example for integrating between Appwrite & Next JS ??

Sooraj S 14 Oct 12, 2021
Example Next.js app to upload photos to an S3 bucket.

Example Next.js app to upload photos to an S3 bucket.

Lee Robinson 290 Oct 8, 2021
A simple Netflix Clone made using Next.js ⚡

A simple Netflix Clone made using Next.js ⚡

Ayushi Gupta 142 Oct 17, 2021
GPT-3 Powered Serverless App using NextJS & React

A Demo GPT-3 Powered Web App, created using NextJS & ReactJS QuickStart Clone this repo update the OpenAI key in .env.local file: Sample .env.local fi

Harish Garg 110 Oct 16, 2021
Commenting System built with NextJS and Sanity

Commenting System built with NextJS and Sanity

Alessio Franceschi 11 Sep 21, 2021
WunderGraph Demo joining Apollo Federation (with Subscriptions), REST and GraphQL APIs and consuming it from a NextJS application

This Repository demonstrates how to combine 7 APIs (4 Apollo Federation SubGraphs, 1 REST, 1 standalone GraphQL, 1 Mock) into one unified GraphQL API which is then securely exposed as a JSON API to a NextJS Frontend.

WunderGraph 15 Oct 10, 2021
A working example of a decoupled implementation using Next.js and GraphQL with the eZ Platform CMS

Decoupled CMS example with GraphQL and Next.js This repository contains the source code for the sample application from the talk "Easy decoupled siteb

Jani Tarvainen 30 Aug 22, 2021
This is the repo for the Learn "Shopify + Next.js + Tailwind CSS" course

This is the repo for the Learn "Shopify + Next.js + Tailwind CSS" course

null 63 Oct 12, 2021
A simple nextjs application that showcases Game of Thrones Characters

NextThrone This sample app is built with Next.js. Clone the repo and continue with the installation Installation $ yarn Usage Replace _AUTH0_CLIENT_I

Auth0 Blog Samples 27 Apr 28, 2021
Admin panel built with NextJS(Typescript), Material UI, Apollo Client & GraphQL.

Admin panel built with NextJS(Typescript), Material UI, Apollo Client & GraphQL. In the backend, Prisma 2 with Nexus and Mysql is used.

Vikas Dwivedi 86 Oct 16, 2021
ecommerce store built with next js

ecommerce store Project Overview ?? You can publish here your products to sell them online. Tech/framework used ?? Tech Description Typescript Javascr

null 6 Sep 27, 2021