【Phase 2初日 完全版】VS Codeで初めての修正とGitプッシュに成功

Phase 2初日、自己紹介ページの公開後、さらにVS Codeでの編集とGitHubへのプッシュに挑戦しました。初めての本格的な開発フローを体験した記録です。

午後の作業：VS Codeでページを改善

やったこと

1. VS Codeでファイルを開く

  • フォルダを開く → index.htmlとstyle.cssが表示される
  • 実際の開発環境でコードを見る

2. ヘッダーの色を変更

変更前（青系）：

background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);

変更後（緑系）：

background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);

3. 一言メッセージのテキスト修正

  • 違和感のあった表現を修正
  • index.htmlを直接編集

4. 保存してブラウザで確認

  • Ctrl+S（またはCmd+S）で保存
  • ブラウザでindex.htmlを開いて確認
  • ✅ 緑色に変更されている
  • ✅ テキストも修正されている

VS CodeからGitHubにプッシュ（本格的な開発フロー）

目標

修正したファイルをGitHubにアップロードして、公開ページにも反映させる。

手順

Step 1: Gitの初期化

git init
git remote add origin https://github.com/dondokoboy/profile.git
git branch -M main

リポジトリとの接続を確立。

Step 2: ユーザー情報の設定（初回のみ）

git config --global user.email "your-email@example.com"
git config --global user.name "Pacho"

Gitに「誰が変更したか」を教える。

この設定は一度だけ。次回からは不要。

Step 3: 変更をコミット

git add .
git commit -m "色を緑系に変更、メッセージ文を修正"

結果:

[main (root-commit) d97ec74] 色を緑系に変更、メッセージ文を修正
 2 files changed, 298 insertions(+)
 create mode 100644 index.html
 create mode 100644 style.css

✅ コミット成功

Step 4: VS CodeでGitHubを承認

git push -u origin main

実行すると、ブラウザで「Authorize Visual Studio Code」のページが開く。

→ 承認ボタンをクリック

VS CodeがGitHubにアクセスできるようになった。

Step 5: 強制プッシュ（コンフリクト解決）

初回はGitHubとローカルの歴史が異なるため、エラーが発生。

git rebase --abort
git push -u origin main --force

結果:

To https://github.com/dondokoboy/profile.git
 + e0a1941...d97ec74 main -> main (forced update)
branch 'main' set up to track 'origin/main'.

✅ プッシュ成功！

公開ページでの確認

GitHub

GitHub - dondokoboy/profile
Contribute to dondokoboy/profile development by creating an account on GitHub.
github.com

→ ファイルが更新されている ✅

公開ページ

パチョの自己紹介 | AI時代に営業職からエンジニアを目指す
dondokoboy.github.io

→ ヘッダーが緑色になっている ✅
→ メッセージ文が修正されている ✅

反映完了！

Phase 2初日で達成したこと

午前〜昼

✅ HTML/CSSで自己紹介ページ作成
✅ GitHub Pagesで公開
✅ 記事2本作成・投稿

午後〜夜

✅ VS Codeでファイル編集
✅ Gitの初期設定
✅ VS CodeからGitHubにプッシュ
✅ 公開ページに反映確認

学んだ本格的な開発フロー

1. VS Codeでコードを編集
   ↓
2. 保存してローカルで確認
   ↓
3. Git add（変更を記録対象に）
   ↓
4. Git commit（記録を作成）
   ↓
5. Git push（GitHubにアップロード）
   ↓
6. 公開ページに自動反映（1-5分）

これが実際の開発の流れ。

今回、すべての初期設定が完了したので、次回からはもっと簡単になります。

次回からの作業（たった3ステップ）

# ファイルを編集後

git add .
git commit -m "変更内容"
git push

これだけ！

Phase 2初日の成果

項目内容
作成物自己紹介ページ
使用技術HTML/CSS
開発環境VS Code
バージョン管理Git/GitHub
公開方法GitHub Pages
記事数3本
累計記事数54本（投稿後）

感想

初めての本格的な開発フローを体験しました。

難しかったこと

  • Gitのエラーメッセージの意味が分からなかった
  • コンフリクトの解決が複雑だった
  • コマンドを何度も実行する必要があった

良かったこと

  • VS Codeの便利さを実感した
  • 実際の開発フローを体験できた
  • エラーを解決する経験ができた
  • 次回からは簡単になることが分かった

実感したこと

「学習」と「実践」は全く違う。

Phase 1では、Progateで学んで記事を書くだけでした。

Phase 2では、実際にコードを書いて、エラーに遭遇して、解決して、公開する。

これが本物の開発だと実感しました。

Phase 2初日、完全完了。

明日からは、この経験を活かして、Week 2（JavaScriptで動きを追加）に向けた準備を進めていきます。

コメント