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.jsCreate a Notion page with a table database with the following column names: (Page, Date, Description, Slug)Add posts to your Notion databaseCreate 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 SetupClone the repo: git clone https://github.com/luciovilla/notion-nextjs-blog.gitInstall its dependencies: npm installCopy 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 createdIn 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.
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.