在Github/Gitee上搭建免費個人網站和博客（延伸篇）

時間：2023-05-31 19:15:01 | 來源：網站運營

時間：2023-05-31 19:15:01 來源：網站運營

在Github/Gitee上搭建免費個人網站和博客（延伸篇）：之前我發(fā)表了兩篇關于在Github/Gitee上搭建免費個人博客網站的文章，很受歡迎，評論和Fork相關倉庫的人不少。

• 不需懂代碼，10分鐘在Github搭建免費且已成型的個人博客網站
• 在Github/Gitee上搭建免費個人博客網站（進階篇）

相信其中有一部分朋友真的用起來了，所以有必要把另外兩個重要的功能說一下：

（1）評論系統(tǒng)
（2）獨立域名

評論系統(tǒng)

在Github上搭建的博客網站，建議使用Gitalk評論系統(tǒng)。在Gitee上搭建的博客網站，建議使用Gitee評論系統(tǒng)。

1. 使用Gitalk評論系統(tǒng)

參考為博客添加 Gitalk 評論插件。

Gitalk 是一個利用 Github API，基于 Github issue 和 Preact 開發(fā)的評論插件。先看一下它的界面效果是這樣的：

注意需要登錄了Github賬號的人才可以發(fā)表評論。

所發(fā)表的評論，其實對應了你的Github倉庫中的Issue。反過來說，你可以在Github的Issue里，管理這些評論。

下面說說具體怎么做。

(1) 在Github的配置里申請第三方應用

從你Github的個人setting->Developer settings->OAuth Apps里，點擊“new OAuth app”，或直接點擊這里。

按下面的例子填寫參數(shù)：

成功提交后，獲得兩個參數(shù)：

• 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的主要參數(shù) clientID: `Github Application clientID`, clientSecret: `Github Application clientSecret`, repo: `存儲你評論 issue 的 Github 倉庫名`, owner: 'Github 用戶名', admin: ['Github 用戶名'], id: '頁面的唯一標識，gitalk會根據(jù)這個標識自動創(chuàng)建的issue的標簽', }); gitalk.render('gitalk-container');</script>{% endif %}<!-- Gitalk end -->其中的Client ID、Client Secret參數(shù)是上一步獲得的。我只在3-forum.html文件中使用了評論，你可以在該文件中看到這些內容。除了上述參數(shù)，還有其它一些參數(shù)可以使用，有興趣請點這里。

你也可以參照下一部分的Gitee評論系統(tǒng)，先在_config.yml中添加參數(shù)，然后在每個頁面中引用。這樣如果你有多個頁面需要評論系統(tǒng)，就不必每個地方添加或修改參數(shù)。

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

2. 使用Gitee評論系統(tǒng)

即使使用Gitee作為你的博客平臺，你仍然可以使用Gitalk作為評論系統(tǒng)。不過這會有點兒奇怪，因為發(fā)表評論是需要用到賬號的。上述Gitalk評論系統(tǒng)還是使用Github的賬戶。如果你想完全使用Gitee而與Github不想沾邊的話，那么最好使用Gitee的評論系統(tǒng)。

能找到的接入Gitee評論系統(tǒng)的教程不多。我主要找到這兩篇：

• Hexo接入碼云評論系統(tǒng)
• Hexo博客繼承碼云評論系統(tǒng)

很遺憾它們都有不少的遺漏或錯誤，導致我花了整整一天才做成。我們在這里也不用再去回顧那些錯誤，只要按照我下面的來就可以了。

第（1）步：在碼云的配置里申請第三方應用

這一步我就直接搬別人的圖片過來了，大家都是一樣的。先提交申請，其中的內容改成你自己的：

點擊「創(chuàng)建應用」后，獲得Client ID號和Client Secret密碼：




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

# Giteement # 關于如何集成:https://www.jianshu.com/p/f5c4633524c7# 基于碼云的評論系統(tǒng)(https://gitee.com/zhousiwei/giteement)giteement: enable: true # 是否啟用碼云評論系統(tǒng) # 是否使用官方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(需要在碼云倉庫創(chuàng)建公開倉庫) repo: 'klovien' gitment_oauth: client_id: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' #client ID client_secret: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' #client secret把其中回調地址、賬號名、repo名，改成你自己的，把client_id和client_secret改成你在上一步獲得的長長的字符串。

第（3）步：在需要有評論的頁面（頁面模板）增加以下內容：

<!-- giteement評論系統(tǒng) -->{% 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評論系統(tǒng)了，記得更新一下你的「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 文件：

使用的注冊的域名進行替換，然后提交保存：

現(xiàn)在，在瀏覽器中輸入你自己的域名，就可以解析到你的博客主頁了。

（完畢）