linmp/Notion-Blog-React

Blog powered by Notion, built with React, Next.JS, tailwindcss, TypeScript, Notion-Api-Worker and more.

Notion Blog with React

A fast serverless Blog powered by Notion.

A Blog powered by Notion, built with React, Next.js, tailwindcss, TypeScript, Notion-Api-Worker, React-Notion-X and more.

Features

Please see the features section on React-Notion-X by NotionX.

And also, you can...

• Easily change the things you want by editing .env file.
• Support Google Analytics & Splitbee Analytics.
• Self host notion-api by using Cloudflare Workers. (Default notion-api By Splitbee)
• Use your favorite Google Fonts.
• Use your own domain.

Performance

• Use Lighthouse for testing

Known Issues

• ❌ Some Notion blocks is not supported. (Please see here for more info.)

How to deploy

Preparation

• Notion API: See here for how to deploy a notion-api by yourself. (You can use https://notion-api.splitbee.io/ instead)
• Public Notion Table: Create a notion table with below properties. (You can duplicate a template here. Please make sure you have content inside a property box)
  • title: Title
  • tag: Multi-select
  • published: Checkbox
  • date: Date
  • slug: Text
  • author: Person
  • description: Text
• Change your site config: via config/site.config.js

Deploy locally

1. Git Clone to local
2. Copy .env.example file to .env.local
3. Add your NOTION_API and NOTION_TABLE_SLUG (for instance, 2f01c9cec94d4925b2e9aec68b0e850b) to .env.local file
4. run yarn to initialize the project
5. run yarn build && yarn start to start the project

Deploy on Vercel

1. Click the button above or visit here
2. Add NOTION_API and NOTION_TABLE_SLUG to Environment Variables
3. Deploy

Improvement / Plans

• Add React-Notion-X supported or Mix current api with React-Notion-X.
• Add PostView.
• Using Notion Official API. (Blogging entirely using Notion's official API is finished and hope to release it soon in the future)
• Add Tag.

Related (Examples or Technology being used)

• Splitee Blog (using React-Notion, contributor of React-Notion)
• timo.sh (using React-Notion, contributor of React-Notion)
• TransitiveBullsh.it (using React-Notion-X, contributor of React-Notion-X)
• Spencerwoo's Blog (using React-Notion-X)
• Vercel
• Cloudflare Workers
• React
• Next.js
• tailwindcss
• TypeScript
• Notion-Api-Worker
• React-Notion-X
• Google Analytics
• Splitee

Alternatives

Turn Notion to Blog/Page

• React-Notion
• React-Notion-X
• Super.so
• Fruition

Credits

Copyright (c) 2022 Harry Yep

• All Authors & Contributors who own its repository