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