Sample 16: Mixed Content (Blog Post)

In this post, we'll explore how to build a static blog using Astro 5 and Notion as a CMS.

Why Notion as a CMS?

Notion offers a clean writing experience with a rich block editor. Using the Notion Public API, we can fetch page content as Markdown and render it in Astro.

Setting Up the Project

npm create astro@latest my-blog
cd my-blog
npm install notro

Configuring the Content Loader

Add the following to your content.config.ts:

import { defineCollection } from "astro:content";
import { loader, pageWithMarkdownSchema } from "notro";

const posts = defineCollection({
  loader: loader({
    queryParameters: { data_source_id: import.meta.env.NOTION_DATASOURCE_ID },
    clientOptions: { auth: import.meta.env.NOTION_TOKEN },
  }),
  schema: pageWithMarkdownSchema,
});

export const collections = { posts };

Key Features

Feature	Supported
Headings	✅
Code blocks	✅
Callouts	✅
Tables	✅
Math (KaTeX)	✅
Toggles	✅

Conclusion

With NotroTail, you get a fast, SEO-optimized blog powered by Notion. Happy writing!