Notion APIを使いウェブサイトを作る際のプロンプト

Notion APIを使いbolt.newで作ると、WordPressよりも簡単でセキュアなウェブサイトを作ることができると、話題になっています。
それで私も、この数日Notion APIを使ってCMSやウェブサイトとして表示できるように、試行錯誤を続けています。

その中で、Notion APIを使ってウェブサイト作る手順ですが、bolt.newのプロンプトとして使える内容を考案しました。

私も、この内容でビルドを試みましたが、無料版で１日で使えるトークンを使い切ってしまい、ビルドが途中になってしまいました。
そのためパソコンにプロジェクトを配置して、GPT-4oなどを使い完成することができました。
こちらが、ウェブサイトです。
こちらのウェブサイトは、環境編集でウェブサイトの作者名も設定できるように要件定義を作り試してビルドしました。

https://itsupportermk-web2.netlify.app/

このウェブサイトを作る前に、ローカルで色々ファイルを修正して作ったウェブサイトは、こちらです。

https://itsupporter-mk.netlify.app/

このウェブサイトを作るときに行ったことを、こちらの記事に、まとめました。

Notion APIを使ってNotionのページをウェブサイトで表示

今回作った要件定義の内容を有償ですが、公開します。
Notion APIでウェブサイトやCMSをbolt.newで作るときの参考にしていただけますと幸いです。

無料でプロンプトを手に入れる方法

こちらのXのポストをリポストしていただけると、無料で手に入れることができます。

noteで記事を書きました！この投稿をリポストするとお得に記事を読むことができます。
Notion APIを使いウェブサイトを作る際の要件定義書 | エンジニアM168 @masaru21 #note https://t.co/mbJoHpoRAA

— エンジニアM168 (@masaru21) December 17, 2024

2024年12月19日追記

Notionのページを固定ページとブログのページの2種類表示できるウェサイトを作ることができました。

Astro Notion Website

こちらのコードを基に、汎用性を高めて、コードの配布ができるようにしたいと思いを巡らしています。
私は、資金の都合でサーバーを確保できないので、お客様のウェサイトを表示するホスティングを行うことが難しいのです。
そのためお客様にサーバーの料金をご負担をお願いしている状態なので、webアプリ化して、自動でNotionのページをCMSのように固定ページやブログ形式で表示できるサービスの提供が難しいです。
bolt.newやbolt.diyを使い土台を作った後に、cursorやGithub Copilot、Roo-Cline、Clineなどを使い完成させる流れで、試行錯誤を続けています。

2024年12月25日追加

Next.jsとChakra UIを使い、Notionで制作したページをウェブサイトとしてbuildする要件定義を更新しました。

重要なことを追加しました。
開発するときにAPIを使うと、静的なウェブサイトとしてbuildするさいに、たくさん修正しないといけないです。
そのため最初からAPIを使わない形で制作できるように、要件定義に追記しています。

これは、要件定義の一部です。
これを含む内容が、有料部分で公開されています。
ファイルの形で掲載されていますので、ダウンロードして使ってください。

2024年12月31日追記

私は無料版のAPIのためテストが思うようにできないのですが、プロンプトを修正しました。
Netlifyなどを使う形で静的なウェブサイトを公開することは、とても簡単です。
私も、成功しています。
でも、今回の記事は、WordPressが動く一般的なレンタルサーバーにデブロイすることを目標に取り組んでいます。

buildが成功しているウェブサイト

Astro Notion Website

buildが成功しているウェブサイトは、Astroというフレームワークを使っています。
今回は、Next.jsとChakra UI V2を使って、制作を試みています。
Chakra UI V2を使うと、きれいなウェブサイトを作ることができることが分かりました。
Netlifyでビルドできるプロンプトと、レンタルサーバー向けのプロンプトと二種類作った方が良いと今気が付きました。

完成できたら、記事を更新したいと思います。
Netlifyでビルドしたコードは、こちらです。

ITサポーター・MK

2025年1月6日追記

Next.jsが使えないレンタルサーバーで使えるように、Next.jsを静的なウェブサイトとしてビルドする方法ですが、URLが固定されている場合は、上手く行きます。
今回のようにNotion APIを使い動的にページのURLを作る状態では、Next.jsが使えないレンタルサーバーで使えるように、静的なウェブサイトとしてビルドしようとしても無理がありました。

今回DeepSeek V3のAPIキーの料金を5ドル分購入してCool Clineで試したのですが、３時間以上かかってもビルドの際のエラーを解決できませんでした。
そのため諦めました。
今回の結論から、Next.jsが使えないレンタルサーバーで使えるように静的なウェブサイトとしてビルドすることは、可能です。
でもウェブサイト内のURLが、固定の場合のみ実現できるという結論に達しました。

有料で公開するプロンプトは、Next.jsが使えるVercelやNetlifyなどで使えるようにウェブサイトをビルドできる内容に変更しました。
申し訳ございません。

またBolt.newの無料枠では、トークンが足りません。
そのためプロジェクトをエクスポートして、Cool Rlineやcursorを使って開発されることをお勧めします。