YunosukeYoshino / Astro-Notion-blog

🚀 Let's start your own Notion Blog with Astro.

English | 日本語

astro-notion-blog

astro-notion-blog helps to create a blog you can write 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

Screenshots

Demo

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

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 the page (database) URL https://notion.so/your-account/<HERE>?v=xxxx as DATABASE_ID

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" section,
   1. Select "Astro" as "Framework preset"
   2. Open "Environment Variables (advanced)" 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

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.

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. 😉

🐦 Twitter community

You can support other members and/or can be supported by other members.

• astro-notion-blog

Contribution

Pull requests are welcome.

---

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