Notion API でポートフォリオ風テックブログを構築する
実装約3分で読めます
この記事でわかること
- Notion をブログのバックエンドにするために最初にやった 5 つの作業
- Notion MCP の認証が進まなかったときの回避策（Integration のトークンで直接 API を叩く）
- Integration を作っても検索結果が空になる原因（ページ側での接続が必要）
Notion のワークスペースと、Integration を作成できる権限があること。Claude Code を使いますが、curl でも同じことはできます。
ポイント
Notion API を使って、おしゃれなポートフォリオ風テックブログを構築した記録。Claude Code の Skill 機能と組み合わせて、開発セッションを自動で記事化する仕組みも作成。
やったこと
- Claude Code Skills の理解と活用
- session-to-notion Skill の作成（自動記事化機能）
- Notion Integration の作成と API 接続
- Tech Articles データベースの設計・構築
- ポートフォリオページのデザイン・実装
技術スタック
- Notion API (2022-06-28)
- Claude Code Skills（Markdown形式の指示書）
- curl / Bash（API呼び出し）
詰まったポイント
1. Notion MCP の認証問題
Notion MCP サーバーが「Needs authentication」状態のまま認証フローが開始されなかった。
Tips
解決策: Notion Integration を作成し、シークレットトークンを使って直接 API を呼び出す方式に切り替え。
2. Integration のページアクセス権限
Integration を作成しても、検索結果が空で返ってきた。
Tips
解決策: Notion 側で対象ページを開き、「接続」メニューから Integration を追加する必要があった。
作成した Skill 構成
~/.claude/skills/session-to-notion/
├── SKILL.md # メインの指示書
├── MASKING_RULES.md # 機密情報マスキングルール
└── CONFIG.md # Notion API設定情報この Skill の中身（3 フェーズの設計）は、別記事の Claude Code × Notion で開発セッションを自動記事化する仕組み で詳しく書いています。
ページ構成
- 👨💻 About Me - 自己紹介とモットー
- 🔗 Connect - SNSリンク（GitHub, Qiita, Tech Blog等）
- ⚡ Tech Stack - スキルセット（カラフルなCalloutで表示）
- 📝 Tech Articles - 記事データベース
学び
- Notion API でページ・データベースの作成、ブロックの追加が可能
- ビュー設定（ギャラリー/テーブル等）はこの時点では API から変更できず、UI 側で設定した
- Claude Code Skills は
~/.claude/skills/に Markdown を配置するだけで使える - 機密情報のマスキングルールを定義しておくと、安心して記事化できる
メモ
後日談: ここで作った Notion のデータベースが、その後このブログ（kt-tech.blog）のバックエンドそのものになりました。Next.js 側からどう取得して表示しているかは Notion API でブログシステムを構築する、microCMS からの乗り換えの経緯は microCMSからNotion APIへブログCMSを完全移行する にあります。
更新履歴
- コードブロックの言語指定を plain text から bash に修正し、パスのエスケープが見えていた箇所をインラインコードに修正。内容が隣接する他記事（自動記事化の仕組み、Notion API でのブログ実装、microCMS からの移行）へのリンクを追加。ビュー設定について、当時の状況であることが伝わる表現に修正。末尾の「次回」メモを後日談に差し替え。OGP Description を内容に即したものに変更。
