分布式系统,程序语言,算法设计

使用Hexo引擎配置静态博客

hexo 博客搭建

今年新年愿望之一,督促自己每周写博客。作为一个新的开始,打扫屋子清爽一番是我的一贯风格。加上感觉jeklly 引擎不怎么好使,就想换个新的引擎 hexo。去年注意到越来越多的博客开始用这个引擎,于是关注了下,感觉的确不错(主题,模式等等),说干就干。想着作为科班出身,看别人教程多low,于是直接看官方文档开搞,当然了,坑是不可避免的,下面来聊一下。

作者:青藤木鸟 https://www.qtmuniao.com, 转载请注明出处

时间线

  1. 前一天,花了一个小时左右过了下hexo官方文档:https://hexo.io/zh-cn/
  2. 另起炉灶,新申请了个github账号,对hexo实验一番
  3. 在原来github账号上将以前的寥寥几篇笔记迁过去

看文档

hexo文档写的挺清楚的,又有中文,大致溜了一下。先讲讲主要可能用到的是一些基本命令和常规配置,然后大概谈谈我理解的hexo的原理。

基本命令

按用到的顺序大致捋一遍,我用的 hexo 版本:hexo: 3.8.0,hexo-cli: 1.1.0

  1. 安装 nodejs,参见文档概述一节。主要是 npm 命令,就是个 js 包管理工具,静态网页,自然离不了大量的js依赖。
  2. 安装 hexo 命令行: npm install -g hexo-cli
  3. 初始化 hexo: hexo init
  4. 新建文章: hexo new [layout] <filename>
  5. 发布静态网页: hexo d (hexo deploy简写)

常规配置

主要针对 github pages:

总配置文件即 hexo/_config.yml :基本设定如 title, subtitle 等按下不表,需要注意的是 deploy 和 theme

针对git,如果有自己的博客域名,注意在 hexo/source 里面加上CNAME(里面写上自己的域名)文件,这时候,就算你输入 qtmuniao.github.io ,也会自动跳转到 www.qtmuniao.com。

1
2
3
4
deploy:
type: git
repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
branch: [branch] #published

hexo deploy -g 是常用的文章发布命令,其中 deploy 的意思是将博客网站呈现所需的文件(去掉了hexo引擎本身的一些杂七杂八文件)push 到指定 repo 的某个 branch 中去,然后将github pages 指向该 repo 的该分支就行了。 -g 是指在 push 到上述分支钱,将生成的静态文件放到 public 文件夹中。

对于主题,知乎有篇文章对流行的 hexo 主题进行了下统计,我这里选的人气最高的 next,并根据其文档 安装了一番,我用的版本是 Version 6.0.6

针对 next 主题配置 thems/next/_config.yml,主要是选了个 Scheme:Gemini,加了点谷歌统计的信息,以便对网站的访问情况进行跟踪。

大概原理

简要说说我对 hexo 的理解:

hexo 大致可以理解为一个写静态博客的引擎。

说先说静态,意思就是没有服务器后台交互,可以粗理解为没有数据库去存烂七八糟的用户信息,博客信息以及其他元信息。由于近年来前端的进一步发展,js 可以做的事情越来越多,仅仅依靠 html + js + css 就可以满足日常码字以及炫酷主题的需求,并且不需要部署服务,租空间,再加上github pages的免费,安全,快速,因此静态博客日趋流行。

那么什是引擎呢,我理解就是将所有与写作无关的事情给你通过 简单命令+默认配置 的方式给你管好,你只需要安心码字就行。当然由于个性化的需要,主题和插件被解耦出来,并且可以定制,可以发布,可以交流,由此极大丰富了可玩性。

hexo 通过模板,主题,插件等模块化解耦,使得写博客这件事变得易上手,可钻研。

新账号

第一念头就是直接在原仓库里改,思考片刻,强行按下这不靠谱的想法。于是新申请一个github账号,问题随之而来:

1. 不同的github账号不能添加同一个ssh key

Google 一番,找到一个方案。

a. 重新生成一个 ssh pair(生成的时候注意位置选择,我觉得最好还放在 ~/.ssh目录下吧,当然着看个人口味,然后起一个规整名字)

b. 编辑 ssh 配置文件, ~/.ssh/config,指定两个 host 条目,设置使其用不同的 ssh key。

1
2
3
4
5
6
7
8
9
Host host1
HostName github.com
PreferredAuthentications publickey
IdentityFile ~/.ssh/id_rsa

Host qtmuniao
HostName github.com
PreferredAuthentications publickey
IdentityFile ~/.ssh/qtmuniao_id_rsa

然后可以用 ssh -T git@qtmuniao 测试下配置结果

c. 修改 git clone repo.git 中路径:

1
2
改前: git@github.com:qtmuniao/qtmuniao.github.io.git
改后: git@qtmuniao:qtmuniao/qtmuniao.github.io.git

就是把 @: 的 hostname 改为配置的 hostname。

hexo实验

然后就开始按照以前想法,直接建了一个 qtmuniao.github.io 的仓库,然后在 hexo deploy 的时候遇到第二个问题:

2. qtmuniao.github.io 仓库的 Settings 中 GitHub Pages 项的 source 只能设置为 master

a. 先详细交代下问题由来

hexo 的设定是,写博客以及所需要的 hexo 依赖,维护在一个 branch 中(比如说 master branch),然后针对 git 方式 deploy 的时候将所有有用的文件给 push (-- force) 到一个新分支(比如说 publish branch)上去,然后在 github 中将该分支设为 github pages 的指向分支。

b. 但是 hexo 给的指向方案不好使啊,即:

1
2
https://hexo.io/zh-cn/docs/deployment:
登入 Github/BitBucket/Gitlab,请在库设置(Repository Settings)中将默认分支设置为_config.yml配置中的分支名称。稍等片刻,您的站点就会显示在您的Github Pages中。

我将 qtmuniao.github.io 的默认分支改为 publish 后,打开 https://qtmuniao.github.io/ ,发现仍然指向 master 分支。

c. 于是就有了该问题:qtmuniao.github.io 仓库的 Settings 中 GitHub Pages 项的 source 只能设置为 master,因为它是灰的。

Stack Overflow 一番,大概弄明白了,您的 github 所有仓库都可以将其根目录,或者根目录下 docs 文件夹设为待发布的 github pages。但是当 username.github.io 仓库存在的时候呢,就默认将 username.github.io master分支设置为待发布的 github pages, 还不能更改。

d. 既然这样,那我就新建了个 blog 的仓库,然后每次利用 hexo 将博客代码发布到 gh-pages 分支,并在 blog 仓库的 Settings 中,将Github Pages 项的 Source 设置为 gh-pages 就可以了。美中不足的是,访问路径就带了 blog ,主页就变成了: https://qtmuniao.github.io/blog/ ,这个稍后估计能修改配置解决。

e. 后来弄了下路径问题,发现在 hexo/_config.yml 里面有以下提示: If your site is put in a subdirectory, set url as ‘http://yoursite.com/child' and root as ‘/child/‘ ;如实加上后,果然没有了blog的子路径;但是如果我用自己的域名进行指向后,就发现各种资源文件(js+css)获取不到了,而将上面配置改回 url: http://yoursite.com and roots as ‘/‘ 就好了。

笔记迁移

参考 hexo 文档 https://hexo.io/zh-cn/docs/migration#Jekyll 没遇到什么问题。

评论区

为了增加互动性,结识更多同好,我想增加个评论区。感觉由于用的 Next 版本比较高级,其默认支持常见评论插件:gitment,gitalk

我这里选用的是 gitalk,由于其是基于 Github Issue 和 Preact 开发的评论插件。因此需要先注册一个 github application,https://github.com/settings/applications/new 。需要注意的是 Homepage URL 和 Authorization callback URL 填一致的就行,如果有配置域名指向的填域名就行。

注册成功后获取 client Id 和 secret,在 hexo/themes/next/_config.yml 中打开下面配置就行:

1
2
3
4
5
6
7
8
gitalk:
enable: true
github_id: # Github repo owner
repo: # Repository name to store issues.
client_id: # Github Application Client ID
client_secret: # Github Application Client Se
admin_user: # GitHub repo owner and collaborators, only these guys can in
distraction_free_mode: true # Facebook-like distraction free mode

需要注意的 repo 一项仅需要填 git repo 的名字,而非地址。

然后 hexo clean && hexo deploy 重新部署就行。

可能会出现 登录出现 404 错误 ,点下登陆 github 就行。

最后祝大家玩得愉快。