gatsby-source-notionso example site

series of article to explain how to use the gatsby-source-notionso plugin

Content preparation

In order for your content to be renderable by this plugin, you need to follow a few basic rules

The Notion root page contains the list of your pages

When you configure the gatsby-source-notionso plugin, you need to provide the URL of the so called root page.

This page does not contain any content which will be rendered on the site. The Notion root page is the page where you list all the pages you want to render in your site.

A root page is a page like this one:

and in the side bar, you can see the list of all your pages:

The Notion root page must be public

The root page must be made public for the plugin to be able to collect its content.

When an official Notion API will be available, the plugin will use the auth mechanism to access private pages.

The public URLs provided by Notion are very difficult to guess so this should not be a major privacy problem.

An example of such a public URL is :

To make the root page public, you use the Share menu on the top right of your Notion page:

You can use the Copy Page Link to then copy the URL in your gatsby-config.js file in the rootPageUrl property.

Content Page

Once you have made your root page public, you can start adding content pages to that root page, using the "+" button

A content page is a usual Notion page, meaning that you can use the usual formatting rules for your text.

Meta information in your content page

In order to render the page in a static website, you need some extra information to your page.

To do that you add a text block to your page starting with an exclamation mark.

The syntax is:

!keyword value
!keyword: value

The keyword which are supported are:

  • slug: this is the URL of your page (defaults value: your page index like 3)
  • date: the date associated to your page in the format YYYY/MM/DD
  • draft : this keyword marks the page as a draft and so may be filtered out using the isDraft property of the page in your GraphQL query
  • tags: the value is comma separated list of tags. They will be queryable through the tags property for the page
  • !! this special keyword allows you to provide an excerpt for this page

For example, the tags for this page are: