Hexo 博客搭建

发表于 更新于 分类于 阅读次数： 本文字数： 7.7k 阅读时长 ≈ 7 分钟

旧博客已经很久没更新了，考研结束重新回到CS的生活后，发现自己自从博客停更后就停止了学习，和同龄人之间的差距越来越大了。为了激励自己，我决定重开博客，慢慢将旧博客的文章迁移到hexo上。

这篇文章用于记录折腾hexo的过程。

折腾完 Github Action 后的效果如下：

github-actions-success.png

每次push后都会自动部署

安装nodejs

1
2
curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
sudo apt-get install -y nodejs

npm换源以及配置npm模块安装位置（可选）

个人一直比较反感将模块安装到root权限的目录，于是更改了node模块的安装目录

1
2
npm config set registry https://registry.npm.taobao.org
npm config set prefix ${HOME}/.npm_packages

配置后npm的模块会被安装到${HOME}/.npm_packages，可执行文件会在${HOME}/.npm_packages/bin下

因此需要更新PATH，根据个人用的shell修改.bashrc或者.zshrc

1
export PATH="$HOME/.npm_packages/bin:$PATH"

安装hexo并初始化博客

1
2
npm install -g hexo-cli
hexo init blog

执行后会在当前目录下新生成一个blog目录，里面包含了生成博客所需要的数据

博客的配置文件为_config.yml

写完博客后可以先在本地进行预览

1
2
hexo generate
hexo server

可以访问127.0.0.1:4000对博客进行预览

个人配置

隐藏index.html

1
2
3
pretty_urls:
  trailing_index: false # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: false # Set to false to remove trailing '.html' from permalinks

目录结构

hexo默认是把文章全都塞_posts下，为了方便整理博文，我手动为博文建立了不同的目录用于分类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
plusls@hyperv-debian > ~/github/blog/source > tree
.
├── categories
│   ├── index
│   └── index.md
├── CNAME
├── _data
│   └── next.yml
└── _posts
    ├── misc
    │   └── use-hexo-with-github-actions.md
    └── windows
        └── kms
            ├── configure-kms-server.md
            └── use-kms-server.md

默认情况下hexo的url是按照日期来生成的, 若是按照我这样分类博文，并修改配置文件

1
permalink: :title/

以use-kms-server这篇博文为例，它最后生成的url为

https://blog.plusls.com/windows/kms/configure-kms-server/

大大的提高了可读性，被搜索引擎索引后链接也会比较好看

启用资源文件夹

https://hexo.io/zh-cn/docs/asset-folders

主要为了解决附件，图片存放的问题

图片以及附件

在启用资源文件夹后把图片和资源扔进去，就可以在markdown内直接使用markdown语法进行引用

但是存在一个问题，一般引用资源文件夹的图片时都使用的相对目录，一个图片能在博文页面正常显示，但是在主页的摘要中就会挂掉

网上的搜索结果基本上都指向了hexo-asset-image这个插件，但是这个插件在隐藏掉index.html后会出现bug

我fork到自己仓库后魔改了一下，好像能正常工作，未经过完整的测试

可以使用如下命令安装我修改后的插件

1
npm install github:plusls/hexo-asset-image --save

解决渲染非markdown文件的问题

hexo在开启资料文件夹后，仍然会渲染资料文件夹内的文件，目前已知会渲染js, css, json，github上已经有人针对这个问题提了issue

https://github.com/hexojs/hexo/issues/1490

看起来官方不打算解决的样子

临时的解决方案为，修改_config.yml

1
2
3
4
skip_render:
  - _posts/**/*.js
  - _posts/**/*.css
  - _posts/**/*.json

让博文的url变得有意义

以use-hexo-with-github-actions这篇文章为例，它的url为 https://blog.plusls.com/misc/use-hexo-with-github-actions/

post-url.png

我希望能让 https://blog.plusls.com/misc/ 也变得有意义，能访问相应的category

category-url.png

只需要保证博文中的category设置正确

1
2
categories:
  - [misc]

若是博文存放在source\_posts\aaaa\bbbb\cccc.md

则博文中的category需要修改为

1
2
categories:
  - [aaaa, bbbb]

随后修改_config.yml

1
category_dir: ''

更换主题

默认主题真的8行，看了一圈，最后还是决定使用next: https://github.com/theme-next/hexo-theme-next

为了方便主题的更新以及缩小博客git仓库的体积，使用了submodule，顺便把默认主题删了

1
git submodule add https://github.com/theme-next/hexo-theme-next themes/next

clone结束后把_config.yml的theme修改为next即可

next主题配置

为了方便主题的更新，我并没有直接修改主题目录下的配置，而是将配置文件复制到了

1
source/_data/next.yml

启用categories

个人感觉next的tag比较鸡肋，并未启用，只启用了categories

1
hexo new page categories

新建categories page后修改source/categories.md，加上type: "categories"

同时修改next.yml

1
2
3
4
5
6
7
8
9
menu:
  home: / || home
  about: /about/ || user
  #tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

评论

本来打算使用 Disqus，考虑到它被墙了，又不放心国内的评论系统，最后选择了 gitalk

Gitalk 是基于 github 的 issue 系统做的，它要求用户评论时先用 github 登录，用户评论就相当于在我博客的 issue 区评论， Gitalk 会自动化的把评论提交到 issue 以及从 issue 区域爬取评论显示在博文下面

Gitalk 使用了github 的 OAuth， 因此需要注册一个 Github application

链接：https://github.com/settings/applications/new

create-oauth.png

Homepage URL 和 Authorization callback URL填写自己博客的地址，剩下的随意

注册完成后会来到如下页面，把 client_id 和 client_secret 填到next主题的配置文件即可

oauth-token.png

样例配置：

1
2
3
4
5
6
7
8
9
10
11
12
gitalk:
  enable: true
  github_id: plusls # GitHub repo owner
  repo: plusls.github.io # Repository name to store issues
  client_id: xxxxxx # GitHub Application Client ID
  client_secret: xxxxxxx # GitHub Application Client Secret
  admin_user: plusls # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language:

配置完成后打开博文会发现，博文下方提示 issues not found.

issues-not-found.png

这是因为该博文的对应的 issue 还没有创建，登陆后需要亲自遍历所有博文来为每个博文创建issue

创建后的 issue 类似下图

blog-issue.png

每篇博文都会有个对应的 issue

blog-issues-list.png

访问量统计

本来想使用 firebase 结果发现被墙了

而且 firebase 有个坑点，需要把数据库配置为公开的，根据文档进行操作：

https://firebase.google.com/docs/database/security/quickstart?hl=zh-cn#sample-rules

规则如下：

1
2
3
4
5
6
7
8
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

尝试用了一下 busuanzi 它的统计好像有点问题，只能在 post 页面显示，在主页显示不出，最后决定使用 leancloud_visitors

教程：

https://github.com/theme-next/hexo-theme-next/blob/master/docs/zh-CN/LEANCLOUD-COUNTER-SECURITY.md

next 的杂七杂八的配置

仅作记录，具体怎么配置可查阅文档：https://theme-next.iissnan.com/theme-settings.html

  • 谷歌分析
  • 头像以及头像旋转
  • 社交信息，比如 Github，Email
  • 字数统计
  • 代码块配置
  • github banner
  • favicon
  • 友链没使用next自带的，自己新建了一个页面
  • 捐赠
  • menu badges
  • SEO
  • license

github pages

在新建一个仓库，名字为plusls.github.io

修改仓库设置如下

github-pages.png

随后将blog.plusls.com CNAME 到 plusls.github.io，即可使用blog.plusls.com访问github pages（白嫖大成功）

git deploy

自动部署博客到github pages，安装插件hexo-deployer-git

修改配置_config.yml：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: [email protected]:plusls/plusls.github.io.git
  branch: master

配置好后命令行输入hexo deploy会自动部署博客到github pages

由于该插件每次都会初始化一个新的git仓库并push到远端，这个操作会覆盖掉仓库原有的CNAME文件。可以提前在source目录下放置CNAME，hexo会自动将其拷贝到网站的根目录下。

Github Action

终于到正题了，我这人有点懒，并不想写完博客后还要手动去执行hexo deploy，考虑使用Github Action，让我在写完博文push后自动部署

新建文件.github/workflows/deploy.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
name: Deploy Hexo

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [10.x]

    steps:
      - name: Pull code
        uses: actions/checkout@v2
        with:
          submodules: true

      - name: Configure Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}

      - name: Install Hexo CI
        run: |
          export TZ='Asia/Shanghai'
          npm i -g hexo-cli
          npm i

      - name: Install plugin
        run: |
          npm install hexo-deployer-git --save
          npm install github:plusls/hexo-asset-image --save
          echo install success

      - name: Configure git
        env:
          ACTION_DEPLOY_KEY: ${{ secrets.GITHUB_ACTION }}
        run: |
          mkdir -p ~/.ssh/
          echo "$ACTION_DEPLOY_KEY" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          git config --global user.name "plusls"
          git config --global user.email "[email protected]"

      - name: Deploy
        run: |
          hexo clean
          hexo g
          hexo deploy
          rm ~/.ssh/id_rsa

Github Action的教程网上也有，但是没几个教程有说明怎么让git免密码push

首先ssh-keygen生成私钥和公钥，随后将公钥放到plusls.github.io的settings\Deploy Keys，名字随便起一个就好了

私钥则要放在博客的github仓库的settings\secrets，名字必须为GITHUB_ACTION，因为上面的脚本是通过secrets.GITHUB_ACTION来获取私钥并写入 ~/.ssh/id_rsa的

live2d

老婆！

在 hexo 使用 live2d 看板娘十分方便，安装 hexo-helper-live2d 插件即可

作者自带的模型中并没有 Sagiri，去网上随便找了个扔在 /live2d_models，跟着文档改改配置就能用了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# Live2D
## https://github.com/EYHN/hexo-helper-live2d
live2d:
  enable: true
  # enable: false
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/[email protected]/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    # use: live2d-widget-model-wanko # npm-module package name
    use: sagiri # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/[email protected]/assets/wanko.model.json # 你的自定义 url
  #   scale: 1
  #   hHeadPos: 0.5
  #   vHeadPos: 0.618
  # display:
  #   superSample: 2
  #   width: 150
  #   height: 300
  #   position: right
  #   hOffset: 0
  #   vOffset: -20
  mobile:
    show: false
    scale: 0.5
  # react:
  #   opacityDefault: 0.7
  #   opacityOnHover: 0.2

SEO 和 RSS

SEO 我也不太搞得明白，只是生成了站点地图并且提交给了百度和谷歌

next 主题也提供了一些 SEO 的开关，像 baidu push 之类的，弄完后百度和谷歌会自动爬取页面，有新页面时站点地图也会自动更新。不干了，睡大觉！

RSS 和站点地图都可以用安装插件来完成。

1
2
3
npm install --save hexo-generator-baidu-sitemap
npm install --save hexo-generator-sitemap 
npm install --save hexo-generator-feed