经过 n 次踩雷后终于把自己的 blog 框架搭起来了,搭建此 blog 主要受一位大佬启发,感觉他的 blog 搭得特别好(崇拜)于是自己也想搭一个,这是他的个人 blog:letian.website

搭建 blog 过程中踩过最大的雷就是jekyllhexo之间的选择问题,起初我选择使用 jekyll 因为 jekyll 是 github pages 官方推荐的静态站点生成器,但经过多次试验后发现其并不好用,于是改选用 hexo,感觉 hexo 还是蛮好用的。

关于使用 hexo+github pages 搭建 blog 的文章有很多,包括前文提及大佬也有一篇总结得很好的文章:GithubPages+Hexo 搭建静态博客。在这里我直接将这些好文章分类列出,一些这些文章未解决的问题再自己总结写出

全套教程

GithubPages+Hexo 搭建静态博客

手把手教你使用 Hexo + Github Pages 搭建个人独立博客

hexo 官方文档

专项教程

Windows迁移至Mac

Step1: 在Mac上搭建完成基本的hexo环境,包括创建并初始化一个新的博客文件夹

Step2: 将下列windows环境下博客文件夹内的文件或文件夹,复制至新的博客文件夹

_config.yml
package.json
scaffolds/
source/
themes/

Step3: 在博客目录下执行

npm i

完成

常见错误

README 被删

hexo 系列问题之部署到 github 时会删掉 README 文件

gitalk 评论配置

hexo butterfly 主题支持 gitalk 评论,我首先参考butterfly 主题配置全套教程配置了通用评论,然而配置 gitalk 时按照 butterfly 主题官方教程配置却出现了一些问题,在这里分享一下我将自己成功配置 gitalk 的方法

首先我参考了一下前文提及大佬的文章GithubPages+Hexo 搭建静态博客,按照他的步骤配置后发现有时打开评论区仍会出现这样的问题

BzNiuR.png

点开 issues 后发现跳转到了 username.github.io 仓库的 issue 栏,发现其中已有几条 issue

BzNKvd.png

每一条 issue 标题的”|”前的标题都是我某个 post 的标题,而在有 issue 的 post 下都是可以正常评论的

我尝试在一个可评论的 post 下评论了两次(感谢两位室友帮助测试)
BzU3QJ.png

点开有两条评论的 issue,可以看到在 post 下的评论在该 issue 中也有
BzUQWF.png

据此我推测,gitalk 的评论是存储 username.github.io 仓库的 issue 栏中的,想要在某个 post 或页面(指 about、友链、音乐等)下评论就必须先创建一个对应的 issue 来存储评论,那么如何创建这样的 issue 呢?回到报错的页面

BzNiuR.png

只需单击 login with github 然后登录自己的 github 账号并授权,以后自己与其他人便可在该 post 下正常评论了,因为这样的操作会为我们自动创建一个 issue 在 username.github.io 仓库中,登录成功后为其它的 post 或页面创建 issue,只需要点开此 post 或页面即可自动创建,之后只需要将所有页面全点一遍就行了(这种方式实在不太优雅,可能有更好的方法吧,但总体来说也不算麻烦)

这是可以正常评论的界面

BzvHzt.png

自定义域名

Github Pages+Hexo+腾讯云域名绑定

三步搞定 Github Pages 自定义域名

丰富 blog 内容

butterfly 主题配置全套教程

更换 Hexo 的网页图标/小图片 Hexo change page favicon

Hexo 使用攻略-添加分类及标签

如何在 Hexo 博客 Butterfly 主题开启 Aplayer 和“音乐”页面

希望这篇文章能对你有所帮助!