浅谈Hexo博客搭建原理

我的博客采用Hexo框架+Butterfly主题+github pages(一开始使用)+vercel 进行部署

什么是Hexo

Hexo官网

在 Hexo 的官网，我们可以直观的看到对 Hexo 的介绍：快速、简洁且高效的博客框架

在 Hexo 的文档中，我们可以找到官方对 Hexo 的定义：

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

在官方文档中安装了 Hexo 中我们就安装了 Hexo，然后我们就可以看到文档结构如下：

_config.yml：
博客网站的配置文件，包含了网站的配置、网址配置、目录配置、主题配置等关键信息。
用户可以根据自己的需求对配置文件进行修改，以定制博客的显示和行为。
package.json：
应用程序信息文件，包含了Hexo及其相关依赖包的版本信息。
通过查看该文件，用户可以了解当前博客项目所使用的Hexo版本以及所有依赖包的版本。
scaffolds：
模板文件夹，用于存放新建文章时预设的模板。
当用户使用Hexo命令生成草稿、页面或文章时，Hexo会复制这些模板文件，并根据用户的输入填充相应的内容。
source：
资源文件夹，用于存放用户资源，如图片、Markdown文档、文章、草稿等。
其中，_posts文件夹用于存放文章的Markdown源文件。Markdown和HTML文件会被解析并放到public文件夹下，而其他文件会被直接拷贝过去。
themes：
主题文件夹，用于存放Hexo的主题文件。
用户可以选择并下载自己喜欢的主题，然后将主题文件解压到该文件夹下。在_config.yml文件中修改theme配置项，即可指定博客使用的主题。
public：
静态文件生成后的存放文件夹。当用户运行hexo generate命令时，Hexo会根据source文件夹下的Markdown文档和themes文件夹下的主题文件，生成静态网页文件，并将其存放在该文件夹下。
其他文件和文件夹：
.deploy_git：部署到Git平台（如GitHub Pages）时生成的文件夹，内容与public文件夹基本一致。
node_modules：存放Hexo及其依赖包的文件夹，通过npm install命令生成。
db.json：Hexo生成静态文件时使用的数据库文件，包含了博客的所有文章、页面和配置信息。

然后我们可以安装主题，比我我安装的 Butterfly主题，安装完之后会在themes下面产生一个 butterfly 文件存放主题中的内容。

github的pages服务

其实 github 的 pages 服务不只是可以展示博客，你的每一个 github 仓库都有 pages 服务，可以通过简单的设置通过项目的 index.html 为入口展示你的项目

Hexo 的工作原理

这里我们来分析一下 Hexo 每次部署的流程

hexo g：生成静态文件。将我们的数据和界面相结合生成静态文件的过程。会遍历主题文件中的 source 文件夹（js、css、img 等静态资源），然后建立索引，然后根据索引生成 pubilc 文件夹中，此时的 public 文件是由 html、 js、css、img 建立的纯静态文件可以通过 index.html 作为入口访问你的博客。
hexo d：部署文件。部署主要是根据在 _config.yml 中配置的 git 仓库地址，将 public 文件上传至 github中。然后再根据上面的 github 提供的 pages 服务呈现出页面。当然你也可以直接将你生成的 public 文件上传至你自己的服务器上。

Hexo的模板引擎

模板引擎的作用，就是将界面与数据分离。最简单的原理是将模板内容中指定的地方替换成数据，实现业务代码与逻辑代码分离。

我们可以注意到，在 Hexo 中，source 文件夹和 themes 文件夹是在同级的，我们就可以将source 文件夹理解为数据库，而主题文件夹相当于界面。然后我们 hexo g 就将我们的数据和界面相结合生成静态文件 public。

Hexo 的模板引擎是默认使用 ejs 编写的(Pug 是一个高性能的模板引擎，开发者可以使用 Pug 来创建可重用的模板，并根据用户数据或业务需求动态生成 HTML 内容)。hexo首先会解析 md 文件，然后根据 layout判断布局类型 (layout 指的是站点中用于定义页面布局的模板文件。这些布局文件决定了网站内容的呈现方式和页面结构。在 Hexo 中，layout 通常位于主题目录下的 layout/ 文件夹中。)，再调用其他的文件，这样每一块的内容都是独立的，提高代码的复用性。最终会生成一个 html 页面。

Hexo 支持多种模板引擎来渲染网站的布局和内容。你可以根据自己的喜好和需求选择适合的模板引擎

总结

非要说 Hexo 是什么的话，我觉得就是生成静态页面的工具，可以将我们使用 markdown 编写的内容与主题模板相结合，生成 HTML 静态文件。并且可以和 github 的 pages 或者其他可以将静态页面展现出来的服务（例如 coding 的 pages 服务）相结合，一键部署。

再深入一点讲 Hexo 的原理的话，那就应该是使用 yaml 语言做配置文件，使用 ejs 或者 swig 作为主题模板，与使用 markdown 书写的内容结合，生成静态 HTML 文件。