用Hexo来搭建我的博客

发表于 更新于 分类于 ， 本文字数： 762 阅读时长 ≈ 3 分钟

决定要搭一个自己的博客，是受了《程序员的思维训练：开发认知潜能的九堂课》的启发，External support is part of your mind（大脑之外的思维工具，也会成为你思维头脑的一部分）。

你的所思所想需要一个地方来存放，这样你才可以更有效的来组织、利用它们。从这一点出发，也就可以解释为什么我搜索了大量的信息，对各种个人博客工具进行比较之后，选择了Hexo：

  1. 基于git的写作流，对程序员的我而言，带着天然的韵律美；
  2. 使用Markdown格式，纯文本，可以完全掌控；
  3. 生成静态文件发布，简化部署和降低资源消耗，这样在未来才极有可能长期保有而不被替换（或者放弃）；
  4. 像csdn、infoq、印象笔记、语雀、石墨这些商业化的博客或者文档工具，都感觉不靠谱，说黄就黄。

一、安装

安装看官网就够了：hexo.io

二、主题

  1. Next： theme-next.js.org
  2. Butterfly： butterfly.js.org
  3. Fluid： hexo.fluid-dev.com

三、编辑器Visual Studio Code

VSCode扩展插件Hexo Utils（id: fantasy.vscode-hexo-utils）

安装后在VSCode左侧增加了一个带H的图标（Hexo Utils），可以代替VSCode的Explorer管理md文件，也增强了预览（图片）

Markdown 预览插件（Markdown All In One）

预览增强插件（Markdown Preview Enhanced，背景改为白色）

四、配置

配置资源（比如图片）的链接方式，参考： asset-folders

_config.yml
1
2
3
4
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

图片示例：
sample image

设置网站的favicon，可以参考NexT的配置，放/images下，生成ico的网站： https://realfavicongenerator.net/

_config.next.yml
1
2
3
4
5
6
favicon:
  small: /images/favicon-16x16.png
  medium: /images/favicon-32x32.png
  apple_touch_icon: /images/apple-touch-icon.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /manifest.json

五、插件

1.搜索功能

1
npm install hexo-generator-searchdb
_config.yml
1
2
3
4
5
search:
  path: search.xml
  field: post
  content: true
  format: html

2.字数统计

1
npm install hexo-word-counter

3.评论

参考： valine
参考： Hexo博客使用valine评论系统无效果及终极解决方案

4.Mermaid Diagrams（UML图）

参考: Mermaid官网
参考: 知乎文章《Mermaid 绘图》

安装：

1
npm install --save hexo-filter-mermaid-diagrams

修改next的配置：

1
2
mermaid:
  enable: true

代码：

1
2
3
4
5
graph LR
A[正方形] -- 链接文本 --> B((圆形))
A --> C(圆角矩形)
B --> D{菱形}
C --> D

效果：

graph LR
A[正方形] -- 链接文本 --> B((圆形))
A --> C(圆角矩形)
B --> D{菱形}
C --> D

六、常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#清理
hexo clean

#在4000端口启动一个本机的www服务，并且显示草稿
hexo server --drafts

#生成静态文件
hexo generate

#新建post文档
hexo new post 'doc name'

#新建草稿
hexo new draft 'draft name'

七、升级

今天用 hexo new 了一个新的博客，当作某个项目的知识库，结果无法显示图片，排查了半天发现是hexo的版本低了。这确实有点莫名其妙，估计是hexo安装的时候，某个环节取到了旧版本。

1
2
3
4
5
6
npm install -g npm-check
npm install -g npm-upgrade
npm-check
npm-upgrade
npm update
hexo -v