【 DevOps 】透過 Visual Studio Code 進行 Clone 與 Push 操作 - macOS
內容
- 學習目標
- 前置準備作業
- 使用軟體
- Linux 指令
- 建立 Repository 與 Push 的使用方式
學習目標
- 在 GitHub 上建立 Repository
- 透過指令模式將 GitHub 上 Repository Clone 到本地端的電腦
- 透過【 Visual Studio Code】將本地端電腦的 Repository Push 到 GitHub 相對應的 Repository
前置準備作業
- 一台可上網的 macOS 電腦
- 已申請 GitHub 帳號
- 在電腦中安裝 Git
- macOS
- 安裝 Homebrew
- /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
- 安裝 Git
- brew install git
- 設定 Git 使用者名稱和信箱
- git config --global user.name "你的 name"
- git config --global user.email "你的 email"
- 查看設定
- git config --list
- 安裝 Homebrew
- macOS
使用軟體
- Git
- macOS 使用【 終端機 】
- 開啟方式
- 【 前往 】➙【 應用程式 】➙【 工具程式 】➙【 終端機 】
- 開啟方式
- Visual Studio Code
- Google Chrome 網路瀏覽器
Linux 指令
| 指令 | 功用 | 使用方式 | 例子 | 備註 |
|---|---|---|---|---|
| mkdir | 建立資料夾 | mkdir 資料夾名稱 ㊟ 在目前的路徑下建立此資料夾 | mkdir github | |
| pwd | 顯示目前所在位置的完整路徑 | pwd | pwd | |
| cd | 到特定資料夾中 | cd 資料夾名稱 | cd github 快速作法 在終端機中輸入【 cd 】後再將資料夾拉到 ㊟ cd 後面有一個空白 | 到上一層資料夾 cd .. |
| ls | 查看指定資料夾中有那些東西 | ls 資料夾名稱 | ls github | |
| clear | 清除畫面 | clear | clear |
建立 Repository 與 Push 的使用方式
Step 1. 透過瀏覽器開啟 GitHub 並登入
☆ 1.1 透過瀏覽器開啟 GitHub，GitHub 網址如下 https://github.com/ ☆ 1.2 登入 GitHub Step 2. 建立 Repository
☆ 2.1 點選上方的【 Repositories 】頁籤 ☆ 2.2 點選右方的【 New 】按鈕 ☆ 2.3 建立 Repository name 與 README ① 在【 Repository name 】欄位輸入想要的 Repository 名稱 ㊟ 名稱不能跟其它的 Repository 名稱相同 ㊟ 本例使用【 Project 】當範例 ② 勾選【 README 】欄位 ㊟ 為了之後撰寫此 Repository 的描述 ③ 點擊【 Create repository 】按鈕 Step 3. 建立完成 Repository 畫面
Step 4. Clone 剛建立的 Repository 到本地端的電腦
☆ 4.1 透過【 Visual Studio Code 】開啟本地端電腦所要存放 Repository 的資料夾 ① 在本地端電腦建立所要存放 Repository 的資料夾並透過【 Visual Studio Code 】開啟 ㊟ 本範例在本地端電腦的桌面建立【 github 】資料夾以存放 Repository -
切換路徑到桌面
-
使用指令
-
cd 桌面路徑
- ㊟ 指令說明請參閱 Linux 指令
-
-
在桌面建立【 github 】資料夾
-
使用指令
-
mkdir github
- ㊟ 指令說明請參閱 Linux 指令
-
-
-
-
切換路徑到【 github 】資料夾
-
使用指令
-
cd github
- ㊟ 指令說明請參閱 Linux 指令
-
-
-
透過【 Visual Studio Code 】開啟【 github 】資料夾
-
使用指令
- code .
- 開啟 Visual Studio Code 畫面
-
☆ 4.2 將的 Github 上的 Repository Clone 到步驟【 4.1 】所建立的資料夾中 ① 到 Github 剛才所建立的 Repository 中點選右邊的【 Clone or download 】按鈕 ② 點選右邊的複製按鈕 ③ 回到步驟【 4.1 】的【 Visual Studio Code 】畫面中並開啟【 TERMINAL 】 ㊟ 請按快速鍵開啟 【 control 】+【 ` 】 - 開啟【 TERMINAL 】後的畫面
④ 在【 Visual Studio Code 】中的【 TERMINAL 】輸入以下指令 git clone 步驟【 4.2 】之 ② 所複製的路徑 例: 本範例為 git clone https://github.com/ArcherHuang/Project.git - 執行指令
- 指令執行完成畫面
- 本地端資料夾中已存在 Github 上的 Repository 相關檔案
Step 5. 將本地端資料夾中檔案 Push 到 Github 上的相對應 Repository 中
☆ 5.1 在本地端資料夾中放置一些檔案如下圖所示 ☆ 5.2 點選【 Visual Studio Code 】左邊的【 Source Control 】按鈕 ☆ 5.3 點選【 CHANGES 】欄位右邊的【 + 】按鈕 ㊟ 把目前當下這個目錄以及它的子目錄、子子目錄、子子子目錄 ...... 裡的異動全部加到暫存區 - 點選【 + 】按鈕前
- 點選【 + 】按鈕後
☆ 5.4 輸入此次變更的 Message 並點選上方【 SOURCE CONTROL: GIT 】右邊的勾勾 ㊟ Message 是指要要說明「在這次的 Commit 做了什麼事」，只要使用簡單、清楚的文字說明就好， 中、英文都可, 目的是為了讓別人或下個星期的自己看的懂 ...... - 輸入此次變更的 Message並點選上方【 SOURCE CONTROL:GIT 】右邊的勾勾
- 指令執行完成
❖ 5.5 將檔案 push 到 Github 上的相對應 Repository ㊟ 點選上方【 SOURCE CONTROL: GIT 】右邊的【 ... 】中的【 push 】