前言 {#前言}

Hexo官网-----快速、简洁且高效的博客框架： https://hexo.io/zh-cn/

在不断学习的过程中对个人博客的技术选型又有了新的想法，想搭建一个自己喜欢的UI风格并且有后台的博客CMS

于是回过头来，开始对hexo原理好奇起来，本着知其然更要知其所以然的态度，搜了许多有关资料，现在对hexo有了些新的认识，就来梳理记录一下

梳理一下Hexo的优缺点之我见

优点：

生态丰富，好看的主题多
相关文档多，解决bug有优势
通过修改yaml配置文件来修改样式比较简单

缺点：

初次配置会遇到各种各样的bug，对新手和非专业人员不是很友好
每次发布文章都需要重新部署，没有一个后台管理系统
对于程序员来说，还是得拥有一个自己亲手撸的个人博客

首先需阐明的是本文用window系统为例，而有相当一部分Hexo是搭建在LNMP或LAMP环境下的，但这一切仅仅是物理存储位置发生了变化，原理依旧不变。 LNMP指的是 linux+nginx+mysql+php，这是一款功能非常强大的环境套件，nginx以其轻量而高效受到建站者的青睐

Github page {#Github-page}

Hexo搭建的博客项目源码托管在github，并享受github pages服务。

GitHub pages简称pages服务，每个仓库都有一个pages服务，可用来展示项目，通过简单的设置项目的index.html，并以此做为入口供用户参观访问。可是一个相当实用的功能呀！大部分的 pages 服务都是用来搭建个人博客的。言外之意不仅能搭建博客，还能做些其他的事情~

为什么需要Pages技术

生成博客的页面有动、静态页面之分

著名的博客 wordpress ，既是动态页面生成的博客，其思路是 php + MySql

博客hexo生成的是静态页面，而Github pages 又支持静态页面的解析。因此二者一拍即合能够用来生成 html 拼合成博客。

静态页面意味着评论、分享等功能得依赖于第三方插件，但它所带来的轻量、高效是动态页面所不及的！！！

Hexo {#Hexo}

从上面我们了解到 Hexo 是用来生成 HTML 的，那么这章我们就主要来讲一下 Hexo 是怎样生成 HTML 的

什么是Hexo {#什么是Hexo}

在官网中Hexo被介绍为快速、简洁且高效的博客框架。

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

工作原理 {#工作原理}

hexo的文件架构

|---------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 | ├── node_modules： #依赖包-安装插件及所需nodejs模块。 ├── public #最终网页信息。即存放被解析markdown、html文件。 ├── scaffolds #模板文件夹。即当您新建文章时，根据 scaffold生成文件。 ├── source #资源文件夹。即存放用户资源。 | └── _posts #博客文章目录。 └── themes #存放主题。Hexo根据主题生成静态页面。 ├── _config.yml #网站的配置信息。标题、网站名称等。 ├── db.json： #source解析所得到的缓存文件。 ├── package.json # 应用程序信息。即配置Hexo运行需要js包。 |

首先本地文件夹的source就是数据库，以.md（markdown）格式存储文章，theme文件夹是主题文件（决定页面模板）。

我们可以通过部署流程来逐步详尽分析。以下先来了解hexo有哪些部署命令，再分析部署的步骤流程

hexo可以粗略分为三个子项目，分别是

|---------------|-------------------------------------------------------------| | 1 2 3 | - hexo-cli - hexo (下文中用hexo core来指代) - hexo plugins |

其中hexo plugins不是指某一个单独的项目，而是泛指所有的hexo plugin项目

请看下图：

hexo-cli：hexo命令行，作用是：

启动hexo命令进程和参数解析机制。每次我们输入hexo xxx命令后，都会通过node调用hexo-cli中的entry函数(比如，可以把'hexo init'视为'node hexo-cli/entry.js init')，hexo init命令仅仅在安装时调用

实现hexo命令的三个初始参数：init/version/plugins

加载hexo核心模块，并初始化

hexo core：hexo核心，作用是：

实现hexo的new、generate、publish等功能

hexo plugins: 指一些能够扩展hexo的插件。插件可以按功能分成两类:

扩展hexo命令的参数，如hexo-server(安装这个插件以后才能使用hexo server命令)

扩展hexo解析文件的"能力"，如增加jade模版解析功能的hexo-render-jade插件

每次部署的流程 {#每次部署的流程}

hexo g ：生成静态文件。将我们的数据和界面模板相结合生成静态文件的过程。Hexo（node.js程序）遍历主题文件中你的source目录（js、css、img等静态资源），建立索引，再根据索引生成由html、js、css、img建立的纯静态文件并放在public文件夹里。public就是你的博客了，而这些恰好能被gitpages识别。
hexo d：部署文件。主要是根据在_config.yml中配置的git仓库或者coding的地址，将public文件通过git方式push到上传到github或coding的指定分支，然后在根据pages服务呈现出页面。当然把public文件部署至你的服务器也是可以的

图为git主要命令

模板引擎--Hexo怎样生成HTML {#模板引擎–Hexo怎样生成HTML}

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

请看Hexo文件结构，source文件夹与themes文件夹是同级的，进而我们就可以将source文件夹理解为数据库，而主题文件夹相当于界面。hexo g就将我们的数据和界面相结合生成静态文件public
Hexo模板引擎默认使用ejs编写（本文以ejs模板举例，其他的有swig、jade）。hexo首先会解析.md文件，然后根据layout变量判断布局类型，再调用相应布局文件，如此这番每一块内容都是独立的，提供代码的复用性。最终生成一个html页面
布局模板文件位于layout文件夹下，以下将布局模板 简称模板。layout文件结构在不同主题下文件排布不一，但整体框架是一样的，有：
- 公共模板。里面引入了head、footer等公共组件，在其他模板下会自动引入公共模板
- 首页模板
- 文章模板
- 分类模板
- 归档模板
- ...... 每个模板都默认使用layout布局，您可在文章的前置申明中指定其他布局，比如"post"或者"page"或是设为false来关闭布局功能（如果不填默认是post，这个在_config.yml中可以设置默认值），您甚至可在布局中再使用其他布局来建立嵌套布局。
  
  在我们新建页面或者新建文章的使用可以选定我们使用的模板。hexo new [layout] <title>就会使用对应的模板
模板是可以自定义的

数据填充 {#数据填充}

上面解释了界面的原理，此篇将分析数据及数据如何与界面结合。

数据的填充主要是 hexo g 的时候将数据传递给 ejs 模板，然后再由 ejs 模板填充到 HTML 中。

配置文件中的数据 {#配置文件中的数据}

Hexo 的配置文件 _config.yml 使用 yml语法。例如博客的名字、副标题等等之类。这些数据项组织在 config 对象中。可以数字、字符串、对象、数组，

配置文件中数据的使用 {#配置文件中数据的使用}

如果要在模板中使用某个具体的值，比如字符串、数字、逻辑变量或者对象的某个成员，可以在主题的模板文件 ejs中直接使用：

|-----------|--------------------------------------------------------------------------------| | 1 | {% block title %} {{ page.title }} | {{ config.title }} {% endblock %} |

Hexo 中的变量 {#Hexo-中的变量}

Hexo 提供了很多的变量，比如我们上面使用的 page 变量，还有 site 变量等，这些都是 Hexo 提供的，我们可以拿来直接使用的，常用的变量有：

site：对应整个网站的变量，一般会用到 site.posts.length 制作分页器。
- site.posts 所有文章
- site.pages 所有分页
- site.categories 所有分类
- site.tags 所有标签
page：存放当前页面的信息，例如我在 index.ejs 中使用 page.posts 获取了当前页面的所有文章而不是使用 site.posts。
config：config 变量我们在主目录下配置文件 _config.yml 中保存的信息。
theme：theme 变量是我们在主题目录下配置文件 _config.yml 中保存的信息。
path：当前页面的路径（不含根路径）。
url：页面完整网址。

页面变量 {#页面变量}

Page(page) 这里指的是 hexo new page 创建的那个页面

page.title：文章标题
page.date：文章建立日期
page.updated：文章更新日期
page.comments：留言是否开启
page.layout：布局名称
page.content：文章完整内容
page.excerpt：文章摘要
page.more：除了摘要的其他内容
page.source：文章原始路劲
page.full_source：文章完整原始路径
page.path：文章网址（不含根路径），通常在主题中使用url_for(page.path)
page.permalink：文章永久网址
page.prev：上一篇文章，如果此为第一篇文章则为null
page.next：下一篇文章，如果此为最后一篇文章则为null
page.raw：文章原始内容
page.photos：文章的照片（用于相册）
page.link：文章的外链（用于链接文章）

Post(post) 变量 {#Post-post-变量}

这里指的是文章页面，与page布局相同，添加如下变量：

page.pulished：文章非草稿为true
page.categories：文章分类
page.tags：文章标签

首页(index) {#首页-index}

page.per_page：每一页显示的文章数
page.total：文章数量
page.current：当前页码
page.current_url：当前页的URL
page.posts：当前页的文章
page.prev：前一页页码，如果为第一页，该值为0
page.prev_link：前一页URL，如果为第一页，则为''
page.next：后一页页码，如果为最后一页，则为0
page.next_link：后一页URL，如果为最后一页，则为''
page.path：当前页网址（不含根路径），通常在主题中使用url_for(page.path)

归档页(archive) {#归档页-archive}

与index布局相同，但是新增如下变量：

archive 为true
year 归档年份（4位）
month 归档月份（不包含0）

总结 {#总结}

本质而言Hexo是一款静态页面生成工具

基于Hexo搭建的博客原理简单的说，是一个数据和界面的结合体。数据以.md与.html等格式存储于数据库source文件夹中，界面存于themes文件夹中。每次运行hexo g命令，遍历数据建立索引，根据索引把主题界面文件生成至public文件夹中，即html文件。再运行hexo d将文件托管，由pages服务显示。

参考链接：https://blog.csdn.net/Night__breeze/article/details/122389128
参考链接：https://juejin.cn/post/6844903490930622471