Astrotion

Astro + Notion + Blog

What is different from astro-notion-blog?

• Stylish theme inspired by Creek
• 100% TypeScript ready
• Easy to customize
• Simpler implemetation: Notion's rendering is achieved simply by markdown-izing pages
• Notion cache ready: it works on Cloudflare Pages
• Support Astro v5 and TailwindCSS v4

💡 Powered by notiondown

Features

• Fetching Notion pages in a database
• Cache Notion pages automatically and reduce build time
• Downloading images in Notion pages automatically
• Basic blocks support
• Code syntax highlighting
• Math equation rendering
• Mermaid diagram rendering
• Automatic OG image generation

Customization

These files can be customized without concern for conflicts:

• public/*
• src/customization/*

Showcase

• Re:Earth Engineering

Getting Started

1. Use this template

Click the "Use this template" button on GitHub to create your own repository.

2. Set up Notion

1. Duplicate this blog template to your Notion workspace
2. Customize the icon, title, and description as you like
3. Note the DATABASE_ID from your page URL: https://notion.so/your-account/<DATABASE_ID>?v=xxxx

3. Create a Notion Integration

1. Go to My Integrations and create a new integration
2. Copy the "Internal Integration Token" as NOTION_API_SECRET
3. Go back to your Notion database page, click "..." → "Connections" → "Connect to" and select your integration

4. Deploy to Cloudflare Pages

1. Go to Cloudflare Pages and create a new project
2. Connect your GitHub repository
3. Set the following environment variables:
   • NOTION_API_SECRET: Your Notion integration token
   • DATA_SOURCE_ID: Your Notion database ID
4. Click "Save and Deploy"

5. Publish new posts

After publishing a new post in Notion, you need to trigger a new deployment. You can do this manually from the Cloudflare Pages dashboard, or set up automatic deployments using GitHub Actions or webhooks.

TODO

• Support embed and bookmark blocks
• Search
• Related Posts
• i18n support