kt-tech.blog

画像

Notion API でポートフォリオ風テックブログを構築する

Share
💡
Notion API を使って、おしゃれなポートフォリオ風テックブログを構築した記録。Claude Code の Skill 機能と組み合わせて、開発セッションを自動で記事化する仕組みも作成。

やったこと

  1. Claude Code Skills の理解と活用

  2. session-to-notion Skill の作成(自動記事化機能)

  3. Notion Integration の作成と API 接続

  4. Tech Articles データベースの設計・構築

  5. ポートフォリオページのデザイン・実装

技術スタック

  • Notion API (2022-06-28)

  • Claude Code Skills(Markdown形式の指示書)

  • curl / Bash(API呼び出し)

詰まったポイント

1. Notion MCP の認証問題

Notion MCP サーバーが「Needs authentication」状態のまま認証フローが開始されなかった。

解決策: Notion Integration を作成し、シークレットトークンを使って直接 API を呼び出す方式に切り替え。

2. Integration のページアクセス権限

Integration を作成しても、検索結果が空で返ってきた。

解決策: Notion 側で対象ページを開き、「接続」メニューから Integration を追加する必要があった。

作成した Skill 構成

~/.claude/skills/session-to-notion/
├── SKILL.md           # メインの指示書
├── MASKING_RULES.md   # 機密情報マスキングルール
└── CONFIG.md          # Notion API設定情報

ページ構成

  • 👨‍💻 About Me - 自己紹介とモットー

  • 🔗 Connect - SNSリンク(GitHub, Qiita, Tech Blog等)

  • ⚡ Tech Stack - スキルセット(カラフルなCalloutで表示)

  • 📝 Tech Articles - 記事データベース

学び

  • Notion API でページ・データベースの作成、ブロックの追加が可能

  • ビュー設定(ギャラリー/テーブル等)は API からは変更不可、UI側で設定

  • Claude Code Skills は ~/.claude/skills/ に Markdown を配置するだけで使える

  • 機密情報のマスキングルールを定義しておくと、安心して記事化できる

📌
次回: データベースのビュー設定(ギャラリービュー)、最新記事セクションの追加