!slug 20201011

!date 2020/10/11

!! Notionの記事をGatsby JSで作ったブログのデータソースにしてみました。今まではGatsbyのデータソースにNetlifyCMSのマークダウンエディタを使っていました。普段のメモにNotionを使っています。Notionには記事をそのまま公開できる機能があり、これをそのままGatsbyのデータソースに使ってみました。いくつかNotion関連のプラグインがありました。その中でも最も使われていそうな gatsby-source-notionso を使いました。

今まではGatsbyのデータソースにNetlifyCMSのマークダウンエディタを使っていました。

普段のメモにNotionを使っています。Notionには記事をそのまま公開できる機能があり、これをそのままGatsbyのデータソースに使ってみました。

blog.kwst.site

いくつかNotion関連のプラグインがありました。その中でも最も使われていそうな gatsby-source-notionso を使いました。

gatsby-source-notionso

Notionに公開用のページを作成

Notionに公開用ページの親ページを作成します。このページに子ページを作成して、それが記事になります。

https://www.notion.so/Blog-188bb73b88944a34a87a8e53afb181b2

プラグインの導入

基本的にはこちらのGetting Startedに沿ってやってきます。

Getting Started

こちらのExampleリポジトリも参考にしました。

pcarion/gatsby-source-notionso-example

gatsby-config.jsにプラグイン追加

自分のブログプロジェクトのgatsby-config.jsにgatsby-source-notionsoを追加。(nameはBlogにしないとエラーが出ました。)

{
  resolve: `gatsby-source-notionso`,
  options: {
    rootPageUrl:
      "<https://www.notion.so/kwst/Blog-188bb73b88944a34a87a8e53afb181b2>",
    name: "Blog",
  },
}