Notion APIを使ったブログ構築(1) - Notionの設定

2023.09.25

TECH

前回の記事では、ブログの移行を行なった経緯について説明しました。

前回記事

今回以降の記事で自分自身の備忘録も兼ねて、作った仕組みの解説を行います。

ポイント

今回の仕組みのポイントは以下通りです。

Notionのデータベースで記事を管理する。
AWS LambdaでNotionのページをMarkdownに変換し、S3に保存する。
ブログ自体はVercelにデプロイする。
記事はNextJS(Vercel)側でMarkdown からHTMLに変換して表示する。

今回はこのうち、Notionの設定について解説します。

Notionのデータベースでの記事管理

記事を書き、公開非公開を管理するためにNotionのデータベースを利用します。

ブログを管理するデータベースの全体像はこのような形です。

Notionのデータベースは、ページの集合になっています。

一行一行がブログの一つの投稿になっています。

Notionデータベースの設定

ページのプロパティでタイトルや更新日・公開/非公開設定などを、ページのコンテンツでブログ記事を管理します。

データベースのプロパティは以下のように設定しました。

ブログを管理するデータベースのプロパティ

ここで管理するのは主に、

トップページの記事の一覧(Title, Category, PublishedAt)
SEOのための記事のメタタグのデータ(Title, Description)
記事のSlug(Slug)
記事ステータス(公開・非公開フラグ)(Status)

となっています。

その他は今後のアップデートで追加を考えている項目です。

ブログ上での表示

例えば最近投稿した「本ブログをGatsby.jsからNext.jsに移行し、Notion から記事投稿を行えるようにしました！」という記事のNotion側の設定とブログでの表示を見てみます。

Notion上でこのように設定しています。

それがブログの記事一覧ではこのように表示されます。

記事一覧での表示

記事本体での表示

Notionの一番上のタイトルとCategoryプロパティの値が表示されているのが分かるかと思います。

（日付は PublishedAt ですが、タイムゾーンがずれておかしくなっていますね。。。）

上記の他にSEOのためのメタタグや、記事のURLを決めるためのSlugなど、記事ごとに個別で設定の必要な情報はNotionで編集可能にしています。

記事のステータス管理

記事は公開タイミングをコントロールできるようにStatusプロパティを用意して管理しています。

プロパティの種類は’Select’という単一選択項目にして以下のように項目を用意しています。

‘Select’を使ったPropertyでの記事のステータス管理

ここでの工夫としては、

Ideaステータスとして記事のアイデアを同じデータベースに登録できるようにした
記事の公開フラグとしてPublishedステータスを利用しNotion上で記事の公開非公開設定を行えるようにした
Readyステータスで記事のMarkdown自動変換&s3保存の可否の管理を行えるようにした

特にIdeaを登録出来るようにしたことで、記事管理と同時に記事のネタの管理ができるようになったので、日々のメモを記事として公開するモチベーションにつながっているように思います。

Markdownへの変換については記事が

Readyステータス

こちらは今後の記事で改めて詳細の記録を残したいと思います。

Notion APIとの接続

Notionのデータベースの設定がある程度できたら、Notion APIを利用できるように設定していきます。

手順としては

https://www.notion.com/my-integrationsでNotion integration を作成する
Notionで対象のデータベースが配置してあるページを開く
ページのメニューのConnectionsから追加ボタンをクリックする
一覧の中に作成したConnection(Integration)があるのでそれを選択する

という手順で行えるかと思います。

これで、作成したIntegrationから選択したページへのアクセス許可が行われます。

‘Create new integration’を選択

作成したIntagrationにはSecretが発行されるので、これをAPIアクセスに利用します。

Notion側で連携したいページのConnectionsに先ほどのIntegrationを追加しておきます。

Notionの公式チュートリアルにはHTMLフォームからデータベースを作成するための手順が解説されていますので参考になるかと思います。

まとめ

今回の記事ではブログの移行のうちNotionでどのように設定を行ったか、備忘録を兼ねて解説をしていきました。

次回は、自分的に今回の以降の肝である、NotionページのMarkdownへの変換について解説していきます。

Homeへ戻る