博客搭建

1. 动机

自工作以后，公司的两点企业文化对我的影响很大，分别是：

• Lifelong Learning
• Learning by Doing

基于以上两点，有必要建立一个知识库，便于随时记录工作和学习中的一些感想。

知识库应该满足以下几点要求：

• 不依赖第三方软件 → 遂放弃使用 Notion、语雀、Obsidian等笔记软件，选择博客的方式建立知识库
• 不需要额外维护服务器 → 遂放弃使用 Docsify、DokuWiki、Gitbook 等 Wiki 系统，以 Github 作为服务器进行部署
• 不需要过多的编程知识 → 遂选择基于 Nood.js 的 Hexo 静态博客生成器
• 不需要花里胡哨的布局 → 遂选择 Tree 主题进行创建

2. 博客特点

• 基于 Markdown 写作
• 基于 Pandoc 渲染
• 支持 Latex 数学公式
• 支持 Mermaid 图表

3. 搭建思路

搭建思路如图所示：

flowchart TB
id1["Markdown 编辑器"]--"Markdown 文件"--> 本地文件夹 --"Node.js 中的 npm package"--> id2["本地 html 文件"] --"Git Bash 同步" --> id4["Github 仓库"] --"Github Pages 生成网站" --> 在线博客

4. 搭建过程

1. 安装以下 Package：
   • Git
   • Pandoc
   • Node.js
     • npm
     • hexo
2. 通过邮箱免费申请 Github 账号
   • 创建和用户名相同的仓库（Repository）：Github用户名.github.io
   • 生成 ssh Key
   • 在 Github 添加生成的 ssh Key
3. 使用 Hexo Tree 主题
   • 删除主题自带的 hexo-renderer-marked
   • 安装插件
     • hexo-renderer-pandoc
     • hexo-math
     • hexo-filter-mermaid-diagrams
   • 配置根目录和主题目录中的 _config.yaml 文件
4. 发布文章
   • .md 文件保存至根目录下的 source/_posts 文件夹
   • hexo g 生成博客框架
   • hexo d 部署至服务器

5. 不足之处

本博客依然存在许多不足：

• 二级目录中的 Markdown 文章不提供侧边栏目录展示功能
• 全站搜索仅支持标题搜索，无法搜索单个文档中的关键字
• Latex 无法像正常 Markdown 语法一样使用 $$ 渲染数学公式，需要把美元符号换成标签符 {% mathjax} {% endmathjax%}
• 数学公式和正文之间的间距无法自动适配，需要额外加入两行空格
• Mermaid 需要在 Front Matter 中手动开启
• Mermaid 图表需要二次刷新才能正常显示

6. 总结

尽管依然存在诸多不足，但是对于我这种零基础的前端小白而言，目前的博客作为知识库是绝对够用了。需时刻谨记，搭建博客的目的是为了更好地输出创作内容，而非博客形式本身。