Installation

Astro-notion uses Astro and Notion to help users building a static website. To install package, run the following command:

npm install @jcha0713/astro-notion @notionhq/client

Basic Setup

Notion

1. Log in to Notion.
2. go to my-integrations and press New integration.
3. Create new integration for your website in desired workspace. Only the permission to Read content is needed.
4. Go to https://jcha0713-astro.notion.site/Example-Database-2e34cf8bf619473b8726114f57109dfb and click duplicate on the upper right corner to use it as a template.
5. You could also create and use your own database(inline table). Make sure it has title, date, draft, and slug columns.
6. Click share button on the upper right side and add the integration you created in step 3.
7. Lastly, you need the database id. To find this, click share button again and click copy link on the bottom. Paste it in any text box and copy the 32 characters after your workspace name or notion.so and the slash and before the question mark(?).

For more detailed work-through, see this tutorial provided by Notion.

Astro

1. Copy the Internal Integration Token and create a variable in .env and name it NOTION_API_KEY.
2. Copy the database id and create another variable in .env. Name it NOTION_DATABASE_ID.
3. Astro-notion uses astro-imagetools package to display images. Here is an example config code you can copy and use it.

// astro.config.mjs

import { defineConfig } from 'astro/config';
import { astroImageTools } from 'astro-imagetools';

// https://astro.build/config
export default defineConfig({
  publicDir: './public',
  outDir: './dist',
  vite: {
    plugins: [
      {
        name: 'import.meta.url-transformer',
        transform: (code, id) => {
          if (id.endsWith('.astro'))
            return code.replace(/import.meta.url/g, `"${id}"`);
        },
      },
    ],
    ssr: {
      external: ['svgo'],
    },
  },
  experimental: { integrations: true },
  integrations: [astroImageTools],
});

// astro-imagetools.config.mjs

// create astro-imagetools.config.mjs
// in your project root folder

import { defineConfig } from 'astro-imagetools/config';

export default defineConfig({
  fallbackFormat: 'png',
});