Astro-Notion

Astro-Notion provides components to build static websites using Astro and lets you use Notion as your main CMS tool.

Getting Started

Installation

To install @jcha0713/astro-notion package, run the following command:

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

or you can use yarn instead.

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://heliotrope-lavender-f03.notion.site/Example-Database-a845c6d59ead4034be1b637c6381073d 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](http://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',
});