实践笔记：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如何建站，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部署的方式有两种：

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

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

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
- 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

以下是我参考的文档的链接：

此外，我还使用了在这几年常用的cicd任务流工具来优化代码提交，版本更新等流程，后续我会开一篇新笔记讲讲这些任务流工具及其原理[ :) 请原谅我立了个FLAG🚩]；

图床

关于如何搭建typora + picgo + tencent cloud cos图床任务流网上的教程已经十分详尽了，这里我只简单介绍搭建图床时我认为重要的点。

1. PicList与COS

我需要在图床软件中管理腾讯云对象存储cos中的图片数据，因此选择采用PicGo的改进版本PicList来管理图床；当我们配置图床时有如下信息需要我们手动填写，我在这里列出它们的获取链接：

PicList除了支持云端同步管理之外，还支持高级重命名与对象存储管理，这里我就不过多介绍了，详情参考它的官网：PicList；

2. Typora

最后，我只需要在typora中完成如下设置即可：

typora_settings

结尾

愿此程山海，以破茧之姿逐光而行；

音乐分享🎸：森七菜「深海」；