搭建hexo博客给公众号制作留言功能

大家都知道,18年3月份后注册的公众号都不给留言功能了,作为主要以技术文章为主的公众号,没有留言功能真是不方便。周末这两天我就一直在折腾这个留言功能,借助博客的留言功能,放在阅读原文里。昨天晚上终于折腾出来了,中间也踩了一些坑,这篇文章主要把思路讲一下,把遇到的坑讲一下,详细教程网上很多,可自行谷歌百度。

主要思路

1、搭建 Hexo 博客并添加 next 主题。
2、给博客增加评论系统:Valine。
3、将 Hexo 博客同步到 GitHub 上。

准备工作

首先安装一些依赖工具:安装 Node.js、安装 Git,这两个工具大家自行网上安装。

现在说下 GitHub,我们需要首先注册一个账号,大部分程序员应该是有的,没有的话注册一个也很简单。登录后新建一个新项目用于存储我们的博客。项目名称注意一下,以名称 + .github.io 后缀,比如,我的是 pk.github.io。新建项目后,点击项目 settings,往下滑动,看到 GitHub Pages,显示的链接就是 Hexo 博客内容同步过来对外可见的链接。

搭建博客

首先会用到 Git 命令、npm 命令来安装 Hexo 博客,详见网上教程,安装成功后输入 hexo g 生成静态网页,然后输入 hexo s 打开本地服务器,然后浏览器打开 http://localhost:4000/  可以看到 Hexo 的初始效果。

添加主题

我给 Hexo 添加的是 next 主题,next 可以配置出很多很多超炫的网页效果,参考文章见文章底部「Hexo-NexT配置超炫网页效果」,看看我的效果图。点击文末左下角「阅读原文」也可以查看效果,背景是很炫酷的动态背景。

评论系统

评论系统我用的是 Valine,一款基于 Leancloud 的极简风评论系统。所以我们需要先在 Leancloud 官网注册(https://leancloud.cn/) 登录后创建应用,在应用中增加评论系统 class。

创建成功后可以对其编辑修改。

评论系统创建好后怎么添加到博客中呢?在应用的设置中查看应用的 App ID 和 App Key。

把这个信息添加到 Hexo 存放目录的 \themes\next 里的 _config.yml 文件的相应位置,搜索 valine,找出评论系统的设置。

设置成功后的效果。

同步到 GitHub

接下来我们需要把 Hexo 博客的内容同步到 Github上, 因为 Hexo 只能在本地查看,需要托管到 Github 上才可以对外开放。使用 hexo -clean、hexo g -d 这两个命令实现同步,详见文末的参考文章,我说下我遇到的坑。

1、同步时报错:fatal: could not read Username for ‘https://github.com’: No error。解决方案:把 _config.yml 文件中 repo 后面的项目地址格式改成 ssh://git@github.com/brucepk/pk.github.io.git 这种格式。

2、同步成功后,打开 GitHub Page 时发现内容同步过去了,但是主题格式没有同步过去。网上查找之后对 Hexo 根目录下的 _config.yml 文件中 url 和 root 进行修改。其中 url 为 GitHub Page 地址,root 为注册 GitHub 时新建项目时的名称,这个地方卡了半天才成功。

以上是遇到我踩到的主要的坑,供参考,这样,一套带评论系统的博客就诞生了。

我暂时只是用了其中的留言功能,不过以后考虑把文章也同步在 Hexo 博客上,这上面没有广告,而且可以自定义炫酷的主题,不管是写文章还是看文章,都给人很舒服的感觉。

 

文章为pk哥原创,我在我的公众号: Python 知识圈 上会分享更多心得体会,你也可以关注。

***版权申明:本文为 Python知识圈 pyzhishiquan.com 原创,没有Python知识圈书面授权,请勿以任何形式转载,摘编,复制或镜像。***

为您推荐

发表评论

电子邮件地址不会被公开。