Welcome to Your Notion-Powered Astro Blog

Welcome to your new personal blog! This site combines the frictionless writing experience of Notion with the cutting-edge performance of Astro 5 and the interactive power of React Islands.

Architecture Overview

Here is how your entire publishing pipeline works from your Notion editor down to static CDN deployment:

flowchart LR
  A[Write in Notion] --> B[sync-notion script]
  B --> C[Download & Hash Images]
  B --> D[Generate Local MDX]
  D --> E[Astro 5 Build]
  E --> F[Static HTML / CDN]

1. Documentation-Grade Code Blocks

With astro-expressive-code, your code blocks support filenames, tabs, line highlighting, and git-style diffs with 0 client JavaScript:

export function calculateAnnualGrowth(principal: number, rate: number, years: number): number {
  // Line highlighting example
  const growthFactor = Math.pow(1 + rate, years);
  return principal * growthFactor;
}

You can also showcase command-line snippets with terminal window styling:

# Sync new posts from Notion anytime
npm run sync-notion

# Start the local development server
npm run dev

2. LaTeX Math Equations

Notion and your blog support native KaTeX equations rendered completely at build time:

Inline math: $E = mc^2$ and Euler’s identity: $e^{i\pi} + 1 = 0$ .

Block equation:

\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

3. Interactive React Islands

You can author interactive widgets in Notion using clean code blocks, which hydrate selectively in the browser with client:visible:

Fine-Grained Hydration Test

Rendered with client:visible (hydrates when in viewport)

React Island

Next Steps: Connecting Your Live Notion Account

To sync your real Notion posts:

Duplicate or create your Notion database with properties: Title, Slug, PublishedDate, Tags, and Status.
Create an Internal Integration at notion.so/my-integrations to get your NOTION_TOKEN.
Add your integration to your Notion database (Click ... -> Connect to -> select your bot).

Put your credentials in .env:

NOTION_TOKEN=ntn_your_secret_token
NOTION_DATABASE_ID=your_32_char_database_id

Run npm run sync-notion and watch your Notion pages instantly transform into blog posts!