wildcatco/notion-blog

Next.js blog template that uses Notion as CMS

# Notion Blog with Next.js 13 <p align="center"> <img alt="demo site screenshot" src="public/readme/main.png" width="80%" /> </p> ## Contents - [Introduction](#-introduction) - [Demo](#-demo) - [Features](#-features) - [Major Dependencies](#-major-dependencies) - [Getting Started](#-getting-started) - [Screenshots](#screenshots) - [TODO](#-todo) ## 🚀 Introduction This is a blog template that uses Notion as CMS.<br> Upload posts in Notion, share them through your blog!<br> **This project uses `App Router` that is now stable in Next.js 13.4.** ## 👀 Demo Check out the demo site [HERE](https://notion-blog-wildcatco.vercel.app/blog) https://www.youtube.com/watch?v=rZgh8a4ZjA8 [](https://youtu.be/rZgh8a4ZjA8) ## 🌟 Features - Simple to sync Notion and blog - Search posts by name - Filter posts by categories - Related posts - Dark mode - Responsive design - Sitemap ## 📦 Major Package Dependencies - [react-notion-x](https://www.npmjs.com/package/react-notion-x): Renderer for notion pages - [notion-client](https://www.npmjs.com/package/notion-client): Unofficial Notion API which is much faster than official Notion API ## 🏁 Getting Started 1. Duplicate [this](https://curved-kale-c2a.notion.site/Blog-6d822373099b4cb5a17f54c71cbdc917) notion blog template to your notion workspace. (Make your notion page public.) <img alt="duplicate template" src="./public/readme/getting-started/duplicate-template.png" style="width: 60%; margin-top:10px"/> 2. Visit your notion page with **browser**. 3. Check your database id in the url. (needed as an environment variable) <img alt="check database id" src="./public/readme/getting-started/check-database-id.png" style="width: 60%;margin-top: 10px"/> 4. Check your auth token in the cookie. (