English | 日本語

astro-notion-blog

astro-notion-blog helps to create a blog you can writte with Notion.
The blog is generated statically by Astro so very fast.

• 🚀 Very fast page view
• 📝 Can write a blog with Notion
• 🛠️ Can fully customize the site's appearance
• ✅ Using official Notion APIs

Quick Start

Requirements

• Notion
• Cloudflare Pages
• Git

Steps

1. Star this repo 😉
   • It makes me motivative!
2. Duplicate the blog template into your Notion.
3. Note the part of URL https://notion.so/your-account/<HERE>?v=xxxx as DATABASE_ID
   • ex) 158bd90116004cd19aca26ad88cb5c07
     • ⚠️ CAUTION: ?v=NOT_THIS_VALUE. Use ahead strings.
   • URL is retrieved from "Copy link"
4. Create an integration and note "Internal Integration Token" as NOTION_API_SECRET
5. Share a database with your integration at the Notion database page
6. Fork this repository into your account
   • The Fork button is at the top of the page and the left of the Star
7. Go to Cloudflare Pages and sign in
8. Create new project with "Connect to Git" with your forked repository <your-account>/astro-notion-blog, then click "Begin setup"
9. In build settings, open "Environment Variables" and set NODE_VERSION, NOTION_API_SECRET and DATABASE_ID
   • NODE_VERSION is v16.13.0 or higher
   • How to deploy a site with Git is helpful

Please add NOTION_API_SECRET and DATABASE_ID as a encrypted value, and add NODE_VERSION with v16.13.0 or higher to Production and Preview.

10. Click the "Save and Deploy" button, then your Notion Blog will be published after deploy

Note that astro-notion-blog requires a deploy every time if you publish a new post or updates.
Deploy manually from the Cloudflare Pages dashboard or use a scheduled deploy using CI like GitHub Actions.

Demo

https://astro-notion-blog.pages.dev/blog

How to customize

Additional requirements

• Node.js v16 or higher
• Yarn

Steps

1. Create .env file under the project root and put your environment variables as follows:

NOTION_API_SECRET=<YOUR_NOTION_API_SECRET>
DATABASE_ID=<YOUR_DATABASE_ID>

2. Install dependencies and start local server.

yarn install
yarn dev

3. Open http://localhost:3000 in your browser.
4. Press Ctrl+C in the terminal to stop.

For more information

See wiki.

Bug reports & feature requests

Please create an issue. Both in English and in Japanese are OK. 😉

Contribution

Pull requests are welcome.

---

astro-notion-blog is based otoyo/notion-blog