mcpField
W
web-deploy-github

web-deploy-github

github.com/cjhfffクラウド・DevOps143 回インストール37 週間前に更新
リポジトリ

web-deploy-github について

静的ウェブサイトを作成して GitHub Pages にデプロイするスキルです。ポートフォリオやランディングページなどの単一ページサイト向けに、プロジェクト初期化と GitHub Actions によるデプロイ手順、HTML・CSS・JavaScript のテンプレートを提供します。

主な機能

  1. 01ウェブサイトのプロジェクト構成を初期化
  2. 02ポートフォリオとランディングページのテンプレート
  3. 03GitHub リポジトリと Pages の設定
  4. 04GitHub Actions によるプッシュ後のデプロイ
  5. 05レスポンシブ設計とパフォーマンスの指針

活用シーン

  1. 01ポートフォリオや履歴書サイトの作成
  2. 02アプリのランディングページ制作
  3. 03GitHub Pages で静的サイトを公開

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/cjhfff/cjh-skills --skill web-deploy-github

インストール後、Claude Code で/web-deploy-githubを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

_meta.json
.clawhub/
origin.json
assets/templates/base-html/
index.html
script.js
styles.css
assets/templates/landing/
index.html
script.js
styles.css
assets/templates/portfolio/
index.html
script.js
styles.css
references/
design-patterns.md
workflow.md
scripts/
deploy_github_pages.sh
init_project.sh

詳細

Web Deploy GitHub Pages

概要

このスキルを使うと、静的ウェブサイトを自律的に作成し、GitHub Pages にデプロイできます。プロジェクト構成の初期化から GitHub Actions による自動デプロイまでの完全なワークフローに沿っており、シングルページアプリケーション、ポートフォリオ、ランディングページに最適化されています。

コアワークフロー

1. プロジェクトの初期化

プロジェクト構成を作成します。

bash scripts/init_project.sh <project-name>

以下が作成されます。

project-name/
├── index.html
├── styles.css
├── script.js
├── README.md
└── .github/
    └── workflows/
        └── deploy.yml
2. 開発

次の原則に沿ってウェブサイトを構築します。

  • シングルページを優先：複数ページが明示的に必要とされていない限り、1 ページのレイアウトに最適化します
  • 自律的な生成：プレースホルダーを使わず、完全で本番環境に対応したコードを生成します
  • モダンなデザイン：最新の CSS（flexbox、grid）、レスポンシブデザイン、洗練された見た目を採用します
  • 依存関係なし：可能な限り純粋な HTML/CSS/JS を使用し、フレームワークが必要な場合は CDN リンクを使います

assets/templates/ のテンプレートを出発点として使用します。

  • base-html/ - 最小限の HTML5 ボイラープレート
  • portfolio/ - セクション付きのポートフォリオ／履歴書テンプレート
  • landing/ - ヒーローセクションと CTA を含むランディングページ
3. GitHub リポジトリのセットアップ
bash scripts/deploy_github_pages.sh <project-name> <github-username>

このスクリプトは次の処理を行います。

  1. git リポジトリを初期化します
  2. GitHub CLI を使って GitHub リポジトリを作成します
  3. GitHub Pages の設定を行います
  4. 最初のコミットをプッシュします
  5. 初回デプロイを開始します
4. デプロイ

GitHub Actions は、main ブランチへのプッシュ時に自動的にデプロイします。このワークフローでは、次の処理が行われます。

  • コードをチェックアウトします
  • gh-pages ブランチにデプロイします
  • https://<username>.github.io/<project-name>/ でサイトを公開します

アーキテクチャのガイドライン

HTML 構造
  • セマンティックな HTML5 要素
  • SEO とソーシャル共有用のメタタグ
  • レスポンシブなビューポート設定
  • ファビコンとアイコン
CSS デザイン
  • モバイルファーストのレスポンシブデザイン
  • テーマ設定用の CSS 変数
  • レイアウトに Flexbox/Grid を使用
  • 滑らかなトランジションとアニメーション
  • 適切な場合はダークモードに対応
JavaScript
  • Vanilla JS を推奨
  • プログレッシブエンハンスメント
  • イベントデリゲーション
  • コンソールエラーなし
パフォーマンス
  • 画像を最適化
  • 本番環境向けにアセットを圧縮
  • 適切な場合は遅延読み込み
  • 初回読み込みを高速化

簡単な使用例

例 1：ポートフォリオ・履歴書サイト

ユーザーの依頼：「ポートフォリオ・履歴書サイトを作って」

操作：

  1. init_project.sh portfolio-cv を実行します
  2. assets/templates/portfolio/ をベースとして使用します
  3. Hero、About、Skills、Projects、Contact の各セクションを含む完全な HTML を生成します
  4. deploy_github_pages.sh portfolio-cv username でデプロイします
例 2：ランディングページ

ユーザーの依頼：「自分のアプリのランディングページを作って」

操作：

  1. init_project.sh app-landing を実行します
  2. assets/templates/landing/ をベースとして使用します
  3. Hero、Features、Pricing、CTA を含めて生成します
  4. deploy_github_pages.sh app-landing username でデプロイします

トラブルシューティング

GitHub Pages がデプロイされない
  • リポジトリの Settings → Pages → Source が gh-pages ブランチに設定されていることを確認します
  • GitHub Actions のワークフローが正常に実行されたことを確認します
  • DNS の伝播状況を確認します（5〜10 分かかる場合があります）
権限エラー
  • gh CLI が認証済みであることを確認します：gh auth status
  • GitHub でリポジトリの権限を確認します
ビルドの失敗
  • リポジトリの Actions ログを確認します
  • .github/workflows/deploy.yml の構文を確認します
  • ファイルパスと参照を確認します

リソース

scripts/
  • init_project.sh - プロジェクト構成を初期化します
  • deploy_github_pages.sh - GitHub Pages にデプロイします
references/
  • workflow.md - ワークフローの詳細なドキュメント
  • design-patterns.md - デザインのベストプラクティス
assets/
  • templates/base-html/ - 最小限の HTML5 ボイラープレート
  • templates/portfolio/ - ポートフォリオ／履歴書テンプレート
  • templates/landing/ - ランディングページテンプレート
  • .github/workflows/deploy.yml - GitHub Actions ワークフローテンプレート

コメント

Markdown 対応