全ての情報をNotionで管理したい。
最近はもっぱら、様々なデータ管理をNotionに集約しています。
アウトプットも全てNotionで完結してしまえば素晴らしいものになるだろうと、Next.jsの勉強も兼ねて自作してみました。
デモページ
https://notion-vercel-blog.vercel.app/
GitHubも公開しているので、カスタマイズはご自由に！
https://github.com/masaquid/notion-vercel-blog
それでは、セットアップに進みましょう。
導入手順
- GitHubリポジトリの作成
- Notionのセットアップ
- Vercelのセットアップ
カスタマイズ等なければ１０分ぐらいで終わります。
それでは、やっていきましょう。
GitHubリポジトリの作成
notion-vercel-blogのリポジトリをクローンします。
リポジトリをクローンする
https://github.com/masaquid/notion-vercel-blog
クローンの説明については、公式ドキュメントが画像付きで説明しています。
そちらを参照してください。
Notionのセットアップ
データベースを作成します。
テスト用に公開している私のデータベースがあるので、複製して利用してください。
データベースを複製したら、そのページへブラウザでアクセスしてください。
URLを確認すると https://www.notion.so/xxxxxxxxxx?v=database_id_here といった形になっています。
この末尾の ?v= 以降 database_id_here の部分がデータベースIDになります。
Vercelのセットアップ時に使うので、控えておきましょう。
次に、インテグレーションを作成します。
下記URLからマイインテグレーションを開き、新しいインテグレーションを作成します。
https://www.notion.so/profile/integrations
インテグレーションに適当な名前を入力し、適切な関連ワークススペースを設定してください。
※インテグレーション名には「Notion」の文字列を設定できません。
種類は「内部」で作成してください。
そのまま保存して進めると、内部インテグレーションシークレットが確認できます。
ここで表示されるキーも控えておきましょう。
その他の項目はデフォルトのまま進めて構いません。
インテグレーションを作成したら、データベースページの右上ドロワーをクリックします。
「接続」から、先程作成したインテグレーションを選択して接続します。
これでNotion側の設定は終了です。
Vercelのセットアップ
Vercelのアカウントのアカウントは持っている前提で話を進めます。
まだ登録していない人は、下記URLから登録しておいてください。
https://vercel.com/home
vercelにログインし「Add New…」から新しいプロジェクトを作成します。
Import Git Repositoryで、先程作成したGitHubのリポジトリを選択するのですが……
そのままでは権限が付与されていないので「Configure GitHub App」から設定します。
「Configure GitHub App」を押下し、開いたメニューをスクロールしていくと……
Repository Accessという項目があるので、先ほど作成したGitHubリポジトリを選択。
Saveを推して保存します。
先ほどの画面に戻ると、対象のリポジトリが表示されるので「Import」を押下します。
プロジェクトの作成画面に入ります。
Projecrt Nameにそれらしい名前を入れて、Framework Presetに Next.js を選択。
Enviroment Variablesに、次の値を設定します。
Keyに「 NOTION_API_KEY」
Valueに 先ほど控えておいた「内部インテグレーションシークレット」
Add Moreを押下し、もう１つ変数を追加して
Keyに 「NOTION_DATABASE_ID」
Valueに 先ほど控えておいた「データベースID」
をそれぞれ入力してください。
最後にDeployを押下したら完成です。
しばらくすると、自動的にビルドされブログが公開された状態になります。
Domainsに公開URLが記載されています。クリックするとアクセスできます。
公開後に設定すること
ブログタイトルや説明文、１ページの表示件数などは src/config/index.ts に記載。
https://github.com/masaquid/notion-vercel-blog/blob/main/src/config/index.ts
ご自身のブログに合わせて適切な値を設定しましょう。
独自ドメインで運用したい。
公式ドキュメント
https://vercel.com/docs/domains/working-with-domains/add-a-domain
とても丁寧な参考サイトもたくさんあるので、参考にしてみてください。
Vercelにお名前.comで取得したドメインをカスタムドメインとして設定する - ZUMA Lab
https://zuma-lab.com/posts/vercel-onamae-domain-settings
Vercelへ独自ドメインを使ってデプロイする - Tomoyuki Kato's Blog
https://ph-1ab.com/deploy-vercel-with-own-domain/#toc2
おわり
Next.jsの勉強を兼ねて、１カラムでシンプルかつ、最小機能での実装を目指しました。
細かい部分で至らない所はめっちゃ多いので、サポートや改修要望はXから連絡くださいませ。
https://x.com/masaquid
Notionをソースとしてブログ化する試みは、過去に幾つかのプロダクトがあります。
有識者の方は、偉大な先人のプロダクトをベースにすると、機能面は豊富かも。
https://github.com/ijjk/notion-blog
https://github.com/otoyo/astro-notion-blog