一、什么是Hexo
官方的定义:Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
可以说Hexo是一个基于node.js的博客工具,通过相应的命令将主题模板和写作内容相结合,生成静态页面,并上传至服务器。
二、Hexo命令
常用命令:
hexo init # 初始化 |
部分简写:
hexo n == hexo new |
组合命令:
hexo s -g # 生成并本地预览 |
三、文件目录
初始化后生成的目录如下:
├── _config.yml
├── package.json
├── scaffolds
├── source
├── _drafts
└── _posts
└── themes
_config.yml
网站的配置信息,可配置大部分的参数。
package.json
应用程序信息。EJS, Stylus 和 Markdown renderer 已默认安装,您可以自由移除。
scaffolds
模版文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。
Hexo的模板是指在新建的文章文件中默认填充的内容。当修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。
source
资源文件夹是存放用户资源的地方。除 posts 文件夹之外,开头命名为 (下划线)的文件/文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到public 文件夹,而其他文件会被拷贝过去。
themes
主题 文件夹。Hexo 会根据主题中的模板引擎和写作内容来生成静态页面。
四、工作原理
可以想一下,从hexo init到hexo deploy,发生了什么事?
1. hexo init
执行此条命令可以理解为在本地生成了一个博客模板仓库,这个仓库里有网站的模板引擎、博客主题的模板引擎、存放文章或资源的资源文件夹等。此时还没有生成要展现的html网页。
模板引擎的作用,就是将界面与数据分离。最简单的原理是将模板内容中指定的地方替换成数据,实现业务代码与逻辑代码分离。
2. hexo generate
这是一个将我们的数据和界面相结合生成静态文件的过程。将博客仓库里的主题网页模板(界面)和Markdown所写的文章内容(数据)相结合,生成了一个名为public的文件夹,文件夹里包括了由html、js、css、img建立的纯静态文件,可以通过index.html作为入口访问。
Hexo的模板引擎默认是使用ejs编写的。hexo首先会解析 md 文件,然后根据 layout 判断布局类型,再调用其他的文件,最终生成html 页面。这样每一块的内容都是独立的,可以提高代码的复用性。
模板引擎文件在主题下的 layout 文件夹下,不作详述。
3. hexo deploy
根据_config.yml中配置的git仓库地址,将public文件上传至GitHub中,再由GitHub提供的Page服务呈现出可外网访问的最终界面。
换个角度,从Markdown到html可以归纳为两次模板渲染
渲染过程 | 输入 | 模板引擎 | 输出 |
---|---|---|---|
第一次 | md文件 | yml和markdown | article:{ title: date: tags: content:} |
第二次 | 1.article对象 2.themes中的文件 |
themes/layouts 下的文件格式 |
public文件夹 |
第一次渲染主要目的就是给article对象添加title,content等属性,为第二次渲染提供准备。
第二次渲染需要引入对应模板文件格式的插件,将article和主题模板引擎相结合,生成public文件,这个文件是只读的,包含了整个博客网站的html, css, js, images。里面的所有内容都是根据模板引擎来生成的,所以想要修改内容需找到相关的模板进行修改后再生成即可。
Hexo和Github Page的联系
五、总结
简单来说 Hexo 就是生成静态页面的工具,将我们使用 Markdown 编写的内容与使用yaml 语言作配置文件、 ejs 作模板引擎的主题模板相结合,生成 HTML 静态文件。并且通过 Github Pages 将静态页面一键部署展现。