你需要一个博客吗？使用Hexo+安知鱼主题给自己的文章安个家
你需要一个博客吗？使用Hexo+安知鱼主题给自己的文章安个家
JonyLee现在是一个多媒体的时代，短视频成了大众最容易接受的传播媒介，但是我一开始就没有打算跟风做短视频，始终觉得这种快餐内容，就像一阵风一样来无影去无踪，无法沉淀知识。
Jony还是更喜欢以文字的形式来做分享，所以从今年三月份开始决定写微信公众号。
坚持写到现在已经快三个月了，慢慢发现写文章的好处很多，除了收获分享的快乐之外，也发现这些文章成为自己生活的一个脚注，有些内容自己翻翻回顾一下挺好的。
文章写的多了，有一些写好但是公众号发不出去的文章，以及一些稍偏技术类的不适合在公众号上发的文章，想给它们另外找个安身之地。
于是想为它们搭建一个在线博客。
博客建站工具有很多，我自己的工作作品集是用Wordpress搭建的，女儿喜欢写写画画，也用Typecho为她搭建了自己的写作博客。但是这些PHP程序，我感觉都不够轻，而且需要PHP服务器环境才能运行。
我的这些公众号文章，都是用Obsidian+Markdown写的，我想用一种更简单的方法，基于已有的内容快速搭建一个静态博客，最后我选择了【Hexo】。
Hexo博客是一种基于 Node.js 框架和 Markdown 文档格式的快速、简洁且高效的博客框架。
该博客环境搭建简单，用到了少量代码和命令行操作，但是其实你无需完全掌握这些，只要了解基本规则就行。加上有丰富的主题，很多文科生用Hexo创建的博客程序都很漂亮。
它最后生成的静态html网页文件，直接拷到任意虚拟主机vps，云服务器都可以部署，甚至如果你把它部署到全球最大的代码仓库Github上，不用花一分钱，就可以创建自己的博客网站。
废话有点多，下面Jony给大家演示一下从零开始搭建Hexo博客环境的步骤。大家看看难不难。
第一步：环境准备
Hexo的环境搭建，需要两个东西，就是前面说的Node.js和Hexo CLI，我们先来安装一下。
1. 安装 Node.js
访问 Node.js 官网，选择一个Node版本下载安装，建议下载长期稳定版本 LTS 版本（如 v18.x），安装的时候记得勾选 Add to PATH（这个很重要！这个会建立全局变量，支持你在任意位置使用Node.js）
安装完成之后，打开CMD输入版本查看命令验证安装：
1 | node -v # 显示版本号（如 v18.17.1） |
如果能正确显示版本号，就安装好了。
2. 安装 Hexo CLI
安装好Node之后，再安装Hexo框架，只需要一行安装命令：
1 | npm install -g hexo-cli |
这样你的Hexo博客基础环境就搭建好了，是不是很简单？
第二步：创建 Hexo 项目
在安装好Hexo博客基础环境之后，就可以开始初始化博客程序了，在你想要保存博客源代码的文件夹里，打开CMD。
tips:
小技巧：在文件管理器地址栏直接输入cmd回车，就会在该文件夹位置打开CMD窗口。
1. 初始化博客
本步骤的目的是安装博客程序的初始源码文件，CMD里执行以下命令：
1 | hexo init my-blog # 文件夹名称可以自己修改 |
等待源代码拉取完成即可。
2. 测试默认主题
初始源代码拉取完成之后，执行以下组合命令，然后浏览器访问最下面显示的地址，默认为 http://localhost:4000 。
1 | hexo clean && hexo g && hexo s |
如果可以显示以下初始页面，说明博客项目基本配置成功。
这时候其实你就可以在博客更目录的Source文件夹下面的_post写博客了，但是默认的主题比较简陋，建议安装一下主题。
第三步：安装博客主题
Hexo官网主题板块目前有423款主题，可以说非常丰富了，大部分都可以预览，大家可以根据自己的喜好挑选。这里Jony以【安知鱼主题】作为演示。
1. 下载主题
在Hexo主题页面搜索 anzhiyu ，找到安知鱼主题，点击访问 安知鱼主题 GitHub仓库，点击 Code → Download ZIP，直接下载最新源码，解压到前面步骤里创建的博客程序源码根目录，本文中示例为： my-blog/themes/anzhiyu
2. 修改 Hexo 配置
在博客根目录找到Hexo系统配置文件 _config.yml ，本文示例位置为： my-blog/_config.yml ,
修改theme的值为anzhiyu 。
1 | theme: anzhiyu # 修改主题名称 |
这样你的主题就切换成安知鱼主题了。安装其他主题修改名称同理。
3. 安装主题依赖
安知鱼主题需要另外安装两个专门的渲染器，用来将程序源码和文章渲染成主题样式的html静态网页文件。
在CMD里用命令行执行以下命令（照抄即可）：
1 | npm install hexo-renderer-pug hexo-renderer-stylus --save |
tips:
注意：很多主题都有详细的安装设置文档，大家在相应主题页面按文档操作即可，不同的主题可能需要安装不同的依赖，文档会给出安装命令，按命令操作就行。
第四步：配置安知鱼主题
这是安装主题之后最重要的一步，需要修改主题配置文件，把所有默认参数和页面素材链接或文件修改成你自己的内容，才能真正成为你自己的博客。
主要需要修改的是一个位于主题根目录my-blog/themes/anzhiyu下的 _config.yml 文件，需要注意的是，在修改主题配置文件的时候，需要先将它复制一份副本，并重命名为 _config.anzhiyu.yml ，拷贝到Hexo博客根目录即my-blog/下。
可以手动复制，也可以在CMD里用命令行复制，命令如下：
1 | cp themes/anzhiyu/_config.yml _config.anzhiyu.yml |
最终的文件夹结构如下：
1 | my-blog/ |
安知鱼主题有专门的文档：安知鱼主题官方文档，大家如果使用这款主题，直接去文档页按文档教程操作就可以了。
根据主题配置文档，个性化设置自己的博客，逐项完成编辑 _config.anzhiyu.yml 文件及创建页面。初次需要修改的内容比较多，以及替换一些站点图片素材，这里就不演示了。
第五步：生成静态文件 & 本地预览
配置过程中或者完全配置好之后，都可以生成静态文件并本地预览，看有没有问题，可以参照主题作者博客对照效果：安知鱼 - 生活明朗 万物可爱。
生成静态文件步骤如下，几条简单的命令，均使用CMD命令行操作：
- 清理之前生成的静态文件：
1 | hexo cl # 删除 public/ 文件夹 |
- 生成新的静态文件：
1 | hexo g # 生成新静态文件到 public/ 文件夹 |
- 本地预览
1 | hexo server # 启动本地服务器 |
访问 http://localhost:4000 查看效果。
第六步：部署博客
以上如果本地预览没问题，可以将位于 public/ 目录的静态文件，直接部署到服务器，无需上传其他源代码。具体步骤这里就不展开了。
我是直接免费部署在Github上的，博客里的文章会延迟于公众号发布，以下是成品，欢迎访问：https://blog.jonylee.top
常见问题解决
问题1：
构建时显示：YAMLException: can not read a block mapping entry; a multiline key may not be an implicit key 。
检查 yaml 配置文件里格式是否正确，常见的问题是主键后面的冒号:之后没有空格，编辑yaml配置文件时，要特别注意yaml文件格式，如缩进，特殊字符等。
建议使用有代码高亮和拼写检查功能的编程用文本编辑器如 Visual Studio Code 等来修改yaml文件。
问题2：
构建完成后访问 http://localhost:4000/ ，网页空白并显示：
1 | extends includes/layout.pug block content include ./includes/mixins/post-ui.pug #recent-posts.recent-posts include includes/categoryGroup.pug +postUI include includes/pagination.pug |
检查是否安装主题依赖文件：
1 | npm list hexo-renderer-pug hexo-renderer-stylus |
没有安装的话要记得安装，装完执行以下命令重新构建就好了。
1 | hexo clean && hexo g && hexo s |
问题3：
安知鱼主题构建后的网站图片显示不出来，但是图片链接直接访问没有问题。
检查Hexo主配置文件config.yml中的站点标题title: ，该值不能带有特殊符号比如最常见的英文字符上撇 ” ‘ “ ，改掉之后问题即可解决。
1 | # Site |
