Using Notion API to publish your blogs in Astro

Sat Apr 22 2023

Using Notion API to publish your blogs in Astro

(Full disclosure: I work at Notion, so I’m definitely biased)

Notion is not only a great place to store all your notes, tasks and writing, but it can also be used as a Headless CMS. With the help of the Notion API, you can easily publish your blogs directly from Notion to your website.

What is a Headless CMS?

A Headless CMS is a content management system that separates the content creation and management from the presentation layer. In other words, you write in one place, and publish elsewhere.

Notion has a great publishing experience, which should work well for most people. You can read the same blog on my published Notion site: abc.chaitb.xyz, which is free to publish, but you need to pay to use a custom domain.

Step 1: Create a new Astro Project

Astro is a modern static site builder that makes it easy to build fast, modern websites.

Create a new Astro project and install the necessary dependencies.

https://docs.astro.build/en/tutorial/1-setup/2/

Step 2: Use notion-to-md to convert your Notion Pages to markdown

https://github.com/souvikinator/notion-to-md

Step 3: (Optional) Use a custom transformer for fancier styling

function getNotionClient() {
  const notion = new Client({
    auth: import.meta.env.NOTION_TOKEN,
  });

  const n2m = getMarkdownTransformer(notion);

  return { notion, n2m };
}

function getMarkdownTransformer(notion: Client) {
  // passing notion client to the option
  const n2m = new NotionToMarkdown({
    notionClient: notion,
    config: {
      convertImagesToBase64: true,
    },
  });
  // custom transform for flex images
  n2m.setCustomTransformer("column_list", async (block) => {
    const mdBlocks_temp = await n2m.pageToMarkdown(block.id);
    return `<div class="flex gap-4">
${mdBlocks_temp
  .map(
    (block) => `<div class="flex-1">

  ${n2m.toMarkdownString(block.children).parent}

</div>`
  )
  .join("")}
</div>`;
  });
  return n2m;
}

Step 4: Create a Notion Database to write your blog posts

Here’s mine. Open this database and find the “Duplicate” button on the top right

My Blogs Database

Step 5. Deploying your website

You can use a static site generator like Vercel or Cloudflare Pages to deploy your Astro website. These platforms offer easy integration with version control systems and provide automatic deployments.

Here are the general steps:

  1. Push your Astro project to a Git repository (e.g., GitHub, GitLab, or Bitbucket).
  2. Sign up for an account on Vercel or Cloudflare Pages.
  3. Connect your Git repository to the chosen platform.
  4. Configure your build settings. For Astro, you typically need to set the build command to npm run build and the output directory to dist , although most platforms will detect this for you.
  5. Deploy your site. The platform will automatically build and deploy your site whenever you push changes to your repository.

Both Vercel and Cloudflare Pages offer free tiers that are suitable for most personal blogs and small projects. They also provide custom domain support, allowing you to use your own domain name for your blog.

Make it sparkle ✨

This post was written in Notion and published with Astro.