https://github.com/chargebee/blog-starter
Notion-powered blog starter with @chargebee and @vercel https://www.chargebee.com/tutorials/chargebee-notion-blog-starter/
https://github.com/chargebee/blog-starter
medium plg
Last synced: 10 months ago
JSON representation
Notion-powered blog starter with @chargebee and @vercel https://www.chargebee.com/tutorials/chargebee-notion-blog-starter/
- Host: GitHub
- URL: https://github.com/chargebee/blog-starter
- Owner: chargebee
- License: mit
- Created: 2023-05-30T12:20:13.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-26T09:03:26.000Z (almost 3 years ago)
- Last Synced: 2025-06-16T06:47:14.133Z (about 1 year ago)
- Topics: medium, plg
- Language: JavaScript
- Homepage:
- Size: 2.87 MB
- Stars: 3
- Watchers: 16
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Chargebee Notion Blog Starter
This is sample Next.js starter site that uses Notion as CMS and Chargebee for managing membership subscriptions.
[Learn how to get started with this template in an in-depth tutorial!.](https://www.chargebee.com/tutorials/chargebee-notion-blog-starter/)
Authentication and user profile information is stored in [Supabase](https://supabase.com/) (PostgreSQL).
## Screenshot
**Demo**: https://chargebee-blog-starter.vercel.app/
## Features
🚀 Fast and responsive
- Fast page render and responsive design
- Fast static and server side generation with efficient compiler
🔥 Membership
- Manage membership with Chargebee subscription easily
🤖 Deploy instantly
- Deploy on Vercel/Netlify 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
- Automatic OG image generation
- Meta tag generation to unfurl meta information on social platforms
## Built With
- [Next.js](https://nextjs.org/) – Framework
- [Tailwind CSS](https://tailwindcss.com/) - Styling
- [Notion](https://www.notion.so/) – Content
- [Chargebee](https://www.chargebee.com/) – Subscription Management
- [Supabase](https://supabase.com/) - Database & Authentication
## Getting Started
This project requires a recent version of Node.js (we recommend >= 16).
- Star this repo 😉
- Duplicate [this Notion template](https://bharathvaj-ganesan.notion.site/d51a395709e74a9eaae9f2cd3895f98c?v=1d2ea9e6652e4d508439ed5a9a73e08d). Make sure it is not public.
- Fork this project by clicking on `Use this template` action.
- Customize [blog.config.js](https://github.com/chargebee/blog-starter/blob/main/blog.config.js). All config is defined in this file.
- (Optional) Replace favicon.png in /public folder with your own.
- For local development, run `cp .env.example .env.local` and update the following env properties.
### Configuration
| **Env Property** | **How to get it ?** |
| ----------------------------- | -------------------------------------------------------------------------------------------------------------- |
| NOTION_PAGE_ID | The ID of the Notion page you previously shared to the web, usually has 32 digits after your workspace address |
| NOTION_ACCESS_TOKEN | Notion Access Token |
| SUPABASE_SERVICE_KEY | Supabase Admin Key |
| NEXT_PUBLIC_SUPABASE_URL | Supabase project public URL. |
| NEXT_PUBLIC_SUPABASE_ANON_KEY | Supabase anonymous key. |
| NEXT_PUBLIC_CHARGEBEE_DOMAIN | Chargebee Domain name. |
| CHARGEBEE_API_KEY | Chargebee's Full access key. |
| DEFAULT_PLAN | Your default item plan id. - Eg. free |
| API_ROUTE_SECRET | Admin Secret Key to access our API |
How to get Notion related envs
How to get Supabase related envs
How to get Chargebee related envs
How to get API Route secret
Run this terminal command and use the value.
`openssl rand -base64 32`
- Run this following seed command once to setup Chargebee.
`pnpm seed`
This will create product catalog configuration needed for this blog starter to work. You can customize generated product catalog as per your preference.
- That's it! Easy-peasy? You now have blog running locally.
- Now you can deploy to Vercel using the following button and update the env property values.
[](https://vercel.com/new/git/external?repository-url=https://github.com/chargebee/blog-starter/tree/main&project-name=chargebee-notion-blog&repository-name=chargebee-notion-blog)
- Configure Supabase.
- Copy the [seed.sql](https://github.com/chargebee/blog-starter/blob/main/supabase/seed.sql) and in a freshly created Supabase project. Go to SQL Editor and run this sql script. This will create required tables, triggers and functions.
- You also need to create a webhook in Supabase that watches the row insertions and triggers a HTTP call to our application to create new customer in Chargebee.
- Finally configure Supabase Auth. You can add social SSO based on your requirement easily from Supabase console.
- Configure Chargebee
- Create new webhook with path `{REPLACE_YOUR_BASE_URL}/api/webhooks`. This will allow Chargebee to inform our application about the subscription changes happening at their end.
- How does it will look like
How to create ?
1. Webhook Name: create_chargebee_customer
2. Conditions: Table - profiles; Event - insert
3. Type of Webhook - HTTP POST
4. Headers
- Content-type: application/json
- x-api-secret: {{REPLACE_WITH_API_ROUTE_SECRET}}
5. Create
- Awesome. It's your time to write content. 🎉
How to set the pricing for a blog content ? - Free / Premium
Simply set the pricing column of the blog content to be either free / premium. Please note that these are plan names configured in Chargebee's account.
## Contributing
We love our contributors! Here's how you can contribute:
[Open an issue](https://github.com/chargebee/blog-starter/issues/new) if you believe you've encountered a bug.
[Make a pull request](https://github.com/chargebee/blog-starter/pulls) to add new features/make quality-of-life improvements/fix bugs.
### How can this be taken forward ?
- **Caching**
Currently, we are pulling information directly from Notion via API (This might cause latency issue). We can add caching layer with cache bursting strategy to reflect the latest information from Notion Database.
- **Personalization**
Showing personalized blog posts similar to [Medium.com](https://medium.com/)
## License
Inspired by [Notion Blog](https://github.com/chargebee/blog-starter), this starter is open-source under the MIT. You can find it [here](https://github.com/chargebee/blog-starter/blob/main/LICENSE).