前两篇文章已经学会了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

理解了上述三个命令，就是本文的主目标。一定要自己动手做实验，才能感受到。