前兩篇文章已經學會了Git的基本命令與建立倉庫的命令，點選連結檢視上一篇文章：【Git、GitHub、GitLab】二 Git基本命令之建立Git倉庫，本篇文章就來建立一個有模有樣的倉庫。該倉庫中的程式碼是一個顯示靜態頁面的小工程程式碼。

文章目錄

• 0 本文所使用的原始碼下載
• 1 git的幾個區域
• 2 整體提交過程
• 3 向倉庫中新增檔案
• 4 總結

0 本文所使用的原始碼下載

本專案原始碼點選下載

1 git的幾個區域

下圖是git的幾個區域：

• 工作目錄就是我們建立好git倉庫後，進入到的目錄
• 暫存區就是將需要新增的檔案暫時存放的區域，使用命令git add files可以將檔案files加到暫存區。
• 然後就可以使用git commit命令，將暫存區中的檔案真正的新增到我們當前所在的倉庫。

2 整體提交過程

本專案中，使用4次提交，一個有模有樣的靜態頁面就生成了。4次提交分別是下面的4次提交;

1. 加入index.html和git-logo
2. 加入style.css
3. 加入script.js
4. 修改index.html和style.css

完成上述四個步驟後，就會生成一個有模有樣的靜態頁面了。

3 向倉庫中新增檔案

我們可以使用下面的命令依次向我們的倉庫中新增檔案，一點一點完善這個倉庫的專案程式碼。

先將上面下載的檔案解壓，下面會用到該檔案裡面存的檔案

• 新增readme檔案到倉庫

1. 先將readme拷貝到工作目錄，使用命令git add readme 將檔案readme新增到暫存區
2. 然後使用git commit -m’add readme’ 將暫存區中的檔案（也就是readme新增到倉庫）。-m後面是寫的本次提交的一些資訊，可以自己定義
3. 提交後可以使用git log命令檢視之前的一些提交記錄。此時檢視的話就只能看到一個一次記錄，就是本次的提交記錄

• 新增index.html和git-logo

4. git add index.html images
5. git status 可以檢視當前的狀態，此時檔案還在暫存區
6. git comit -m’add index+logo’

• 加入style.css與script.js，步驟與上面類似。自己動手實現即可
• 最後可以在我們的靜態頁面上加一個參考文獻，那麼修改index.html與style.css即可。具體修改方法如下：

index.html 檔案中增加的程式碼

<footer>
        <p>
            <a href="https://github.com/TTN-js/unforGITtable"> 參考專案 01</a> 
        </p>
</footer>

style.css檔案中增加的程式碼

footer{
  right: 0;
  bottom: 0;
  position: relative;
  padding: 10px 1rem 10px 0;
  margin-top: 50px;
  font-size: 0.7em;
  text-align: right;
}

footer p{
  margin-bottom:0;
}

當修改了倉庫中已經存在的檔案的內容的時候，只需要使用git add -u，這樣可以直接將所有更改的檔案更新，而不需要重新將檔案加到暫存區。

然後最終我們的倉庫中的內容大致如下：

開啟index.html，我們的介面是如下的動態圖形式：

4 總結

本節內容主要是學會以下三個命令的作用

• git add files
• git status
• git commit -m’…’
• git add -u

理解了上述三個命令，就是本文的主目標。一定要自己動手做實驗，才能感受到。