May 14, 2021

How to setup your own Notion powered blog

Here is a quick start guide:

  • Clone this repo and install the dependencies with npm install.
  • Personalize the page meta data in Container.js
  • Create a Notion page with a table database with the following column names: (Page, Date, Description, Slug)
  • Add posts to your Notion database
  • Create a Notion Integration and then share the database with your integration.
  • Create a .env.local file, based on the .env.exmpale file in the repo, with your Notion API Token and Database ID.
  • Run npm run dev to view your blog locally.
  • Optional: deploy to Vercel.
  • Enjoy blogging!

    • Dev Setup

  • Clone the repo: git clone https://github.com/luciovilla/notion-nextjs-blog.git
  • Install its dependencies: npm install
  • Copy or rename the .env.example to .env.local
  • Update all the metadata in Container.js

    • Notion page setup

    In Notion, create a parent blog page, name it and then add a table database. We'll need the following table columns for this blog setup to work:

  • Page (type: title): powers the post headline and meta title.
  • Date (date): powers the display date and meta published_time property.
  • Description (text): powers the preview text on the homepage and the meta description property.
  • Slug (text): powers the url slug.
  • Published (checkbox): Optional - this checks if a blog post should be displayed when deployed.

    • View this sample template database Notion: https://vast-rifle-eed.notion.site/8dde3326f8cb4cc68b47a96bea86e9be.

    Notion API setup

    Let's connect your Notion database:

  • Create a Notion Integration.
  • Copy and paste the Integration Token in the .env.local file: NOTION_TOKEN=____
  • On the Notion page, click the "Share" button in the top right and share the database with the Notion Integration you just created
  • In a browser, go to the Notion page and grab the Database ID from the URL. Its the part of the URL after your workspace name and the slash and before the question mark. The ID is 32 characters long, containing numbers and letters.
  • Paste your Database ID in the .env.local file: NOTION_DATABASE_ID=___

    • Run blog locally!

    After all that setup, run npm run dev and it should fetch all your posts from your Notion table database.

    Notes

    The Notion API was just released and its in Beta, so not all the things you can do in Notion will come through the API. So far, only text-like blocks are currently available. View the Notion API documentation for more info.