つつみノート

Claude CodeでNotionをCMSにしたブログを作る方法

#tech

ブログを作りました。Notionで記事を書くと、そのまま公開されるしくみです。この記事が1本目になります。

構成

書く場所はNotionだけ。ふだんの記録がぜんぶNotionにあるので、書く場所を増やさないことを優先しました。

作り方

実装はClaude Codeに任せました。私がやったのは2つだけです。

  1. 「Notionで書いてそのまま公開できるブログにしたい」と構想を伝える
  2. NotionとCloudflareの設定画面でアクセストークン(外部ツールに操作を許可する鍵)を発行して渡す

あとはClaude Codeがデータベース設計からAstroのコード、Cloudflareへのデプロイまで進めてくれました。エラーが出ても、Claude Codeが自分で直していきます。

再現手順

再現したい方向けに、自分の手でやる部分だけ具体的に書いておきます。ここ以外はClaude Codeに頼めば進みます。

  1. Notionでデータベースを作る。名前は「Blog Posts」。プロパティは Title / Slug(テキスト) / Description(テキスト) / Tags(マルチセレクト) / Status(セレクト) / Date(日付) の6つです
  2. Notionのトークンを発行する。インテグレーション設定で新規作成し、シークレットをコピーします。そのあとデータベース右上の「⋯」→「コネクト」で、作ったインテグレーションを接続してください。この接続を忘れると、トークンが正しくても記事が読めません。いちばんつまずきやすいポイントです
  3. Cloudflareのトークンを発行する。ダッシュボードの「APIトークン」画面で「Cloudflare Pagesの編集」権限を付けて作成します。アカウントIDも控えておきます
  4. GitHubのSecretsに登録する。リポジトリの Settings → Secrets and variables → Actions に NOTION_TOKEN / CLOUDFLARE_API_TOKEN / CLOUDFLARE_ACCOUNT_ID の3つを入れます

ここまでできたら、Claude Codeに「NotionをCMSにしたブログを作りたい。構成はNotion + Astro + Cloudflare Pages、公開はGitHub Actionsで」と伝えるだけです。

公開方法

公開も2ステップです。

  1. Notionで記事のStatusをPublishedに変える
  2. GitHubのActions画面で「Run workflow」ボタンを押す

ボタンを押すと、GitHub Actions（GitHubの自動実行サービス）がNotionから記事を取得して、ビルドと公開までやってくれます。反映までは1〜2分。スマホのGitHubアプリからも押せるので、外出先でも公開できます。

本当はStatusを変えたら自動で公開されるのが理想です。Notion Workerとか。無料の範囲では使えないので、このボタン1つだけ手動で残しています。使ってみると、これくらいは手動のほうが「公開した」実感があってちょうどよく感じています。

拍子抜けした話

正直、拍子抜けしました。構想を伝えて、鍵を渡して、それでもう動いている。簡単にできすぎて、作った実感が薄いくらいです。

基盤はできたので、あとは書くだけ。作ったけどどうしよ。

← 記事一覧へ