harunonsystem/easy-notion-blog

Easy to start your Notion Blog with Official API

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

• 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 v12
• Yarn

Quick Start

1. Go to notion.so and log-in with your Notion account.
2. Create a blank page.
3. Type /table and select "Table - Inline" (Fig.1)
4. Go to under page(database) named as "Untitled" (Fig.2)
5. Check the name of the database columns to be Name, Tags. Rename if they are not so.
6. Note the part of URL https://notion.so/your-account/<HERE>?v=xxxx as DATABASE_ID
7. Create an integration and note "Internal Integration Token" as NOTION_API_SECRET
8. Share a database with your integration in the previous database
9. Open the Terminal.app and clone this repo into your local git clone git@github.com:otoyo/easy-notion-blog.git && cd easy-notion-blog
10. Run initialization script DATABASE_ID='<YOUR_DATABASE_ID>' NOTION_API_SECRET='<YOUR_NOTION_API_SECRET>' ./scripts/init-database.sh
11. Go to vercel.com and log-in with your account
12. Create new project by importing GitHub repo otoyo/easy-notion-blog (Skip team create)
13. In "Configure Project", open "Environment Variables" settings and set NOTION_API_SECRET and DATABASE_ID
14. Your Notion Blog will be published after deploy

---

Fig.1 Select "Table - Inline" after typing /table

---

Fig.2 Move "Untitled" database under the new page

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

Update the snapshot if you change HTML.

yarn jest --updateSnapshot

• Jest CLI Options --updateSnapshot

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