使用 Hexo 构建个人博客

Demo: https://mrgodfrey.github.io/blog

使用的主题是: tufu9441/maupassant-hexo: A simple Hexo theme forked from icylogic.

为什么是 Hexo

在这个网站可以看到近期比较热的静态网页生成器。

  1. hugo —— 文档写的相当好，编译速度也非常快
  2. hexo —— 发展比较久，模板多

我之前用过 Hexo，故在静态网页生成中不做选择。

Blog Tool, Publishing Platform, and CMS – WordPress.org 是一套前后端结合的博客系统，需要自己从服务器开始搭建。但是因为其需要包含庞大的后端，故虽然生态更好，也不做选择。

基本部署

我目前采用的是分成几个仓库的构造方法。

  1. 主页是参考 PhosphorW/hexo-theme-academia 主题生成的主页，直接写的 index.html
  2. thinking 和 toolbox 是我利用 docsify 写的，同样保存在 mrgodfrey.github.io 的仓库中
  3. blog 是我利用 Hexo 生成的个人博客，源文件是保存在私有仓库中

本地部署

安装的流程可参考文档 | Hexo

在本地安装好后，需要利用 One-Command Deployment | Hexo 中的 hexo-deployer-git 方法部署到服务器中

  1. 在 hexo 项目目录下运行安装 hexo-deployer-git
1
npm install hexo-deployer-git --save
  1. 在 _config.yml 中配置
1
2
3
4
deploy:
  type: git
  repo: https://github.com/MrGodfrey/blog.git
  branch: gh-pages

这里将推送的分支设置为 gh-pages, 参考了 issue 中的设置方法。此举的目的是为了之后使用 Github 自动部署网页.

为什么不直接用 master 呢？ 因为 master 分支中有不少内容是不需要被部署的，是 Hexo 运行依赖的东西。

  1. 用 hexo clean && hexo deploy 将本地发布的内容推送到 gh-pages 分支

Github 设置

  1. 在 Github 存放 Hexo 文件的仓库, 我的是 blog 中， 点击 setting->Pages, 选择 Deploy from a branch.

不选择 Action 是因为我暂时还想在本地编译我的 Hexo 站点， 而非直接交给 Github 编译

  1. 选择 Branch 为 gh-pages , 目录就是 /(root), 即可

参考

  1. Configuring a publishing source for your GitHub Pages site - GitHub Docs

小配置

!> Hexo 支持很多插件，可以看Plugins | Hexo.

使用GitHub管理Hexo源文件时在子目录下找不到 Hexo

原因: 之前按照说明, 只是安装了Hexo的驱动程序. 从Github上同步下来Hexo 源文件后, 需要在目录中运行 npm install才能在当前目录装上 hexo

npm install是一个命令，用于安装Node.js项目依赖的所有模块。它会在项目目录下查找package.json文件，读取其中的依赖项，并自动下载和安装这些依赖项。通过npm install命令，可以方便地管理项目的依赖项，保证项目的正常运行。

如何支持数学公式

在 Plugins | Hexo 中使用 next-theme/hexo-filter-mathjax: 💯 Server side MathJax renderer plugin for Hexo. 插件即可.

注意到出现下划线 _ 以及 \ 时， 由于会先调用 mark.js, 导致被转义为 html 标签，显示出问题的话，需要使用 \_, 以及 \\.

MathJax 还有一个特性是， 无法在小屏幕的设备上正确渲染含有 \tag 的公式, 具体表现在超长。 从 MathJax 的适用范围来看，最好直接避免写带有 \tag 的公式，因为如果需要频繁的引用之前的式子，那么最好直接用 LaTeX 写成pdf文档。

如何支持站内搜索

插件: wzpan/hexo-generator-search: A plugin to generate search data for Hexo.

配置文件:

1
2
3
4
search:
  path: search.xml
  field: post
  content: true

在模板 tufu9441/maupassant-hexo: A simple Hexo theme forked from icylogic. 的设置文件中设置

1
self_search: true ## Use a jQuery-based local search engine, true/false.

然后在 widgets: 中打开 -search.

如何支持评论

评论系统需要前后端配合，增加网站的复杂性。更为重要的是，我的网站不需要评论系统。若想与我交流，可以直接联系我。

如何插入图片

可以采用 Hexo 支持的资源文件系统。

  1. 在 _config.yml 中设置 post_asset_folder: true
  2. 使用 hexo new title 新建文件后，会在source目录中出现 title 文件夹，将图片 slug 拷贝进去
  3. 在 title.md 中使用 {% asset_img slug [pic title] %} 即可

可以使用 Google 开源的 squoosh 压缩图片大小. 我在 maupassant 主题 一文中给出了利用 python 脚本更加优雅的实现方法。

如何添加小图标

在 source 文件夹中放入 favicon.ico, 在 _config.yml 中添加

1
favicon: favicon.ico

如何将博文置顶

可参考 hexo博客文章置顶功能实现的两种方法_51CTO博客_hexo博客怎么写文章

  1. 卸载 index generator
1
npm uninstall hexo-generator-index
  1. 安装 hexo-generator-index-pin-top
1
npm install hexo-generator-index-pin-top --save
  1. 在文章的引言部分加入 top: 1 即可

为了添加置顶的效果，我所用的主题可以在引言中添加 sticky: true.

如何在 VSCode 中设置 alias 缩短命令长度

  1. 使用命令touch ~/.bash_profile 在主目录创建 .bash_profile

  2. 在该文件中添加 

    1
    2
    3
    4
    5
    hexop() {
      git stage . && git commit -m "写文章" && hexo g && hexo d && git push
    }

    alias hexop='hexop'

    即可用 hexop 来保存发布文章

注意：若用的是MAC系统，默认的shell为zsh，所以需要改动 zshrc 文件

如何加密博文

  1. 使用 hexo-blog-encrypt 插件

主题开发

我自己修改的maupassant 主题。

可以参考

  1. 编写自己的 Hexo 主题 | Easy Hexo 👨‍💻
  2. 从 0 到 1 开发 Hexo 主题杂谈 | Liuyib’s Blog