[教程]用Gitee 和 GitHub开源库搭建个人网页的方法

方法备忘，个人自用，仅此而已。

gitee.com（码云） 和 github.com ，分别是国内外的代码交流社区，就是把自己写的代码开源给别人，让别人站在巨人（开源者）的肩膀上继续发展。

由于 Gitee 是模仿 GitHub 而做的国内版，所以两者在功能上很相似，几乎一样。不过这都不重要，对我来说它俩只是免费的服务器，有了这个前提才诞生了本文。

既然是服务器就可以干两三件事：搭建纯网页、搭建博客、搭建图床。

搭建纯网页

什么是纯网页？就是所有内容都在一个页面上，比如网址导航网站。我试了，只能运行 index.html 文件，index.php 就不行，我也不知道为什么。

Gitee

效果：https://rzfyu.gitee.io

第一步：注册账号时，「个人空间地址」填短一点的纯字母，例如 rzfyu，它直接体现在效果里。当然在设置里可以更改这个字母。

第二步：点击头像旁边的加号 – 新建仓库。

第三步：「新建仓库」的设置页面有两种情况。

1. 如果你想让页面的访问地址是 https://rzfyu.gitee.io，「仓库名称」无所谓，「路径」设置为rzfyu
2. 如果你想让页面的访问地址是 https://rzfyu.gitee.io/xxx，「仓库名称」无所谓，「路径」设置为xxx

第四步：设置页面其他的琐碎选项。

• 是否开源：公开（私有也行效果一模一样，不过我鼓励公开，毕竟代码不是你写的，GitHub 也是如此）
• 选择语言：HTML
• 开源许可证：CC0-1.0

其他都别动，点击创建，会进入「代码页面」。

第五步：文件 – 上传文件。就是把你搞来的网页源码上传上去。提交信息随便写什么，填个 1 吧。最后点「提交」。

第六步：服务 – Gitee Pages，勾上「强制 https」，最后点「启动」就会出现「已开启 Gitee Pages 服务，网站地址： https://rzfyu.gitee.io/xxx 」

第七步：后续注意。

1. 「代码页面」右键可以直接删除文件，GitHub 要点进去才会出现删除按钮，这点国内更人性化一些。
2. 每次修改、上传了新代码，都要重复一遍第六步的点「启动」。也就是说代码并不能实时自动同步，GitHub 没这个问题。
3. Gitee 有些关键词违规的文件不能打开在线编辑，需要下载到本地修改后再上传。GitHub 没这个问题。

GitHub

前言：虽然这是一个英文网站，但用 google 浏览器自带的实时翻译功能访问毫无压力，这也是我为什么只用 google 浏览器的根本原因。所以下面用的名词都是翻译后的名词，而不是原来的英文。

效果：https://rzfyu.github.io

第一步：注册账号时，「用户名」填短一点的纯字母，例如 rzfyu，它直接体现在效果里。当然在设置里可以更改这个字母。

第二步：点击头像旁边的加号 – 新资料库。

第三步：设置页面有两种情况。

1. 如果你想让页面的访问地址是 https://rzfyu.github.io，那么你的「储存库名称」设置为rzfyu.github.io
2. 如果你想让页面的访问地址是 https://rzfyu.github.io/xxx，那么你的「储存库名称」设置为xxx

第四步：其他都别动，直接点击「建立储存库」。

第五步：出现一个很多代码的页面，点击「上载现有文件来开始使用」

第六步：把你搞来的网页源码拖进去，点击提交变更，出现代码页面。

• 注意：如果没有出现第五步、第六步，直接出现代码页面。这时候就点添加文件 – 上传文件，把源码托进去，点击提交变更，效果是一样的。

第七步：设定值 – 页数，来源选择「分支：主要的 – 根」（翻译有点沙雕）。最后点击保存。就会出现「您的网站已准备好在 https://rzfyu.github.io/xxx/ 上发布。」

第八步：后续注意。

1. 第七步结束时可能要等十几二十秒才能访问地址，但也有可能不行。于是我就把第七步的来源选择换成「分支：主要的 – docs」保存一遍，再返回保存一遍。这步骤相当于强制刷新一下。再访问就可以了。
2. 由于 GitHub 时不时的被墙，有时候上不了就无法更新网页内容，所以我建议用国内的 Gitee 去搭建。当然被搭好的网页在访问上速度都很快，没有被墙的状态，唯一影响的就是更新。

拓展：GitHub 自定义域名

例如你有一个闲置域名 rzfyu.cn，现在想访问它时结果是 rzfyu.github.io 的页面，地址栏里也会显示 rzfyu.cn，就算访问 rzfyu.github.io，地址栏依然是 rzfyu.cn。

二级域名例如 xxx.rzfyu.cn，官方文档 中写明了也能定向为 rzfyu.github.io，不过我自己没去试改天再去试试，你急需的话自己看文档摸索吧。

自定义域名两个前提：

• 你的 rzfyu.github.io 页面已经搭建好可以访问了。
• 你的域名实名认证了，不需要备案。

注意：只有 GitHub 页面可以自定义域名，Gitee 没这个功能，下面开始教程。

第一步：打开你的电脑Win + R输入cmd确认。

第二步：在出现的黑窗口里输入Ping rzfyu.github.io回车，出现正在 Ping rzfyu.github.io [185.199.108.153]……，我们要的是框框里的185.199.108.153这个数值。

第三步：打开你的域名管理页面点解析，分别添加如下两个记录值：

1. 主机记录：www | 记录类型：CNAME | 记录值：rzfyu.github.io | 其他都默认
2. 主机记录：@ | 记录类型：A | 记录值：185.199.108.153 | 其他都默认

第四步：回到 GitHub 页面的设置里，也就是上文 第七步 的页面，在自定义域名里输入 rzfyu.cn，确认后等十分钟让系统匹配一下 https 就可以访问了。注意把自定义域名里启用 HTTPS 的勾给打上。

后续注意：

假设你已经让 rzfyu.cn 自定义代替了原 rzfyu.github.io，那么以后 GitHub 再生成新页面比如 rzfyu.github.io/xxx，那么 rzfyu.github.io/xxx 的地址也会变 rzfyu.cn/xxx。

也就是说你不能再搞一个域名，指向 rzfyu.github.io/xxx。因为它已经变成 rzfyu.cn 下的一个页面了。

另外就是 rzfyu.github.io/xxx 页面下的css、js引用地址不能再写成/xxx.css了，这样相当于引用了 rzfyu.github.io 下的文件，但很明显它下面没有这个文件，所以要写成./xxx.css，这样表示引用当前页面的文件。

搭建博客

前言

这里用到的是 Hexo 博客框架，你就理解为 Typecho 博客程序就行了。

用 Hexo 搭建好的博客在前端上和其他博客程序样子差不多，也可以很漂亮。但它的实质是每篇文章都是单独的一个网页，所以它没有后台，如果要修改某篇历史文章，需要去文件夹找到对应的文章页面，像打开 txt 文件一样修改文字，然后更新。

唯一不好的地方，假设你有 500 篇文章管理起来就比较麻烦。但既然它能够存在一定有优点，虽然我不知道。

Gitee/GitHub 能运行网页，Hexo 博客实质是网页所以能搭建成功。而类似 Typecho 博客程序是一个系统，有后台和数据库可以直接管理文章，所以不用 Gitee/GitHub 搭建。

由于 GitHub 可以自定义域名，所以如果你对个人博客感兴趣，可以先买一个域名一年就几十块钱，利用 Hexo 搭建一个博客写写东西。等你觉得博客的确不错，你和它分不开了，那时候再购买服务器一年也就 500 左右，把之前写的文章迁移过来就行了。这样既可以拥有博客投入又少，做个缓冲计策。

开始

方法略~

搭建图床

数据很重要，第三方无法保证能用多久，临时放放不重要的图片也行，看需求吧。虽然技术上可以搭建，但我肯定不敢用。

方法略~