Chargebee Notion Blog Starter Template

Introduction

The Chargebee Notion Blog Starter is a Next.js-based sample starter site that integrates Notion as a Content Management System(CMS) and utilizes Chargebee for managing memberships. This tutorial will guide you through the steps to quickly set up and start using the Charegbee blog starter template.

Step 1: Setup and Configuration

Follow the steps below to set up the notion template to customize according to your blog requirements.

1. Click Duplicate to start duplicating this Notion template.

   

2. Make sure the copied template is private and not published to the web.

3. Click Use this template button to fork the Chargebee Notion Blog Starter project on GitHub.

   

4. Customize the blog.config.js file at the root to adjust the configuration settings according to your requirements. You can set the title, description, theme, timezone, and analytics configuration here in one place.

5. For local development, create a .env.local file by running the terminal command cp .env.example .env.local in the project root. Then, update the environment properties in the .env.local file with the required values.

   The below table describes the properties that need to be used:

   Property	Description
   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. Example: free
   API_ROUTE_SECRET	Admin Secret Key to access our API.

   Refer here on how to find the values for these environment properties.

6. Replace the favicon.png file in the /public folder with your own favicon. This step is optional.

Step 2: Configuring Dependencies Locally and Seeding Data

Follow the steps below to configure dependencies locally and start seeding data.

1. Ensure you have a recent version of Node.js installed on your system. We recommend using recommended version 16 or after.

2. Install pnpm package manager.

3. Install the project dependencies by running the command pnpm install in your system terminal.

4. Run the seed command pnpm seed to set up the necessary product catalog configuration in Chargebee.

You can log in to your Chargebee web console to modify the product catalog based on your needs.

You now have your blog running locally.

Step 3: Deployment and Environment Configuration

Follow the steps below to deploy and configure the environment for going live with your blog.

1. Deploy the project to Vercel using the Vercel deployment button. Make sure to update the environment property values mentioned above during the deployment process.

2. Configure Supabase:

   • Copy the seed.sql script provided in the tutorial and execute it in your freshly created Supabase project's SQL Editor. This script will create the required tables, triggers, and functions.

     

   • Set up a webhook in Supabase to watch for row insertions and trigger an HTTP request to our endpoint /api/create-customer that creates a new customer in Chargebee. Pass the API_ROUTE_SECRET via HTTP Header as shown below.

     

   • Configure Supabase Authentication based on your specific requirements, including adding social SSO. You can choose your preferred Social platform. You have to create the project on the selected platform accordingly as mentioned here.

     

3. Configure Chargebee:

   • Create a new webhook in Chargebee with the url REPLACE_YOUR_BASE_URL/api/webhooks as shown below. This webhook will allow Chargebee to notify your application about subscription changes.
   • Click Update.

     

Step 4: Writing Content and Customization

With the setup complete, it's time to start writing your blog content. You can use Notion to create and manage your blog posts easily.

You can explore the various features available in the Chargebee Notion Blog Starter, such as comments, full-width pages, quick search, tag filtering, RSS, analytics, and more. The starter template is built with Tailwind CSS, making it easy to customize the styling to match your branding and design preferences.

You have successfully set up and started your own blog using the Chargebee Notion Blog Starter template. Feel free to modify or contribute to the repository.

Enjoy blogging with the Chargebee Notion Blog Starter!

• Charegebee Blog Starter Demo
• Chargebee Blog starter Repository