系列課程主題 從零開始的網頁設計- HTML & CSS基礎建設 第六堂課 5/5 - 幸福快樂的完美結局

1. 幸福快樂的完美結局
LESSON 6

2. 1. Sublime Text
2. Git
3. Source Tree
請先安裝以下三個⼯工具
圖⽚片來源- github

3. 幸福快樂的完美結局
LESSON 6
1. 版本控制觀念
2. Git 基本教學
3. GitHub Pages實作

4. 什麼是版本控制？
圖⽚片來源
幫你記錄每⼀一次檔案變更
Version Control System

5. 你可以儲存不同版本的檔案，再讀取任何⼀一次版本紀錄
圖⽚片來源- ⼤大富翁
簡單的說...

6. 為什麼要使⽤用版本控制？
圖⽚片來源
可以管理個⼈人或團隊間的檔案紀錄

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

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

9. 團隊間使⽤用版本控制
圖⽚片來源 - 連猴⼦子都能懂的Git⼊入⾨門指南

10. 幸福快樂的完美結局
LESSON 6
1. 版本控制觀念
2. Git 基本教學
3. GitHub Pages實作

11. 圖⽚片來源

12. 透過數據庫來儲存版本狀態
圖⽚片來源
Repository
圖⽚片來源
在專案裡

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

14. 新增本地數據庫
MAC

15. 新增本地數據庫
MAC

16. 新增本地數據庫
MAC

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

18. 新增本地數據庫
Windows

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

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

21. 使⽤用git status 來查看數據庫狀態
圖⽚片來源 圖⽚片來源

22. Git屬於分散式管理
圖⽚片來源 - 連猴⼦子都能懂的Git⼊入⾨門指南

23. 新增遠端數據庫 點選New repository

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

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

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

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

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

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

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

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

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

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

34. git remote add test-remote https://github.com/AnnaSu/add-repo-demo.git
連結遠端數據庫（git remote add 名稱）
git remote
查看遠端儲存庫名稱
Command line

35. 加⼊入檔案
提交檔案
圖⽚片來源1
圖⽚片來源2
推送檔案
git push
①
②
③
④
git pull
更新檔案

36. 編輯檔案
執⾏行專案的過程中，我們可能不斷的新增或編輯檔案
在資料夾內新增 index.html 檔案
使⽤用git status 可以查看，⺫⽬目前專案的狀態
例如：

37. git add①
加⼊入檔案
圖⽚片來源- github

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

39. 將檔案加⼊入Repository
加⼊入檔案（git add 檔名）
MAC

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

41. 將檔案加⼊入Repository
加⼊入檔案（git add 檔名）
Windows

42. 將檔案加⼊入Repository
加⼊入檔案（git add 檔名）
Windows

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

44. 將檔案加⼊入Repository
指令輸⼊入 git add index.html
加⼊入檔案（git add 檔名）

45. git commit②
提交檔案
圖⽚片來源- github

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

47. 按下Commit 按鈕，將檔案加⼊入Repository
提交檔案（git commit -m “提交訊息”）
MAC

48. 輸⼊入提交訊息，再按下Commit 按鈕
提交檔案（git commit -m “提交訊息”）
MAC

49. 選擇要提交的branch
提交檔案（git commit -m “提交訊息”）
MAC

50. 完成提交，建⽴立第⼀一個版本
提交檔案（git commit -m “提交訊息”）
MAC

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

52. 提交檔案（git commit -m “提交訊息”）
Windows
按下Commit 按鈕，將檔案加⼊入Repository

53. 提交檔案（git commit -m “提交訊息”）
Windows
輸⼊入提交訊息，再按下Commit 按鈕

54. 提交檔案（git commit -m “提交訊息”）
Windows
完成提交，建⽴立第⼀一個版本

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

56. 將檔案加⼊入Repository
指令輸⼊入 git commit -m “create index.html”
提交檔案（git commit -m “提交訊息”）
git log
查看檔案

57. git pull③
更新檔案
圖⽚片來源- github
從遠端

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

59. 更新檔案 （git pull）
MAC
點選Pull 按鈕，即可從遠端數據庫更新檔案

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

61. Windows
點選Pull 按鈕，即可從遠端數據庫更新檔案
更新檔案 （git pull）

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

63. 從遠端數據庫更新檔案
指令輸⼊入 git pull
更新檔案 （git pull）
Command line

64. git push④
推送檔案
圖⽚片來源- github
到遠端

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

66. 推送檔案（git push）
MAC
點選Push 按鈕，即可上傳檔案到遠端數據庫

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

68. 推送檔案（git push）
點選Push 按鈕，即可上傳檔案到遠端數據庫
Windows

69. 推送檔案（git push）
點選Push 按鈕，即可上傳檔案到遠端數據庫
Windows

70. 推送檔案（git push）
上傳檔案到遠端數據庫處理中
Windows

71. 推送檔案（git push）
已上傳檔案到遠端數據庫
Windows

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

73. 上傳檔案到遠端儲存庫
指令輸⼊入 git push test-remote master
推送檔案（git push）
git fetch [remote-name]
從遠端儲存庫擷取或合併
Command line

74. 圖⽚片來源

75. git add① 加⼊入檔案
圖⽚片來源- github
git commit② 提交檔案
git pull③ 更新檔案
從遠端
git push④ 推送檔案
到遠端

76. 幸福快樂的完美結局
LESSON 6
1. 版本控制觀念
2. Git 基本教學
3. GitHub Pages實作

77. 圖⽚片來源

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

80. GitHub 帳戶申請教學與實作
LESSON 5 ( 番外篇 )

84. DEMO

85. 圖⽚片來源

86. 第六堂課 5/5 - 幸福快樂的完美結局
第五堂課 4/28 - 偷呷步的網站快速⼊入⾨門
第四堂課 4/21 - 調配網站的明星花露⽔水
第三堂課 4/14 - 搭載網⾴頁核⼼心的基本架構
第⼆二堂課 3/31 - 前端界流傳的神奇招式
第⼀一堂課 3/24 - 窺探網站建置的任意⾨門

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