Notion Blog Web UI Starter

A statically generated blog using Next.js, notion-sdk-js.

Live Demo

https://notion-blog-kit-demo.vercel.app

Screenshot

Magagin	Archive	Article

Support Blocks

https://notion-blog-kit-demo.vercel.app/supported-notion-blocks

Getting Started

View images and detailed descriptions in live demo

1. Star this repo⭐️
2. Create notion integrations secret token, Please check read only access and remember secret token.
3. Go to the page you want to share and connection to the name of the integration
4. Deploy with Vercel or Your server (Vercel is free if a hobby.)
5. Create /.env file and according to the table below (Deploy with Vercel has already been set above.)

Environment Variables

Create /.env file and according to the table below or refrence /.env.example

Required Environment Variables

Required Keys	Value
NOTION_API_SECRET_KEY	Create notion integration secret token please check read only access ex) secret_zhL...
NEXT_PUBLIC_NOTION_DATABASE_ID	ex) cd9c83dd...
NEXT_PUBLIC_INFOMATION_BLOGNAME	ex) soolog
NEXT_PUBLIC_INFOMATION_ORIGIN	ex) https://example.com

Comment(Giscus or Utterances)

The comment feature. Please set only one of Giscus or Utterances.

Giscus	Value
NEXT_PUBLIC_GISCUS_REPOSITORY	Giscus Repository ex) username/repository
NEXT_PUBLIC_GISCUS_REPOSITORY_ID	Giscus Repository ID ex) R_kgDO.....
NEXT_PUBLIC_GISCUS_CATEGORY	Giscus Category ex) General
NEXT_PUBLIC_GISCUS_CATEGORY_ID	Giscus Category ID ex) DIC_kwDO.........

Utterances	Value
NEXT_PUBLIC_UTTERANCES_REPOSITORY	Utterances Repository ex) username/repository
NEXT_PUBLIC_UTTERANCES_LABEL	Utterances Issue Label ex) comments

Optional Environment Variables

Optional	Value
NEXT_PUBLIC_INFOMATION_EMAIL	ex) [email protected]
NEXT_PUBLIC_INFOMATION_GITHUB	ex) https://github.com/sooros5132
NEXT_PUBLIC_INFOMATION_REPOSITORY	ex) https://github.com/sooros5132/notion-blog-kit
NEXT_PUBLIC_NOTION_CUSTOM_DOMAIN	Recommend setting this variable. Notion app -> Settings -> Public settings -> Domain ex) sooros
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID	Google Stream ID(Google Analytics ID) ex) G-EH6A2.....
NEXT_PUBLIC_ENABLE_IMAGE_OPTIMIZATION	This function has the effect of being reflected in the Google search ranking. For fast processing, this feature requires server performance as high as Intel Pentium. ex) true

Deploy with Vercel