【 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

使用軟體

• Git
• macOS 使用【 終端機 】
  • 開啟方式
    • 【 前往 】➙【 應用程式 】➙【 工具程式 】➙【 終端機 】
• Visual Studio Code
• Google Chrome 網路瀏覽器

Linux 指令

建立 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 】 

Step 6. GitHub 上相對應的 Repository

GitHub

• ArcherHuang @ GitHub

List of blogs

• https://oranwind.org/author/archer/
• https://learningsky.io/author/archer/