English | 日本語

easy-notion-blog

Easy to start your blog.

You can write on your Notion.

Screenshot

Demo

https://easy-notion-blog-otoyo.vercel.app/blog

Users' blogs

• オマツリ
• 八朔 Blog
• shmn7iii
• nitaking.dev (Contributor)
• www.gadge7.net
• herohoro ブログ (Contributor)
• アルパカログ (Owner)

Features

• Very fast!
• Write on the Notion
• Using official API
• Full customization

Requirements

• Notion account
• Vercel account
• Git

(For your customization)

• Node.js v14 or higher
• Yarn

Quick Start

1. Star this repo 😉
2. Duplicate the template into your Notion.
3. Note the part of URL https://notion.so/your-account/<HERE>?v=xxxx as DATABASE_ID
   • ex) 158bd90116004cd19aca26ad88cb5c07
4. Create an integration and note "Internal Integration Token" as NOTION_API_SECRET
5. Share a database with your integration in the previous database
6. Go to vercel.com and log-in with your account
7. Create new project by importing GitHub repo otoyo/easy-notion-blog (Skip team create)
8. In "Configure Project", open "Environment Variables" settings and set NOTION_API_SECRET and DATABASE_ID
9. Your Notion Blog will be published after deploy

Database properties

Property	Description	Example
Page	A blog entry.
Slug	Entry ID used as end of URL. Valid URL characters are only allowed.	my-1st-entry
Date	Publishing date	2021/12/1
Tags	Categorize entories by tags	Diary
OGImage	An image treated as og-image
Excerpt	Excerpt of the entry	This is my 1st entry.
Published	Publishing state. Only checked entries are published.
Rank	Recommendation rank. Recommended entries are ordered by rank decendant	10

How to customize

Fork this repo from "Fork" button and clone it into your local.

Create .env.local file in project root and write your ENV as follows.

NOTION_API_SECRET=<YOUR_NOTION_API_SECRET>
DATABASE_ID=<YOUR_DATABASE_ID>

Install dependencies and start local server.

# Install dependencies
yarn install

# Start local server at localhost:3000
yarn dev

Open http://localhost:3000 in your browser.

Entries without Published are also displayed for preview in local. But no Slug entries are not displayed.

Press Ctrl+C to stop local server in the terminal.

How to deploy to Google Cloud Run

See the wiki.

Lint & Test

yarn lint
yarn test

Optional settings

• favicon
  • Place favicon.ico under public/ directory
• Google Analytics 4
  • Set your tracking ID to "Environment Variables" as NEXT_PUBLIC_GA_TRACKING_ID
• Social Buttons
  • Set your site URL to "Environment Variables" as NEXT_PUBLIC_URL

Bug report & requests

Please create an issue in English or Japanese.

Twitter community

• easy-notion-blog

Contribution

Pull requests are welcome.

---

easy-notion-blog is based on ijjk/notion-blog and otoyo/notion-blog