Darren Xu Blog

Creating a blog website using Notion as the CMS

Embarking on a web development project is always an adventure, and my recent escapade involved deploying an Astro site on Netlify while juggling Notion as the CMS.

Why did I decide to do this? I wanted to use a CMS that was easily accessible to everyone, able to be edited on my phone and most importantly 100% free.

1. Notion Page for API Integration:

To set up Notion page to work with the API I had to create an integration. This will create an API key which I added to my local .env file and Netlify deployment variables.

Next I made sure my Notion page had access to the integration with page permissions.

2. Netlify function to talk to API

To make requests to Notion I added the @notionhq/client package and created a file under /netlify/functions. I used the Notion API endpoints to find the endpoints I needed to use (in this case both pages and blocks).

3. Astro site

I explored different methods of rendering with Astro originally going with Server-Side Rendering (SSR). This required setting output: "server" in astro.config.mjs and adding the netlify adapter from @astrojs/netlify/functions. This worked originally and also meant changes from Notion were almost live. I thought it was a bit slow as it needed to make the requests on the first time of page load and the content in the pages don’t change that much.

I decided to change to a static site setting output: "static" and using getStaticPaths to generate the pages.

export async function getStaticPaths() {
  const allPaths = await getData();

  return allPaths.data.response.results.map((review) => ({
    params: { slug: review.id },
  }));
}

4. Deploy

As the Notion pages were no longer fetched every time you visit the page I added in a deploy hook on Netlify. This hook could be triggered on a page on the website with a client side HTTP request.

A few things that caught me out