Notion APIを使ってNotionのページをウェブサイトで表示
Notion APIを利用してNotionのページをCMSとして表示することで、WordPressよりもセキュアな環境でウェブサイトを公開できるとして注目されています。
私も、勉強のために、ウェブサイトを公開しました。
今回は、いろいろなIDEや、ChatGPT PlusでGPT-4oを活用するなどして制作しました。
今回使ったもの
Notion API SDK for Javascript
Astro
Tailwind CSS
デブロイ先
netlify
使用したIDE
bolt.new
Roo-Cline
Windsurf
活用した生成AI
GPT-4o
今回の工夫
データベースに登録した順番で、ナビゲーションメニューの項目が表示されないため、タグに表示順番を指定する数字を設定しました。
ウェブサイト名は、データベース名を使いました。
今回AstroのフレームワークとTailwind CSSの組み合わせでしたので、簡単にヘッダーとフッターのデザインができました。
そしてモバイルのハンバーガーメニューも、簡単に設置できました。
プログラムの準備
Notion APIのインテグレーションのキーを取得
今回は、内部としてKEYを得ました。
インテグレーションのKEYは、こちらの公式ページで確認してください。
データベースIDの確認
Notionのデータベースを表示たときのURLを、確認します。
https://www.notion.so/aaaaaaaaaaaaaaaaa?v=***************
このaaaaaaaaaaaaaaaaaの部分が、データベースIDです。
環境変数を使いました
GitHubなどに公開したときに、インテグレーションKEYやデータベースIDが漏洩しないように、環境変数としてenvを使いまいた。
bolt.newを使いベースを作りました
bolt.newである程度制作した後にプロジェクトをダウンロードして、Roo-Clineを試しました。
その後Windsurfを使いました。
私は、Claude3.5sonnetのAPI KEYを持っていないので、思うようにRoo-Clineを使えないのです。
そのため、試用段階のWindsurfとGPT-4oを活用して、コードを修正して完成することができました。
デブロイ時のトラブル
GitHubにリポジトリを作ってからnetlifyにインポートして、ウェブサイトとして公開できました。
このときに、トラブルがありました。
このエラーが、出ました。
This error is specifically related to the configuration of the Astro static site generator used in this project.
Solution:
Go to the file static-build.js at line 42 in your project.
As per the error message, you need to install and configure an adapter to use output: 'server' or output: 'hybrid'.
Verify that the necessary adapter is installed. If not, install the required adapter as per the guidelines provided in the error message and the Astro documentation.
After installing the adapter, configure it properly in your project to resolve this error.
Astroのバージョンの互換性に、問題があることがわかりました。
現在のプロジェクトはAstro v4を使用していますが、@astrojs/netlify v6はAstro v5を必要としています。
そのため互換性のあるバージョンのNetlifyアダプターを、WindsurfのClaude3.5sonnetを使いインストールできました。
npm install @astrojs/netlify@5.0.0 --save-dev
この設定を行いました。
Astro v4と互換性のある@astrojs/netlify@5.0.0をインストール
astro.config.mjsファイルを更新して：
Netlifyアダプターをインポート
出力モードを'server'に設定
Netlifyアダプターを設定
デブロイできたウェブサイト
こちらのURLで、公開できました。
稚拙なデザインですが、デブロイまで勉強できたので、良かったです。
あとは、Notionのページで、デザインを工夫したいと思います。
Discussion