見出し画像

Genspark AIブラウザでGitHub MCPサーバーを接続してポートフォリオサイトを作成した完全ガイド

hantani

はじめに

AI時代の創作研究者として、自分のポートフォリオサイトを作りたいと思い、Genspark AIブラウザの新機能「GitHub MCP（Model Context Protocol）サーバー」を使って、AIデベロッパーとGitHubを連携させてみました。

結果として、わずか数時間で以下のような本格的なポートフォリオサイトが完成しました： 👉 完成サイト: https://garyohosu.github.io/portfolio/

この記事では、GitHub MCP接続からポートフォリオサイト公開までの全過程を詳しく解説します。

目次

  1. GitHub MCPサーバーとは？

  2. GitHub MCPサーバーの接続方法

  3. AIデベロッパーでポートフォリオサイトを作成

  4. GitHubへのデプロイとGitHub Pages公開

  5. 完成したサイトの機能紹介

  6. まとめと今後の展望

1. GitHub MCPサーバーとは？

MCP（Model Context Protocol） は、AIがさまざまな外部サービスと連携するためのプロトコルです。Genspark AIブラウザでは、GitHub MCPサーバーを接続することで、AIが直接GitHubリポジトリを操作できるようになります。

できること

  • ✅ リポジトリの作成・管理

  • ✅ ファイルの読み書き

  • ✅ Issue・Pull Requestの管理

  • ✅ ブランチ操作

  • ✅ コミット履歴の確認

  • ✅ コードレビューのサポート

2. GitHub MCPサーバーの接続方法

手順1: GitHub Personal Access Tokenの取得

  1. GitHubにログインして、以下のURLにアクセス： https://github.com/settings/tokens

  2. **「Generate new token (classic)」**をクリック

  3. トークンの設定：

    • Note: genspark-mcp（任意の名前）

    • Expiration: 90 daysまたはNo expiration

    • スコープ：以下にチェック

      • ✅ repo（全て）

      • ✅ workflow

      • ✅ write:packages

      • ✅ read:packages

      • ✅ delete:packages

  4. **「Generate token」**をクリックし、表示されたトークン（ghp_で始まる文字列）をコピー

⚠️ 重要: トークンは一度しか表示されないので、必ず安全な場所に保存してください。

手順2: Genspark AIブラウザにMCPサーバーを追加

  1. Genspark AIブラウザの下部にあるスパナアイコンをクリック

  2. 「追加」 → **「新しいMCPサーバー追加」**を選択

  3. 以下の情報を入力：

    1. サーバー名: github サーバータイプ: Streamable HTTP サーバーURL: https://api.githubcopilot.com/mcp/

  4. リクエストヘッダーに以下を入力：

    1. Copy{"Authorization": "Bearer ghp_あなたのトークン"}

    2. （ghp_の部分を先ほどコピーしたトークンに置き換える）

  5. **「保存」**をクリック

接続確認

チャットで「GitHubのリポジトリを確認して」と聞くと、AIがあなたのリポジトリ一覧を取得できれば成功です！

3. AIデベロッパーでポートフォリオサイトを作成

GitHub MCPが接続できたら、次はAIデベロッパー機能でポートフォリオサイトを作成します。

ポートフォリオサイト作成の流れ

ステップ1: GitHubリポジトリの作成

AIに以下のように依頼：

GitHubにリポジトリ「portfolio」をパブリックで追加して

AIがGitHub MCP経由で自動的にリポジトリを作成してくれます。

ステップ2: AIデベロッパーでサイトをデザイン

Genspark AIブラウザの下部メニュー → 「AIデベロッパー」 → **「Simple Website or Web App」**を選択し、以下のプロンプトを入力：

AI時代の創作研究者のポートフォリオサイトを作って。

【プロフィールセクション】
- 名前：hantani（Hantani Sadahiko）
- 肩書き：AI時代の創作研究者・技術系ライター・元組み込みプログラマー
- 拠点：広島県
- 専門：Creative Vibe Writing（CVW）研究

【スキルセクション】
- AI開発ツール（Gemini CLI、Cline MCP、Cursor、Difyワークフロー）
- 技術ライティング
- CVW（人間とAIの協働創作手法）
- 組み込みプログラミング

【実績セクション】
- 総フォロワー：24,000人以上
- 活動プラットフォーム：note、X、Quora、GitHub
- CVW手法の先駆的研究者

【執筆活動・SNSセクション】
各プラットフォームへのリンクボタンを配置：
- note：https://note.com/hantani
- X（Twitter）：https://x.com/garyo
- Quora：https://jp.quora.com/profile/Hantani-Sadahiko
- GitHub：https://github.com/garyohosu

【デザイン要望】
- モダンで清潔感のあるデザイン
- 技術系らしい洗練された配色
- レスポンシブデザイン（スマホ・タブレット対応）
- 各SNSの公式アイコン付きリンクボタン
- ヒーローセクションに簡潔な自己紹介
- スクロールで各セクションに遷移するスムーズなレイアウト

ステップ3: サイトのカスタマイズ

生成されたサイトをプレビューで確認し、必要に応じて修正を依頼。AIが対話的に調整してくれます。

4. GitHubへのデプロイとGitHub Pages公開

方法1: AIドライブ経由でアップロード

  1. AIデベロッパーで生成されたコードをZIPでダウンロード

  2. AIドライブにアップロード

  3. AIに「AIドライブのZIPファイルをGitHubにアップロードして」と依頼

方法2: ローカル経由でアップロード（推奨）

今回私が実際に使った方法です：

  1. ダウンロード: AIデベロッパーから生成されたコードをZIPでダウンロード

  2. 解凍: ローカルで解凍

  3. Claude Code等のツールを使用: VS CodeやClaude Codeなどで以下のコマンドを実行

Copygit init
git remote add origin https://github.com/garyohosu/portfolio.git
git add .
git commit -m "Initial commit: Portfolio website"
git push -u origin main

GitHub Pagesの有効化

  1. GitHubリポジトリページを開く

  2. Settings → Pages

  3. Source: main branch を選択

  4. Save

数分待つと、https://ユーザー名.github.io/portfolio/ でサイトが公開されます！

5. 完成したサイトの機能紹介

主な機能

  • ✅ レスポンシブデザイン: スマホ・タブレット・デスクトップに完全対応

  • ✅ ヒーローセクション: 印象的なグラデーション背景とアニメーション

  • ✅ プロフィールセクション: 詳細な自己紹介と専門分野の紹介

  • ✅ スキルセクション: 4つの主要スキルカテゴリの表示

  • ✅ 実績セクション: 統計データと主要な成果の表示

  • ✅ 執筆活動・SNSセクション: note、X、Quora、GitHubへのリンク

  • ✅ スムーズスクロール: セクション間のナビゲーション

  • ✅ ハンバーガーメニュー: モバイル対応のナビゲーション

  • ✅ スクロールアニメーション: 要素の表示時のフェードインアニメーション

  • ✅ カードホバーエフェクト: 3Dパララックス効果

  • ✅ 数字カウントアップアニメーション: 実績セクションの統計表示

使用技術

  • HTML5: セマンティックなマークアップ

  • CSS3: モダンなスタイリング（Grid, Flexbox, Animations）

  • JavaScript (ES6+): インタラクティブ機能

  • Google Fonts: Noto Sans JP, Roboto Mono

  • Font Awesome 6.4.0: アイコンライブラリ

デザインの特徴

  • カラーパレット: モダンな青とパープルのグラデーション

  • タイポグラフィ: 日本語と英数字で異なるフォントを使用

  • アニメーション: スムーズなトランジションとホバーエフェクト

  • レイアウト: CSS Grid + Flexboxによる柔軟なレスポンシブデザイン

6. まとめと今後の展望

この方法の利点

  1. コードを書かずにサイト作成: AIがHTML/CSS/JavaScriptを生成

  2. GitHubとの完全連携: MCP経由で直接リポジトリ操作

  3. 迅速なデプロイ: 数時間で本格的なサイトが完成

  4. バージョン管理: Gitでコード管理が可能

  5. 無料ホスティング: GitHub Pagesで無料公開

今後の拡張案

  • ❌ ブログセクション: 最新記事の表示

  • ❌ プロジェクトギャラリー: 主要プロジェクトの紹介

  • ❌ お問い合わせフォーム: コンタクト機能

  • ❌ ダークモード: テーマ切り替え機能

  • ❌ 多言語対応: 英語版の追加

  • ❌ SEO最適化: メタタグやOGP設定

学んだこと

  1. GitHub MCP: AIによるGitHub操作の可能性

  2. AIデベロッパー: プロンプトエンジニアリングの重要性

  3. ワークフロー効率化: AI×Git×ホスティングの連携

  4. CVWの実践: 人間とAIの協働創作手法

参考リンク

おわりに

Genspark AIブラウザのGitHub MCP機能を使うことで、コーディング経験が少ない方でも、プロフェッショナルなポートフォリオサイトを簡単に作成できることがわかりました。

AIとの協働により、デザインからデプロイまでをスムーズに行えるこの方法は、まさに Creative Vibe Writing（CVW） の実践例だと言えます。

皆さんもぜひ、この方法で自分だけのポートフォリオサイトを作ってみてください！

いいなと思ったら応援しよう！