博客搭建报告
0.前言
我在22年上半年曾经部署过一次个人博客，用的是Hexo默认主题，而且连内容也没修改过。当时消磨我三分钟热度的最大原因是网络，不科学上网的话顺利同步到GitHub仓库纯看脸，外加本科期间没怎么用过GitHub（虽然现在也只会基操），因而半途而废了。后来转战csdn和博客园，想记录一些前后端开发经验以及论文随笔，但嫌上传图片麻烦以及不熟悉用$\LaTeX$码公式，最后也不了了之。得益于开源课的契机，让我再一次部署博客，按照教程和官方文档的指引，整个部署流程比较顺利。为便于自己后续维护或创建新博客，下一节记录了搭建全流程。
1.搭建博客流程
1.1.安装Node.js
Hexo基于Node.js，官网下载18.15.0版本的安装包，添加环境变量、修改全局包路径，在命令行中输入node -v检验是否安装成功。添加环境变量及修改全局包路径可参考。
1.2.安装Hexo
新建一个文件夹存放博客文件，以管理员身份在该目录下打开命令行，输入：
1 | npm install -g hexo-cli |
安装完成后初始化博客，输入：
1 | hexo init hexo-blog |
上述三行命令初始化了名为hexo-blog的项目并在该目录下生成初始化文件，进入该目录，npm安装必要包。
1.3.安装Fluid主题
Hexo5.0.0版本以上，推荐通过npm直接安装，进入博客目录执行命令：
1 | npm install --save hexo-theme-fluid |
然后在博客目录下创建_config.fluid.yml，将_config.yml的内容复制进去。
修改博客目录中的_config.yml：
1 | theme: fluid # 指定主题 |
首次使用主题的「关于页」需要手动创建：
1 | hexo new page about |
创建成功后修改/source/about/index.md，添加layout属性，修改后的文件示例如下：
1 | --- |
更新主题，在博客目录下执行命令：
1 | npm update --save hexo-theme-fluid |
1.4.创建仓库并部署
在GitHub上创建一个仓库用于保存博客文件。注意仓库名必须是<用户名>.github.io。
为了上传博客文件，需要修改博客目录的_config.yml文件的deploy，设定type、repo、branch字段。
1 | deploy: |
最后，回到命令行输入：
1 | hexo d |
此时代码已更新到仓库中，等待片刻在浏览器输入https://用户名.github.io/，即可访问一个Fluid主题初始化的个人博客。
1.5.设计页面及撰写博客
如何在默认博客的基础上自定义自己的内容，具体可以参照Fluid用户手册。
常用的命令，例如新建一篇文章：
1 | hexo new 文件名 |
本地调试时，输入：
1 | hexo clean # 清空博客文件缓存 |
本地调试完毕后部署到仓库即可。
2.博客主题及其选取原因
我参考的两篇教程都提及了Fluid，访问Fluid官网提及的两个预览网站，简洁且不简陋符合我的审美，就决定是它了！
正如Fluid的自述，它是一款Material Design风格的Hexo博客主题，主打“简洁至上”、“丰富配置”、“充满活力”。
- 简洁至上 除了首页浮于背景图之上具有“打字机”效果的文字，页面其余部分不存在花里胡哨的动效，默认配色统一，菜单清晰明朗。
- 丰富配置 一方面Fluid提供了丰富的“归档”、“分类”、“关于”等实用页面，另一方面通过修改配置文件的各种字段可以自定义样式。
- 充满活力 Fluid不仅在官网上提供完备的用户手册，作为一款开源框架，Fluid团队在Github上积极回应用户问题、版本更新迭代。
3.博客功能实现及其技术选择
按照页面阐述功能实现。
- 首页 展示背景图和欢迎文字，下滑是文章列表，文章含封面图、标题、摘要、日期、类别和标签，点击后查看文章详情。
- 归档 以时间线呈现所有文章，点击后查看文章详情。
- 分类 展示所有分类，展开某一分类将显示该分类下的所有文章，点击后查看文章详情。
- 标签 以词云的形式展示所有标签，标签大小取决于含有该标签的文件数量，点击标签后展示对应文章。
- 关于 展示个人信息，提供联系方式等。
- 搜索 在博客网站范围内搜索包含搜索内容的文章。
- 配色 在白与黑两种配色模式间切换。
涉及的技术及环境包括：Git Page, Git, Node.js, Hexo, Fluid, Markdown, Frontmatter……
4.搭建过程中的问题及解决方法
4.1.关于图片命名与路径
问题1 初次生成Fluid默认博客后，想将「关于页」的头像改成自选图片，找到默认头像的图片位于博客目录/public/img/avatar.png，于是删除该图片并用重命名后的自选图片替代。然而无论怎么重启hexo，页面上的头像依旧不变。并且，一旦执行hexo clean后，自选图片就会再次被默认图片替换掉。
解决1 问题在于路径，public下的文件都是在执行hexo g后生成的，一旦生成后，无论怎么修改public下的内容，都不会在页面中体现。正确的做法是将图片存放在博客目录/source下，执行hexo g后，会把source下的文件与public合并，从而将自选图片（以及用户自行添加的其他文件）复制入public，并最终呈现在页面上。同时，hexo clean只会清理掉public下的文件，不会影响source下的文件，因此自选图片和自定义文件不会被替换或清理掉。
问题2 尽管解决了问题1，但从页面上看「关于页」的头像依然是默认图片，不过文字已经按照我修改的发生了变化。查看public下的文件，修改后的文章内容被复制了，但自选图片却没有。
解决2 问题在于自选图片和默认图片的文件名一致，导致source下的自选图片在执行hexo g后仍然无法被复制到public。因此修改自选图片的文件名，并且将_config.fluid.yml文件的about的avatar字段修改为自选图片文件名。再次生成，发现头像已被替换为自选图片。
4.2.关于无法加载LaTeX文本
问题 Markdown支持LaTeX，但实测后发现无法渲染。
解决 在Fluid用户手册上找到了解决办法，Fluid默认关闭渲染LaTeX功能，需要在_config.fluid.yml文件中设置math字段为true。官方提到，math下的specific建议设为true，这样只有在文章Frontmatter里指定math: true才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度。
4.3.关于无法加载图片
问题 JPG图片已放入source文件中，markdown文件索引了该图片，hexo本地运行图片加载成功，但部署到github上后，图片无法加载。
解决 图片的后缀是大写的JPG，但在markdown中以小写jpg索引该图片，也许本地服务器容错能力较强，使得本地可以渲染。修改为大写后再部署，图片成功在网页上加载。