在Github上搭建免费个人博客网站(延伸篇)

10分钟在Github搭建免费且已成型的个人博客网站

Posted by klovien on October 29, 2023

之前我发表了两篇关于在Github/Gitee上搭建免费个人博客网站的文章,很受欢迎,评论和Fork相关仓库的人不少。

不需懂代码,10分钟在Github搭建免费且已成型的个人博客网站 在Github/Gitee上搭建免费个人博客网站(进阶篇) 相信其中有一部分朋友真的用起来了,所以有必要把另外两个重要的功能说一下:

(1)评论系统 (2)独立域名

评论系统

在Github上搭建的博客网站,建议使用Gitalk评论系统。在Gitee上搭建的博客网站,建议使用Gitee评论系统。

  1. 使用Gitalk评论系统

参考为博客添加 Gitalk 评论插件。 Gitalk 是一个利用 Github API,基于 Github issue 和 Preact 开发的评论插件。先看一下它的界面效果是这样的: enter image description here

注意需要登录了Github账号的人才可以发表评论。

所发表的评论,其实对应了你的Github仓库中的Issue。反过来说,你可以在Github的Issue里,管理这些评论。

下面说说具体怎么做。

(1) 在Github的配置里申请第三方应用

从你Github的个人setting->Developer settings->OAuth Apps里,点击“new OAuth app”,或直接点击这里。

按下面的例子填写参数: enter image description here

成功提交后,获得两个参数:

Client ID Client Secret 都是一长串乱码。

(2) 在需要有评论的页面(页面模板)增加以下内容:

1
2
3
<!-- Gitalk 评论 start  -->

<!-- Gitalk end -->

其中的Client ID、Client Secret参数是上一步获得的。我只在3-forum.html文件中使用了评论,你可以在该文件中看到这些内容。除了上述参数,还有其它一些参数可以使用,有兴趣请点这里。

你也可以参照下一部分的Gitee评论系统,先在_config.yml中添加参数,然后在每个页面中引用。这样如果你有多个页面需要评论系统,就不必每个地方添加或修改参数。

好了搞定。第一次使用需要登录激活一下。

  1. 使用Gitee评论系统

即使使用Gitee作为你的博客平台,你仍然可以使用Gitalk作为评论系统。不过这会有点儿奇怪,因为发表评论是需要用到账号的。上述Gitalk评论系统还是使用Github的账户。如果你想完全使用Gitee而与Github不想沾边的话,那么最好使用Gitee的评论系统。

能找到的接入Gitee评论系统的教程不多。我主要找到这两篇:

Hexo接入码云评论系统 Hexo博客继承码云评论系统 很遗憾它们都有不少的遗漏或错误,导致我花了整整一天才做成。我们在这里也不用再去回顾那些错误,只要按照我下面的来就可以了。

第(1)步:在码云的配置里申请第三方应用

这一步我就直接搬别人的图片过来了,大家都是一样的。先提交申请,其中的内容改成你自己的:

enter image description here 点击「创建应用」后,获得Client ID号和Client Secret密码: enter image description here

第(2)步:修改你根目录下的配置文件_config.yml,增加以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Giteement 
# 关于如何集成:https://www.jianshu.com/p/f5c4633524c7
# 基于码云的评论系统(https://gitee.com/zhousiwei/giteement)
giteement:
  enable: true  # 是否启用码云评论系统
  # 是否使用官方js(false可以提升访问速度)
  remote: false
  redirect_uri: 'https://klovien.gitee.io'   # 应用回调地址(请和配置的第三方应用保持一致)
  # 不能更改(网上开源项目https://github.com/Rob--W/cors-anywhere作者提供的专门用来跨域服务器的配置)
  oauth_uri: https://cors-anywhere.herokuapp.com/https://gitee.com/oauth/token
  giteeID: 'klovien'  # 你的码云账号英文名
  # 存储评论的 repo name(需要在码云仓库创建公开仓库)
  repo: 'klovien'
  gitment_oauth:
    client_id: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'           #client ID
    client_secret: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'       #client secret

把其中回调地址、账号名、repo名,改成你自己的,把client_id和client_secret改成你在上一步获得的长长的字符串。

第(3)步:在需要有评论的页面(页面模板)增加以下内容:

1
2
<!-- giteement评论系统 -->

保险起见,在index.html中,增加如下内容:

1
2
3
4
5
<!-- 回传giteement评论页网址 -->
<script src="https://giteement.oss-cn-beijing.aliyuncs.com/oauthcallback.browser.js"></script>
  <script>
    Oauthcallback();
  </script>

好了,到此就搞定Gitee评论系统了,记得更新一下你的「Gitee Page 服务」,然后测试效果,如下图所示。第一次使用需要登录激活一下。 enter image description here

此效果演示网址:https://globien.gitee.io/3-forum

独立域名

参考快速搭建个人博客 - 柏荧的博客 | BY Blog 所以到目前为止,我们都是使用Github/Gitee提供的免费域名,即 或 。如果你想要独立域名,那还要做一些事情。

(注意:免费Gitee不支持独立域名的绑定,需使用付费版即Gitee Pro。)

首先,你需要有一个独立域名。如果没有,你可以到阿里云,或是别的域名服务商购买。

接下来你要解析域名,以阿里云为例:

管理控制台 → 域名与网站(万网) → 域名 选择你注册好的域名,点击解析 enter image description here 添加解析 分别添加两个A 记录类型,

一个主机记录为 www,代表可以解析 www.qiubaiying.top的域名 另一个为 @,代表 qiubaiying.top 记录值就是博客的IP地址,是 GitHub Pages 在美国的服务器的地址 (185.199.110.153)。

enter image description here 地址可能会变的,可以通过 这个网站 或者直接在你的电脑终端上ping 你的github-pages域名,查看你的博客的IP地址:

ping yourname.github.io 如果你用的是Gitee(付费版),改成:ping 。

最后还要修改仓库里的 CNAME 文件。

添加或选择 CNAME 文件: enter image description here

使用的注册的域名进行替换,然后提交保存: enter image description here

现在,在浏览器中输入你自己的域名,就可以解析到你的博客主页了。

(完毕)