• 欢迎访问爱玩吧
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏爱玩吧

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

实用教程 aiwanyule 4年前 (2021-04-30) 已收录

[教程]用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 左右,把之前写的文章迁移过来就行了。这样既可以拥有博客投入又少,做个缓冲计策。

开始

方法略~

搭建图床

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

方法略~


爱玩吧 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:[教程]用Gitee 和 GitHub开源库搭建个人网页的方法
喜欢 (1)