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
→ ファイルが更新されている ✅
公開ページ
→ ヘッダーが緑色になっている ✅
→ メッセージ文が修正されている ✅
反映完了！
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で動きを追加）に向けた準備を進めていきます。
コメント