How to use notion for blogging and setup automatic notion blog

Unlock the full potential of Notion for blogging journey! Learn how to set up an automated Notion blog to streamline your workflow and boost productivity.

Wed Dec 27 2023

How to use notion for blogging and setup automatic notion blog

Why notion is best platform for blogging automation?

Easily convert notion to blog

Notion stands out as the ideal platform for blogging automation due to its unparalleled flexibility and robust feature set. Unlike traditional blogging platforms, Notion provides a dynamic and customizable workspace where users can seamlessly integrate content creation, organization, and automation. The platform's unique combination of databases, pages, and blocks enables users to design a personalized blogging structure tailored to their specific needs. Notion's compatibility with automation tools such as Zapier, and its REST API empowers bloggers to streamline repetitive tasks, such as social media sharing and email notifications, allowing them to focus more on content creation and less on manual processes.

Notion Setup

Create a blog database

First, navigate to the Notion page you want to create your blog in. Select new full page or inline database from the slash command menu on notion page. This will create a database where you can add blog pages.

Add publish & description columns on database

Select properties section of the database and add publish property to control the visibility of the post on the website. Also, add a description column, which will be the meta description for the SEO of the blog post. You can add other fields as a column if you like.

Publish your database to the world

You can click on a “Share” button on the top menu and select “Publish” option to share the database and its children posts with the internet.

Code Setup

Fetch blog posts from ReactJS or Next.js project using notion-client

Install notion-client to use Notion’s REST API - Link

npm install notion-client

Fetch multiple posts or single post using notion-client

import { NotionAPI } from 'notion-client' // you can optionally pass an authToken to access private notion resources const api = new NotionAPI() // fetch a page's content, including all async blocks, collection queries, and signed urls const page = await api.getPage('067dd719-a912-471e-a9a3-ac10710e7fdf') // fetch the data for a specific collection instance const collectionId = '2d8aec23-8281-4a94-9090-caaf823dd21a' const collectionViewId = 'ab639a5a-853e-45e1-9ef7-133b486c0acf' const collectionData = await api.getCollectionData( collectionId, collectionViewId )

Display the notion post using react-notion-x

Install react-notion-x to display blog post on the website - Link

npm install react-notion-x

You can get recordMap from Notion API

import { NotionAPI } from 'notion-client' const notion = new NotionAPI() const recordMap = await notion.getPage('067dd719a912471ea9a3ac10710e7fdf')

You can render notion blog post with <NotionRenderer />

import * as React from 'react' import { NotionRenderer } from 'react-notion-x' export default ({ recordMap }) => ( <NotionRenderer recordMap={recordMap} fullPage={true} darkMode={false} /> )

Add blog sitemap

Add server-side XML page to fetch and display blogs list using next-sitemap in Next.js projects - Link

npm install next-sitemap

You can use next-sitemap to export dynamic blog sitemap

// app/server-sitemap-index.xml/route.ts import { getServerSideSitemapIndex } from 'next-sitemap' export async function GET(request: Request) { // Method to source urls from notion api return getServerSideSitemapIndex([ '<https://example.com/path-1.xml>', '<https://example.com/path-2.xml>', ])

Extra tip

Add Next.js vercel's based cache to enable high performance

// blog list page & blog post page export const revalidate = 3600; // 1 hour

Conclusion

In conclusion, leveraging Notion for blogging and setting up an automatic Notion blog can significantly streamline your writing and content creation process. By harnessing the power of Notion's versatile features, such as databases, templates, and collaborative editing, you can enhance both the organization and presentation of your blog content. The ability to integrate third-party tools for automatic publishing further empowers you to maintain a consistent posting schedule without the hassle of manual uploads.

Download NotionSEO

NotionSEO have FREE FOREVER Plan

You can download NotionSEO right now and use our free features without any limits. No credit card required.

Download Browser Extension