幸福快樂的完美結局

LESSON 6

1. Sublime Text

2. Git

3. Source Tree

請先安裝以下三個⼯工具

圖⽚片來源- github

幸福快樂的完美結局

LESSON 6

1. 版本控制觀念

2. Git 基本教學

3. GitHub Pages實作

什麼是版本控制？

圖⽚片來源

幫你記錄每⼀一次檔案變更

Version Control System

你可以儲存不同版本的檔案，再讀取任何⼀一次版本紀錄

圖⽚片來源- ⼤大富翁

簡單的說...

為什麼要使⽤用版本控制？

圖⽚片來源

可以管理個⼈人或團隊間的檔案紀錄

Before個⼈人檔案紀錄-使⽤用版本控制之前

After個⼈人檔案紀錄-使⽤用版本控制之後

團隊間使⽤用版本控制

圖⽚片來源 - 連猴⼦子都能懂的Git⼊入⾨門指南

幸福快樂的完美結局

LESSON 6

1. 版本控制觀念

2. Git 基本教學

3. GitHub Pages實作

圖⽚片來源

透過數據庫來儲存版本狀態

圖⽚片來源

Repository

圖⽚片來源

在專案裡

DEMO我們使⽤用Source Tree - 新增本地數據庫

MAC

新增本地數據庫MAC

新增本地數據庫MAC

新增本地數據庫MAC

DEMO我們使⽤用Source Tree - 新增本地數據庫

Windows

新增本地數據庫Windows

DEMO我們使⽤用Command line - 新增本地數據庫

Command line

使⽤用git init 來建⽴立數據庫

使⽤用git status 來查看數據庫狀態

圖⽚片來源 圖⽚片來源

Git屬於分散式管理

圖⽚片來源 - 連猴⼦子都能懂的Git⼊入⾨門指南

新增遠端數據庫 點選New repository

新增遠端數據庫 編輯 repository 資料

新增遠端數據庫 連結遠端repo的⽅方法

DEMO我們使⽤用Source Tree - 連結遠端數據庫

MAC

連結遠端數據庫 連結遠端repo的⽅方法

MAC

連結遠端數據庫 連結遠端repo的⽅方法

MAC

DEMO我們使⽤用Source Tree - 連結遠端數據庫

Windows

連結遠端數據庫 連結遠端repo的⽅方法

Windows

連結遠端數據庫 連結遠端repo的⽅方法

Windows

連結遠端數據庫 連結遠端repo的⽅方法

Windows

DEMO我們使⽤用Command line - 連結遠端數據庫

Command line

git remote add test-remote https://github.com/AnnaSu/add-repo-demo.git

連結遠端數據庫（git remote add 名稱）

git remote查看遠端儲存庫名稱

Command line

加⼊入檔案

提交檔案

圖⽚片來源1

圖⽚片來源2

推送檔案

git push

①

②

③④git pull

更新檔案

編輯檔案執⾏行專案的過程中，我們可能不斷的新增或編輯檔案

在資料夾內新增 index.html 檔案

使⽤用git status 可以查看，⺫⽬目前專案的狀態

例如：

git add①

加⼊入檔案

圖⽚片來源- github

DEMO我們使⽤用Source Tree - 加⼊入檔案到staging area

MAC

將檔案加⼊入Repository

加⼊入檔案（git add 檔名）MAC

DEMO我們使⽤用Source Tree - 加⼊入檔案到staging area

Windows

將檔案加⼊入Repository

加⼊入檔案（git add 檔名）Windows

將檔案加⼊入Repository

加⼊入檔案（git add 檔名）Windows

DEMO我們使⽤用Command line - 加⼊入檔案到staging area

Command line

將檔案加⼊入Repository

指令輸⼊入 git add index.html

加⼊入檔案（git add 檔名）

git commit②提交檔案

圖⽚片來源- github

DEMO我們使⽤用Source Tree - 提交檔案到repository

MAC

按下Commit 按鈕，將檔案加⼊入Repository

提交檔案（git commit -m “提交訊息”）

MAC

輸⼊入提交訊息，再按下Commit 按鈕

提交檔案（git commit -m “提交訊息”）

MAC

選擇要提交的branch

提交檔案（git commit -m “提交訊息”）

MAC

完成提交，建⽴立第⼀一個版本

提交檔案（git commit -m “提交訊息”）

MAC

DEMO我們使⽤用Source Tree - 提交檔案到repository

Windows

提交檔案（git commit -m “提交訊息”）

Windows

按下Commit 按鈕，將檔案加⼊入Repository

提交檔案（git commit -m “提交訊息”）

Windows

輸⼊入提交訊息，再按下Commit 按鈕

提交檔案（git commit -m “提交訊息”）

Windows

完成提交，建⽴立第⼀一個版本

DEMO我們使⽤用Command line - 提交檔案到repository

Command line

將檔案加⼊入Repository

指令輸⼊入 git commit -m “create index.html”

提交檔案（git commit -m “提交訊息”）

git log查看檔案

git pull③

更新檔案

圖⽚片來源- github

從遠端

DEMO我們使⽤用Source Tree - 從遠端更新檔案

MAC

更新檔案 （git pull）

MAC

點選Pull 按鈕，即可從遠端數據庫更新檔案

DEMO我們使⽤用Source Tree - 從遠端更新檔案

Windows

Windows

點選Pull 按鈕，即可從遠端數據庫更新檔案

更新檔案 （git pull）

DEMO我們使⽤用Command line - 從遠端更新檔案

Command line

從遠端數據庫更新檔案

指令輸⼊入 git pull

更新檔案 （git pull）

Command line

git push④

推送檔案

圖⽚片來源- github

到遠端

DEMO我們使⽤用Source Tree - 推送檔案到遠端

MAC

推送檔案（git push）MAC

點選Push 按鈕，即可上傳檔案到遠端數據庫

DEMO我們使⽤用Source Tree - 推送檔案到遠端

Windows

推送檔案（git push）

點選Push 按鈕，即可上傳檔案到遠端數據庫

Windows

推送檔案（git push）

點選Push 按鈕，即可上傳檔案到遠端數據庫

Windows

推送檔案（git push）

上傳檔案到遠端數據庫處理中

Windows

推送檔案（git push）

已上傳檔案到遠端數據庫

Windows

DEMO我們使⽤用Command line - 推送檔案到遠端

Command line

上傳檔案到遠端儲存庫

指令輸⼊入 git push test-remote master

推送檔案（git push）

git fetch [remote-name]

從遠端儲存庫擷取或合併

Command line

圖⽚片來源

git add① 加⼊入檔案

圖⽚片來源- github

git commit② 提交檔案

git pull③ 更新檔案從遠端

git push④ 推送檔案到遠端

幸福快樂的完美結局

LESSON 6

1. 版本控制觀念 2. Git 基本教學

3. GitHub Pages實作

圖⽚片來源

GitHub 是⺫⽬目前全世界最多⼈人採⽤用的 Git 線上管理平台， 包含完整的議題追蹤機制，更有成千上萬的開源碼專案都在 GitHub 進⾏行 Git 版本控管。

GitHub 帳戶申請教學與實作

LESSON 5 ( 番外篇 )

https://pages.github.com/

DEMO

圖⽚片來源

第六堂課 5/5 - 幸福快樂的完美結局

第五堂課 4/28 - 偷呷步的網站快速⼊入⾨門

第四堂課 4/21 - 調配網站的明星花露⽔水

第三堂課 4/14 - 搭載網⾴頁核⼼心的基本架構

第⼆二堂課 3/31 - 前端界流傳的神奇招式

第⼀一堂課 3/24 - 窺探網站建置的任意⾨門

https://www.youtube.com/watch?v=hq0h5AEkPzw

分享結束，很高興認識大家 ，謝謝：）