Skip to content

chargebee/blog-starter

Repository files navigation

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!.

Authentication and user profile information is stored in Supabase (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

Getting Started

This project requires a recent version of Node.js (we recommend >= 16).

  • Star this repo 😉
  • Duplicate this Notion template. Make sure it is not public.
  • Fork this project by clicking on Use this template action.
  • Customize 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.

Deploy with Vercel

  • Configure Supabase.

    • Copy the 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 if you believe you've encountered a bug. Make a pull request 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

License

Inspired by Notion Blog, this starter is open-source under the MIT. You can find it here.