[GitHub] GitHub初回デプロイの手順

概要

• GitHub に初回デプロイ する手順を解説
• .gitignore や README.md の整備、Gitリポジトリ初期化、リモート接続、docker-compose 開発環境までカバー
• GitHub CLI / Web の両パターンでのリポジトリ作成に対応

実施条件

• GitHubアカウントを所持していること
• Git / GitHub CLI / Node.js が利用可能な環境であること
  （今回は React / Storybook / Docker で構築されたプロジェクトを使用）

参考リンク
GitHub CLI インストールガイド
.gitignoreテンプレート

環境

ツール	バージョン	用途
Git	任意	ソースコードのバージョン管理
GitHub CLI	2.52	GitHubリポジトリの作成やPushに使用
Node.js	22.5.1	アプリの依存解決やビルド
Docker	28.1.1	コンテナ型開発環境

Phase 1: プロジェクトの準備

.gitignore ファイルを確認

• node_modules/ や .env、dist/ などを除外する設定を確認
• 参考: Node.gitignore

README.md を作成

• プロジェクト名、概要、使用技術、起動方法などを記述しておく

Phase 2: Gitリポジトリ(ローカルリポジトリ)の初期化

以下のコマンドを順番に実行：

# 1. プロジェクトルートに移動（`docker-compose.yml`や`README.md`のある階層）
cd /Users/xxx/xxx/storybook-docker 

# 2. Gitリポジトリ(ローカルリポジトリ)を初期化
# → Gitリポジトリ(ローカルリポジトリ)がクライアントに作成される
git init

# 3. デフォルトブランチをmainに変更
git branch -M main

# 4. すべてのファイルをステージング
git add .

# 5. 初回コミット
git commit -m "🎉 Initial commit: React Storybook UI Components with i18n support

- Add Atomic Design structure (atoms/molecules/organisms)
- Implement i18n support (Japanese/English)
- Add Docker environment setup
- Create Storybook configuration
- Implement core components:
  - Button, InputField, Checkbox
  - Description, Label, Title
  - LoginForm, SearchForm
  - Header component"

Phase 3: GitHubリポジトリの作成

Option A: GitHub CLIを使用（推奨）

# GitHub CLIをインストール（まだの場合）
brew install gh

# GitHubにログイン
gh auth login

# リポジトリを作成してプッシュ
gh repo create storybook-docker \
  --private \
  --description "React Storybook UI Components with i18n support and Atomic Design" \
  --source=. \
  --remote=origin \
  --push

Option B: GitHub Webサイトを使用

1. https://github.com にアクセス

2. 右上の ＋ → 「New repository」

3. 入力項目：

   • Repository name: storybook-docker
   • Description: React Storybook UI Components with i18n support and Atomic Design
   • Private を選択
   • Create repository をクリック

4. 作成後、以下のコマンドを実行：

   # リモートリポジトリを追加
   git remote add origin https://github.com/YOUR_USERNAME/storybook-docker.git
   
   # GitHubにプッシュ
   git push -u origin main
   

完了後の確認事項

• GitHubリポジトリが存在する
  → https://github.com/YOUR_USERNAME/storybook-docker
• コードが正常にプッシュされている
• README.mdが表示されている
• 開発環境が起動することを確認：

  docker-compose up --build
  

トラブルシューティング

トラブル内容	対処法
.env や node_modules を誤ってPush	.gitignoreに追加し、git rm --cachedで除外
リモートURLを間違えた	git remote set-url origin https://github.com/...

コマンドまとめ

# === プロジェクトルートに移動 ===
cd /Users/xxx/xxx/storybook-docker

# === Git初期化 ===
git init
git branch -M main
git add .
git commit -m "🎉 Initial commit: React Storybook UI Components with i18n support"

# === GitHub CLIを使用する場合 ===
gh repo create storybook-docker --private --source=. --remote=origin --push

# === 手動でリモート追加する場合 ===
git remote add origin https://github.com/YOUR_USERNAME/storybook-docker.git
git push -u origin main

参考リンク

• GitHub CLI インストール
• Storybook公式ドキュメント
• Docker Compose Docs
• [Storybook][React][TypeScript] Storybookの導入手順
• [Docker][Storybook] DockerでStorybookを起動する
• [GitHub] GitHub CLI をインストールする