Notion Blog React Documentation

What is this

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

TL;DR

1. Fork the Notion Blog React from GitHub.
2. Change setting in config/site.config.js file.
3. Import to Vercel by clicking this quick link.
4. Add two environment variables NOTION_API and NOTION_TABLE_SLUG to Vercel configuration.
5. Deploy it.

You can now visit the link generated by Vercel.

Complete Deployment Guide

If you are interested in this project, you can have a try it by using the doing the following things.

Fork this project

Visiting Notion Blog React on GitHub, and click the fork on the top right.

Change the site configuration

Enter config/site.config.js, change the configuration.

module.exports = {
  global: {
    author: {
      name: 'Harry Yep', // The Blog author
      github: 'https://github.com/okisdev/Notion-Blog-React', // The Blog author GitHub
      email: '[email protected]', // The Blog author email
      privacy_policy: 'https://www.harrly.com/privacy-policy', // The Blog Privacy Policy
    },
    site: {
      name: 'Notion Blog React Example', // The Blog title
      description: 'Blog built with Notion, React, Next.js, tailwindcss, TypeScript, Notion-Api-Worker and more.', // The Blog description
      url: 'https://nbr.okis.dev/', // The blog URL
      banner_img: `https://cdn.harrly.com/project/GitHub/Notion-Blog-React/img/Notion-Blog-React.Banner.png`, // The Blog Open Graph image
      language: [
        // The supported language of the Blog (Not recommand to change, only support **简体中文** and **British England** so far)
        {
          name: 'British English', // The language name (Default is **British English**)
          code: 'en-GB', // The language code, this is related the URL you visited. For example, `blog.example.com/zh-CN` stand for **简体中文** of the blog.
        },
        {
          name: 'Simplified Chinese',
          code: 'zh-CN',
        },
      ],
    },
    content: {
      header: {
        description: `...`, // The description of the Blog, which will be shown on the header of the page. JSX supported.
        image_url: 'https://cdn.harrly.com/global/assets/icon/android-chrome-192x192.png', // The header image
      },
      license: {
        name: 'CC BY-NC-SA 4.0', // The License Name
        url: 'https://creativecommons.org/licenses/by-nc-sa/4.0/', // The License agreement URL
      },
    },
    analytics: {
      google: '', // The Google Analytics UA Code
      splitbee: 'O1KKIQNSGP18', // The Splitbee Analytics Code
    },
  },
};

Notion API Preparation

You can use notion-api.splitbee.io if you don't want to make your own one.

Alternatively, see here for how to deploy a notion-api by yourself.

Create the Database in Notion

You should create a notion table with below properties. (You can duplicate a template from here.)

title: Title
tag: Multi-select
published: Checkbox
date: Date
slug: Text
author: Person
description: Text

Deploy on Serverless platform

We have now finished the large part of configuration, it is time to deploy it.

You can choose to deploy it on any serverless which support Next.JS framework, we recommend Vercel, you can use Netlify, etc.

1. To deploy it on Vercel, visit Vercel and click the New Project button.

   

2. Import your forked repository.

   

   This is how configuration looks like.

   It is important to add the Environment Variables, else, the deployment will fail.

   

3. After all setup, click Deploy.

4. You can visit your website via Vercel auto-generated URL (If you deploy with Vercel, it should ending with vercel.app).

Deploy it locally

We have now finished the large part of configuration, it is time to deploy it.

You can download your whole project by clicking the Download ZIP on your GitHub, or you can clone it if you prefer to do so.

After that, please do the following things:

1. Open your project in an IDE, such as VSCode, or terminal, such as iterm2.

2. Create a .env.local in the root path of the project.

3. Copy and paste from .env.example to .env.local.

4. Fill in the environment variables in .env.local.

   It is important to add the Environment Variables, else, the deployment will fail.

5. Run yarn in your project.

6. Run yarn build && yarn start in your project.

7. You can now able to visit your website via http://localhost:3000.