/astro-notion-blog

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

Primary LanguageAstroMIT LicenseMIT

English | 日本語

astro-notion-blog

GitHub stars GitHub license

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

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

  1. Create an integration and note "Internal Integration Token" as NOTION_API_SECRET
  2. Share a database with your integration at the Notion database page
  3. Fork this repository into your account
    • The Fork button is at the top of the page and the left of the Star
  4. Go to Cloudflare Pages and sign in
  5. Create new project with "Connect to Git" with your forked repository <your-account>/astro-notion-blog, then click "Begin setup"
  6. 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

  1. 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>
  1. Install dependencies and start local server.
yarn install
yarn dev
  1. Open http://localhost:3000 in your browser.
  2. 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