实践笔记：Hexo博客搭建与任务流探索

前言

1. 感想

在正式开始前，先讲讲我打算搭建一个博客的动机吧。我最初的打算时在我写完vladinena组件库与milize样式工具库后，写一个静态博客框架来构建我的个人博客；但是研究生的学习与研究任务实在是太重，光是slidev-theme-cqupt主题包的编写就花了我研一上的空闲时间，所以我想还是得先拿一个工具把自己再学习与研究过程中的所思所想都记录下来，以便我日后再次接触时快速上手。

研一上我都是直接在本地写markdown记录研究思考，但是等我想往回找之前的笔记时，搜索工作就成了大问题，无法有效检索的笔记简直就是废纸，纯浪费时间。我希望从这第一篇笔记开始记录我日后的实践与感想，希望在未来的某一时刻我看到这段话时能感叹：研究生三年时间真没白费！

我写这篇笔记仅用于记录探索Hexo + Typora的心得与收获，内容可能存在认知偏差或信息滞后，如果你在参考本文搭建你自己的博客时出现问题，欢迎与我联系。

2. 前置

以下是我的环境配置：

OS：windows 11；
IDE：webstorm 2024；
Env：nvm@1.1.12 + node@18.20.4 + npm@10.8.2；

根据我之前使用github actions的经验，这次我选择ci\cd + hexo的方式搭建与维护个人博客。经过调研我最终选择参考如下网站构建我的博客写作任务流：

hexo-theme-cactus:cactus:[简洁的设计保质期更长]；
typora+图床详解；

建站

关于Hexo如何建站，hexo-theme-cactus以及介绍得很详细了，我就不过多赘述；这里只介绍一下hexo-cli、cactus个性化与deploy的一些处理方法：

1. 个性化

常见的hexo主题的基础font-size都是设置为14px，这对于我的电脑屏幕（1080p）太小了，我需要更改它的样式设置；hexo字体大小设置其实是运用了rem与px的关系（详情参考掘金 | rem与px），简单的说rem是基于父级的px计算得来，与之相关的大屏适配与px2rem是一个常见面试问题；

cactus没有为所有的样式细节提供_config.yml的API，这需要去themes/cactus/source/css中去修改stylus编写的样式代码，更改细节我就不提了，如下是我更改了的板块：

字体文件：更改文件add、_fonts.styl；
Markdown渲染样式：更改文件style.styl；
其他样式：_partial、_variables.styl；

2. 部署

传统的hexo博客部署需要在本地有一个完整的hexo-site项目，这不便于我随时随地更新我的博客内容，因此我选择使用github actions来构建并部署网站。

hexo进行cicd部署的方式有两种：

使用hexo-cli的deploy部署：这需要在repository中配置DEPLOY_KEY与DEPLOY_PUB；如果你想通过此方法部署你的博客，可以参考GitHub Actions 来自动部署 Hexo。
使用hexo-cli的generate + github官方脚本deploy-pages@v4部署：这无需进行额外配置；

我在使用slidev-theme-cqupt时，发现当github执行actions时没有npm缓存，将会花费很长时间在npm install上，因此在编写soppy-ie/.github/workflows/deploy.yml时，我参考github docs添加了相应的缓存脚本：

- name: cache dependencies
  id: cache-dependencies-deploy
  # npm cache files are stored in `~/.npm` on Linux/macOS
  uses: actions/cache@v4
  env:
    cache-name: cache-node-modules
  with:
    path: |
      ~/.npm
    # add field 'deploy' to insulate different workflows
    key: ${{ runner.os }}-deploy-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-deploy-${{ env.cache-name }}-
      ${{ runner.os }}-deploy-
      ${{ runner.os }}-

- if: ${{ steps.cache-dependencies-deploy.outputs.cache-hit != 'true' }}
  name: list the state of node modules
  continue-on-error: true
  # npm list for debugging
  run: |
    echo 'deploy-modules-list'
    npm list

- name: install dependencies
  run: | 
    npm install
    npm install hexo-cli -g