hexo原理浅析

• 写在前面

昨天早上找前辈给阿里投的简历，没有想到晚上竟然就收到了电话面试。。。从早上到晚上。。。才十个小时。。。给阿里的效率跪了。。。我真是一点准备都没有，全程懵逼，感觉自己表现非常差。。。
今天回过头来仔细想了想昨天的问题，觉得其实问的确实很基础。大部分都是自己曾经做东西时遇到过的问题。没有流畅答出一方面是因为紧张，一方面也是对技术还缺乏深入的理解。
昨天面试官看我有个人网站，让我简单说说hexo的原理和机制。我觉得hexo就是对markdown文件的重新渲染和编排。今天想想，觉得他想问的不只那么多。
于是决定尝试分析下从创建页面到部署的整个流程。要学习的东西还有很多！

我之所以回答hexo是对markdown文件的重新渲染和编排。我想也不能算错，这是官方上对hexo的介绍：

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

但是，却觉得不满意，究其原因，我的着眼点很小，仅停留在博客内容本身，这和我最近一直在搞页面的美观有一定关系。但是如果放眼整个博客环境，值得研究学习的内容有很多。本文将从以下几个方面尝试分析。

• 内容

  • hexo的文件夹结构

  • 使用markdown编写的博客文章

  • 使用yaml编写的配置文件

• 表现

  • hexo的模板引擎

  • 独立于hexo主题的个性化主页

  • 细节之处的调整

• 发布

  • Git版本控制系统

  • GitHub Pages

  • 部署到自己的域名

内容

内容是一个博客的灵魂。

hexo的文件夹结构

.
├── _config.yml
├── db.json
├── node_modules
├── package.json
├── public
├── scaffolds
├── source #所有文章文件放在这里
└── themes #主题文件夹

_config.yml  站点的配置文件。
db.json   缓存文件
node_modules   安装的插件以及hexo所需的一些node.js模块。
package.json  应用程序信息，配置hexo运行需要的js包。
public  最终所见网页的所有内容
scaffolds   模板文件夹。当新建一个文章时，会默认包含对应模板的内容。
source  资源文件夹是存放用户资源的地方。所有的源文件都会被保存在_post文件夹中。除 posts 文件夹之外，开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
themes  存放主题文件，hexo会根据主题来生成静态页面。

使用markdown编写的博客文章

之所以选择hexo做博客一个原因就是它支持markdown。用markdown写文章感觉特别爽，只需要记住简单的几个语法，而且可以把全部的注意力放在文字本身上，而不用去过多的关注排版。

使用yaml编写的配置文件

yaml是专门用来写配置文件的语言。它用首行缩进表示层级关系，便于读写理解。

配置文件一般用来对所需环境进行设置。hexo中涉及到两个配置文件，一个是位于主目录下的，另一个是位于主题目录下的。

通常主目录下的配置文件用于对全站的配置，比如站点的基本信息，文章的布局，写作的格式，部署到github上的参数等等。

而主题目录下的配置文件用于对该主题的配置，比如站点导航栏的设置，一些插件的设置等。

表现

表现是一个博客的个性。

hexo的模板引擎

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

hexo默认的是使用ejs，同类型的东西还有很多，比如jade，swig。我选用主题是用jade的。
hexo首先会解析md文件，然后根据layout判断布局类型，再调用其他的文件，这样每一块的内容都是独立的，提高代码的复用性。最终会生成一个html页面。

jade采用缩进语法格式，和python比较类似，看上去也很舒服，我比较喜欢这种风格。在hexo中使用jade需要安装相应的模块，否则无法使用。

独立于hexo主题的个性化主页

如果对博客使用一个主题会觉得很单调，可以自己写一改完独立于主题样式的主页。这里，就要弄明白hexo每次部署的流程。

1. 每次执行hexo g命令时，hexo都会遍历主题文件中的source目录，这里的source主要包括css，fonts，js等文件，建立索引。

2. 根据索引会把主题文件生成到public文件中，此时public文件是一个由html，js，css等内容制作的博客，也就是网页的根目录。

3. 通过部署，hexo d 将 public 文件夹的内容以 git 方式 push 到 github 的指定项目的指定分支，由 github 进行显示。当然，也可以部署到自己的域名上。

在node_modules中有一系列的文件用于对hexo中的各类页面进行默认的渲染，如果要启动个性化主页，需要删除hexo-generator-index,同时，将主题目录下的source目录作为你个性化页面的根目录。

细节之处的调整

根据二八原则，细节之处的调整是那百分之八十，我花了很长时间来调整布局，颜色，整体效果。有一个功能，要还是不要，放在什么位置，都要想好久。

导航栏我就做过三个版本的，一种是汉堡按钮折叠式，一种是宽度自适应屏幕固定的，但最终还是选择这个样子。而且去掉了hexo有的分类和标签云。只留下主页，文章，和关于三个内容。

文字的布局也很头疼，主页上那句庄子的话，我至今看的很别扭，应该把它做成竖版，效果可能会更好。

还有一件事要注意，面试的时候被问到解释css盒模型。我觉得对盒模型用的挺熟，抽象的定义了网页内元素的布局及排版，支支吾吾又说了内边距，外边距，边框。回头查了定义，

CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

这竟然是定义。。。我只觉得自己学东西太浮躁，学了就想拿来用，忽略了对基本概念的准确记忆和认识。

发布

发布让博客拥有生命。

Git版本控制系统

这是我第一次正视git。当面试官问我项目都部署在哪里的时候，我脱口而出github。他再问我是如何部署的时候，我说我是用客户端。。。他又问我你不用git吗，我就没法接了。。。之前确实有看到过git这个版本控制系统，电脑上也装了，但毕竟自己在做东西，放在本地也没事，github还有客户端这种为我这样懒人设计的，所以基本用不到。

但是想到在一个企业里，很多人同时工作一个项目，其变化和意外情况不可预料，如果没有一个有效的版本控制工具，肯定会为企业带来很大的损失。

以后要锻炼使用git部署。

GitHub Pages

这部分网上有很多傻瓜教程，我也是跟着一步一步做的，没有遇到什么问题。

但如果细问，究竟原理是什么，机制是什么。我确实不知道，和远程部署一样，这部分内容是我应该重点学的。

部署到自己的域名

首先购买域名，服务器，或者虚拟主机。我是在主机公园上买的虚拟主机，加上域名，一年200+，不是很贵。域名和服务器都有了，需要解析，这在网上都有教程。

之后是部署，开始试着在主机公园上直接添加了WordPress，主要是为了分析网站的文件夹结构。搞清楚之后。 因为以前用过filezilla给远程主机传过文件，我认为原理上是一样的。

因为部署在github上展示的页面都在public文件夹中，所以只需要把文件传到虚拟主机的public中就可以了。但是我发现一个问题，这样太傻了。为什么没有自动化部署的工具，于是想起之前看过的技术贴，突然明白一些工具的用处。

• 总结

当我着眼仅仅着眼于怎么样让页面好看的时候，我根本没有关心过更大层面上的问题。部署，后台数据优化这些都是应该深挖的东西，我却草草略过。还有一个问题，逐帧渲染页面有没有什么更好的，当下更流行的方法，我也没有关注过。还是需要多看社区博客，把问题多看一眼，理解透一点，实践的同时也不能忽略基础概念的记忆与准确表述。

关于面试吧，要调整好心态。我记得孔子说过：“不患无位，患所以立。”机会总是有的，看自己能不能把握的住了。

我的个人网站：http://www.changshunwang.com