Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/okisdev/Notion-Blog-React
Blog powered by Notion, built with React.JS, Next.JS, tailwindcss, TypeScript, notion-api-worker and more.
https://github.com/okisdev/Notion-Blog-React
cloudflare-workers nextjs notion notion-api notion-blog react reactjs service-worker tailwindcss ts typescript workers
Last synced: 3 months ago
JSON representation
Blog powered by Notion, built with React.JS, Next.JS, tailwindcss, TypeScript, notion-api-worker and more.
- Host: GitHub
- URL: https://github.com/okisdev/Notion-Blog-React
- Owner: okisdev
- License: mit
- Created: 2021-08-16T08:54:09.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-04-26T22:20:27.000Z (6 months ago)
- Last Synced: 2024-04-27T01:34:00.675Z (6 months ago)
- Topics: cloudflare-workers, nextjs, notion, notion-api, notion-blog, react, reactjs, service-worker, tailwindcss, ts, typescript, workers
- Language: TypeScript
- Homepage: https://nbr.okis.dev
- Size: 1.85 MB
- Stars: 48
- Watchers: 4
- Forks: 12
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Notion Blog React
[**English**](#) | [简体中文](README.zh-CN.md)
> A fast serverless Blog powered by Notion.
A Blog powered by [Notion](https://notion.so), built with [React.JS](https://reactjs.org), [Next.JS](https://nextjs.org), [tailwindcss](https://tailwindcss.com), [TypeScript](https://www.typescriptlang.org/), [notion-api-worker](https://github.com/splitbee/notion-api-worker), [React-Notion-X](https://github.com/NotionX/react-notion-x/) and more.
> See [Notion Photo React](https://github.com/Harry-Yep/Notion-Photo-React), if you would like to create a personal photo gallery website powered by Notion.
## Demo
- [nbr.okis.dev](https://nbr.okis.dev)
## Features
Please see the **[features section](https://github.com/NotionX/react-notion-x#features)** on React-Notion-X by [NotionX](https://github.com/NotionX/).
And also, you can...
- Easily change the things you want by editing [`.env`](./.env.example) file.
- Support [Google Analytics](https://analytics.google.com/) & [Splitbee Analytics](https://splitbee.io/).
- Self host notion-api by using [Cloudflare Workers](https://workers.dev). (Default [notion-api](https://notion-api.splitbee.io) By Splitbee)
- Use your favorite Google Fonts.
- Use your own domain.
## Performance
- Use [Lighthouse](https://developers.google.com/web/tools/lighthouse) for testing
## Known Issues
- ❌ Some Notion blocks is not supported. (Please see [here](https://github.com/NotionX/react-notion-x#supported-blocks) for more info.)
## How to deploy
Please visit Notion Blog React [Documentation](https://docs.okis.dev/docs/notion-blog-react) for more details.
## Problem(s) with deployment
- email: [[email protected]](mailto:[email protected])
- Telegram: [@okisdev](https://t.me/okisdev)
## Improvement / Plans
- [x] Add [React-Notion-X](https://github.com/NotionX/react-notion-x) supported or Mix current api with [React-Notion-X](https://github.com/NotionX/react-notion-x).
- [x] Using [Notion Official API](https://developers.notion.com/). (Blogging entirely using Notion's official API is finished and hope to release it soon in the future)
- [ ] Add PostView.
- [ ] Add Tag.
## Related (Examples or Technology being used)
- [Splitee Blog](https://splitbee.io/blog) (using React-Notion, contributor of React-Notion)
- [timo.sh](https://timo.sh/) (using React-Notion, contributor of React-Notion)
- [TransitiveBullsh.it](https://transitivebullsh.it/) (using React-Notion-X, contributor of React-Notion-X)
- [Vercel](https://vercel.com)
- [Cloudflare Workers](https://workers.dev)
- [React](https://reactjs.org)
- [Next.js](https://nextjs.org)
- [tailwindcss](https://tailwindcss.com)
- [TypeScript](https://www.typescriptlang.org/)
- [Notion-Api-Worker](https://github.com/splitbee/notion-api-worker)
- [React-Notion-X](https://github.com/NotionX/react-notion-x)
- [Google Analytics](https://analytics.google.com/)
- [Splitee](https://splitbee.io/)
## Alternatives
> Turn Notion to Blog/Page
- [React-Notion](https://github.com/splitbee/react-notion)
- [React-Notion-X](https://github.com/NotionX/react-notion-x)
- [Super.so](https://super.so/)
- [Fruition](https://fruitionsite.com/)
## Credits
Copyright (c) 2022 Harry Yep
- All Authors & Contributors who own its repository