把html文件放到桌面做防伪,把自己的静态网页放到网上

前言

相信大部分同学此时的进度已经到达HTML/CSS阶段了。这个阶段我们会实现很多的网页，但是它们都只能在我们自己的电脑里查看，你想不想把它放到网络上让别人去看呢？

如果你也想把自己的网站放到网络上，就继续看吧。

可以试点击这里打开一个我写的网页(我的网站使用了一些字体，文件稍微有些大，加载可能会慢一些 )

步骤一：注册gitee(码云)账号(已经有的同学可以跳过)

这一步比较简单，就是在码云上注册自己的账号。但是要注意的是，你需要绑定自己的手机号，不然是不能使用 Gitee Pages 服务的，而这个服务是我们将自己的网页放到网络上最重要的一步。

可能有些同学对码云了解的较少，但是对GitHub了解的或许多一些。两者的本着都是一样的，都是将自己的代码放到网络上去(可以公开，只要是公开的代码都不收费)然后进行团队协作开发，或者将其作为开源平台(就是将自己的代码放到网络上，供别人使用)。两者都基于一种叫git的工具，而git工具的用途就是用来同步一些文件，具体可以自行查阅，就不过多介绍了。

步骤二：建立一个自己的仓库

当我们刚登陆码云的时候，大概会看到这样的情况：

码云主页面

这时候，鼠标滑动到右上角的那个加号那里，之后会出现一个新建仓库的按钮，点击它。

新建仓库

点击之后，就会对自己的仓库进行初始化配置。

仓库名称：就是你自己建立的仓库的名字，可以写正在写的项目的名称；

路径：设定一个路径，在访问你的仓库时，就会通过该路径访问，建议设全英文；

是否开源：设置私有的话，仅能自己和自己的团队能看到，这个看自己的想法了；

语言：选择HTML/CSS，其实选择什么都无所谓，但是既然放的是网页，就用选这个好一点；

添加.igtignore：不用管，这个是与同步有关的；

其他选项：暂时不管，想要了解的话可以自行查阅；

最后，点击“创建”，就能建立一个自己的仓库了。

新建仓库

当你创建完后大致是这样的，但是没有“科院小站”那个文件夹，因为是我后来加上的。

仓库

步骤三：上传自己的网页文件

这一步需要我们将自己的相关的文件传输上去。

首先点击上图的文件，出现一个新建文件夹的选项，点击，为自己的网页创建文件夹，名字就根据自己的项目随意。

image.png

创建完成后，因为Gitee不允许有空的文件夹，就会自动先在文件夹内放置一个名叫 ".keep"的空文件。当你创建完文件夹后也会自动 跳转到那个文件内，此时，点击它的上级目录名来返回其上级目录。

image.png

这时候我们已经进入到这个文件夹内了，可以看到其下仅有一个".keep"，现在，点击上传，准备上传自己网页以及其资源。

image.png

现在，我们选中自己的文件，然后拖拽到蓝色区域(蓝色区域是我为了方便看清楚位置自己画上去的)，之后，就可以准备上传了，随便写一些“提交信息”，然后点击下方的“提交”即可。

image.png

注意：

1.不能连带文件夹上传

如果你的网页带有目录结构(比如css，imgs等)，就先按照每个目录的名字创建好文件夹(步骤同上)之后将其对应的文件夹拖拽进去，就会自动把文件夹下的所有文件自动选择来上传，类似下面的动图。

拖拽

假如你想把你的html文件夹上传，就先创建一个html的文件夹(在步骤三最开始创建的那个文件夹下创建)，然后将你的html文件夹拖拽过去即可。

2. 注意路经

所有的绝对路径要改为相对路径，因为别人无法直接访问你电脑上的文件，就会导致你的网页将会是不完整的(会缺少诸如css文件，图片等外部资源)。

假如你的html文件和css文件分别在html和css这两个文件夹下，则html中的link标签应该这样写：这就是相对路径的写法，包括图片和其他资源也是同样的写法。

步骤四：开启Gitee Pages服务

这一步是所有步骤中最重要的一步，也是最后一步，完成后就大功告成了！

首先点击你仓库右上角的“服务”，点开里面的Gitee pages。

之后填写上部署目录的名称点击最下面的按钮，然后稍等一会就OK了！

成功开启后，会显示“已开启Gitee pages服务，网站地址：xxxxxxxxxx”

到此，教程结束。

注意

如果你已经开启过服务，之后又更改了一些文件，需要再次进入Gitee Pages页面点击“更新”才行