在Github/Gitee上搭建免费个人网站和博客（延伸篇）

时间：2023-05-31 19:15:01 | 来源：网站运营

时间：2023-05-31 19:15:01 来源：网站运营

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

• 不需懂代码，10分钟在Github搭建免费且已成型的个人博客网站
• 在Github/Gitee上搭建免费个人博客网站（进阶篇）

相信其中有一部分朋友真的用起来了，所以有必要把另外两个重要的功能说一下：

（1）评论系统
（2）独立域名

评论系统

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

1. 使用Gitalk评论系统

参考为博客添加 Gitalk 评论插件。

Gitalk 是一个利用 Github API，基于 Github issue 和 Preact 开发的评论插件。先看一下它的界面效果是这样的：

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

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

下面说说具体怎么做。

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

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

按下面的例子填写参数：

成功提交后，获得两个参数：

• Client ID
• Client Secret

都是一长串乱码。

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

<!-- Gitalk 评论 start -->{% if site.gitalk.enable %}<!-- Link Gitalk 的支持文件 --><link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css"><script src="https://unpkg.com/gitalk@latest/dist/gitalk.min.js"></script><div id="gitalk-container"></div> <script type="text/javascript"> var gitalk = new Gitalk({ // gitalk的主要参数 clientID: `Github Application clientID`, clientSecret: `Github Application clientSecret`, repo: `存储你评论 issue 的 Github 仓库名`, owner: 'Github 用户名', admin: ['Github 用户名'], id: '页面的唯一标识，gitalk会根据这个标识自动创建的issue的标签', }); gitalk.render('gitalk-container');</script>{% endif %}<!-- Gitalk end -->其中的Client ID、Client Secret参数是上一步获得的。我只在3-forum.html文件中使用了评论，你可以在该文件中看到这些内容。除了上述参数，还有其它一些参数可以使用，有兴趣请点这里。

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

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

2. 使用Gitee评论系统

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

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

• Hexo接入码云评论系统
• Hexo博客继承码云评论系统

很遗憾它们都有不少的遗漏或错误，导致我花了整整一天才做成。我们在这里也不用再去回顾那些错误，只要按照我下面的来就可以了。

第（1）步：在码云的配置里申请第三方应用

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

点击「创建应用」后，获得Client ID号和Client Secret密码：




第（2）步：修改你根目录下的配置文件_config.yml，增加以下内容：

# 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）步：在需要有评论的页面（页面模板）增加以下内容：

<!-- giteement评论系统 -->{% if site.giteement.enable %}<link rel="stylesheet" href="https://giteement.oss-cn-beijing.aliyuncs.com/default.css"><script src="https://giteement.oss-cn-beijing.aliyuncs.com/giteement.browser.js"></script><div id="giteementDiv"></div> <script type="text/javascript"> var giteement = new Giteement({ id: 'forum', owner: '{{site.giteement.giteeID}}', repo: '{{site.giteement.repo}}', backcall_uri: '{{site.giteement.redirect_uri}}', oauth_uri: '{{site.giteement.oauth_uri}}', oauth: { client_id: '{{site.giteement.gitment_oauth.client_id}}', client_secret: '{{site.giteement.gitment_oauth.client_secret}}' }, }); giteement.render('giteementDiv');</script>{% endif %}保险起见，在index.html中，增加如下内容：

<!-- 回传giteement评论页网址 --><script src="https://giteement.oss-cn-beijing.aliyuncs.com/oauthcallback.browser.js"></script> <script> Oauthcallback(); </script>好了，到此就搞定Gitee评论系统了，记得更新一下你的「Gitee Page 服务」，然后测试效果，如下图所示。第一次使用需要登录激活一下。

独立域名

参考快速搭建个人博客 - 柏荧的博客 | BY Blog

所以到目前为止，我们都是使用Github/Gitee提供的免费域名，即 xxxx.github.io 或 xxxx.gitee.io 。如果你想要独立域名，那还要做一些事情。

（注意：免费Gitee不支持独立域名的绑定，需使用付费版即Gitee Pro。）

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

接下来你要解析域名，以阿里云为例：

• 管理控制台 → 域名与网站（万网） → 域名
• 选择你注册好的域名，点击解析

• 添加解析

分别添加两个A 记录类型,

1. 一个主机记录为 www，代表可以解析 www.qiubaiying.top的域名
2. 另一个为 @，代表 qiubaiying.top

记录值就是博客的IP地址，是 GitHub Pages 在美国的服务器的地址 (185.199.110.153)。

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

ping yourname.github.io如果你用的是Gitee（付费版），改成：ping yourname.gitee.io 。

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

添加或选择 CNAME 文件：

使用的注册的域名进行替换，然后提交保存：

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

（完毕）