跟著 app.js 從普通檔案變成 GitHub 上的第一個版本。七個步驟，每一步都看清楚檔案和 commit 在哪裡。Follow app.js as it becomes the first version on GitHub. Seven steps show exactly where the file and commit are at each point.
預計時間Estimated time
10–15 分鐘10–15 minutes
這單元會看到You will see
7 個狀態7 states
需要先會Prerequisite
不需要None
Git 不是一顆「儲存」按鈕
你在編輯器按下儲存，改變的是 Working Directory；執行 git add，Git 才會把目前內容的快照放進 Staging Area；執行 git commit，快照才會成為 Local Repository 裡的一個正式版本。
Saving in your editor changes the Working Directory. git add puts a snapshot into the Staging Area, and git commit turns that snapshot into an official version in the Local Repository.
git push is a separate action: it sends an existing commit to GitHub; it does not create the commit for you.
This unit does not ask you to memorise commands yet. Watch where the orange outline moves, then notice when the first node appears in the Git tree.
INTERACTIVE WALKTHROUGH
跟著一個檔案走完整段旅程
STEP 1 / 7
步驟 1 · 動作：建立 app.js
先建立一個檔案
觀察 Git 介入以前，檔案只存在工作目錄。
教學模擬器 · 不會執行真實指令
$# 在編輯器中建立或修改檔案
app.js 已出現在專案資料夾。
目前還不是 Git repository。
Auntracked
工作目錄
Working Directory
你正在編輯的實際檔案
app.js新檔案，Git 尚未追蹤
●這一步看這裡
B尚未暫存
暫存區
Staging Area
下一次 commit 準備收錄的快照
目前沒有 staged 檔案
C尚無版本
本機版本庫
Local Repository
保存在這台電腦的版本歷史
目前沒有 commit
D尚未連接
遠端版本庫
Remote Repository
GitHub 上可與別人共享的版本
目前沒有 remote
GIT TREE
尚未建立 Git repositoryNo Git repository yet
執行 git init 後，main 與 HEAD 才會出現在這裡。Run git init before main and HEAD can appear here.
TAKEAWAY
只要記住這四句Remember these four lines
存檔只改 Working Directory。Saving changes only the Working Directory.
git add 挑選下一版的快照。git add selects the snapshot for the next version.
git commit 在本機建立正式版本。git commit creates an official version locally.
git push 才把版本分享至 GitHub。git push shares the version with GitHub.
下一單元會先完成 Windows 與 macOS 的 Git 安裝，再真正打開 Terminal 操作。The next unit installs Git on Windows and macOS before you open a Terminal and practise for real.
免責聲明：本站內容為個人學習、實作與經驗分享紀錄，部分內容透過 AI 協助修正與整理。由於每位使用者的系統環境、軟體版本、權限設定與操作方式不同，實際結果可能有所差異。請在操作前自行評估風險並備份重要資料。因參考本站內容所造成之任何系統異常、資料遺失、設定錯誤、設備故障、服務中斷或其他直接、間接損失，均由使用者自行承擔，本站與作者不負任何相關責任。
Disclaimer: This site records personal learning, implementation, and experience sharing, with some content edited and organised with AI assistance. Results may differ because every user has a different system environment, software version, permission setup, and workflow. Assess risks and back up important data before trying anything. You are responsible for any system errors, data loss, configuration mistakes, equipment faults, service interruptions, or other direct or indirect losses resulting from using this content.