【hexo源码系列】 入门

为什么要看源码

能够更便捷高效的管理博客，比如

• 更新Hexo: 需要了解hexo init的源码，因为该命令隐藏了hexo-starter项目 ()
• 更新theme: 某些bug-fix以及new feature。可借助git的submodule来高效管理
• 定制博客(个性化): (比如添加edit button，添加URL哈希，个性化主题。需要了解模板原理

源码不用细看，看个大概能满足自己的需求就够了。

本文仅介绍Hexo基础包，扩展包可参考【Hexo插件系列】博客。

查看Hexo和Plugin版本

首先看一下自己的Hexo和Plugin版本，因为不同的版本是不同的实现。版本号是次要的，主要看是不是同一种包。比如hexo-deployer-git和hexo-deployer-rsync在执行hexo d命令时方式就不同。详见官方文档

查看package.json文件的依赖项。

"dependencies": {
  "hexo": "^3.7.0", # https://github.com/hexojs/hexo/  hexo仅仅是一个module而已，用于...
  "hexo-generator-archive": "^0.1.5",  # generator最复杂
  "hexo-generator-category": "^0.1.3",
  "hexo-generator-index": "^0.2.1",
  "hexo-generator-tag": "^0.2.0", # nodejs的模板引擎，有EJS、Jade、Swig、Haml。theme-next采用的swig
  "hexo-renderer-ejs": "^0.3.1",
  "hexo-renderer-stylus": "^0.3.3",
  "hexo-renderer-marked": "^0.3.2",  # markdown的render engine，即`.md`转`html`
  "hexo-server": "^0.3.1"
}

也可用以下命令查看版本：

$ npm ls --depth 0

更新各个模块，命令 npm update

回顾Hexo搭建流程

以下来自官方文档

# 1. Installation
$ npm install hexo-cli -g

# 2. Setup your blog
$ hexo init blog
$ cd blog

# 3. Start the server
$ hexo server

# 4. Create a new post
$ hexo new "Hello Hexo"

# 5. Generate static files
$ hexo generate

流程详解

1. npm install

npm是nodejs的包管理器，管理javascript lib
hexo-cli是nodejs的一个包，用于运行hexo命令。(有cli难道还有server？)

npm list -g 能够看到安装路径。一般在/usr/lib/node_modules/ 或者/usr/local/lib/node_modules/

2. hexo init

hexo init命令做了什么？

答案

hexo init等价于以下两行shell命令。

# 1. Cloning hexo-starter to blog
$ git clone --recursive https://github.com/hexojs/hexo-starter.git blog
# 2. Install dependencies
$ npm install --production

看到这里，就够用。如果自己的hexo项目是老版本的，可以在这个仓库pull更新(虽然更新很少)。
如果对追寻答案的过程感兴趣，可以继续往下看。

追寻答案的旅程 - optional

首先看一下hexo

$ which hexo
/usr/bin/hexo

$ cat /usr/bin/hexo
#!/usr/bin/env node
'use strict';
require('../lib/hexo')();

这里你会发现，hexo命令是nodejs脚本。 ../lib/hexo对应的是usr/lib/hexo，然而没有path。

$ ls -l /usr/bin/hexo
 /usr/bin/hexo -> ../lib/node_modules/hexo-cli/bin/hexo

原来/usr/bin/hexo是个符号链接，链接到nodejs的modules目录里。

$ cat /usr/lib/node_modules/hexo-cli/bin/hexo
#!/usr/bin/env node
'use strict';
require('../lib/hexo')();

即hexo命令对应的是/usr/lib/node_modules/hexo-cli/lib/hexo.js文件。

hexo找到了，init命令呢？讲道理应该是个package.json下的script。

原生hexo-cli提供了4个命令，都在hexo-cli/lib/console路径下。

$ hexo help
$ hexo init
$ hexo version

扩展命令通过hexo-cli/lib/extends.console.js实现。

hexo init 命令

init.js核心代码

路径hexo-cli/lib/console/init.js

var GIT_REPO_URL = 'https://github.com/hexojs/hexo-starter.git';
// 1. git clone --recursive https://github.com/hexojs/hexo-starter.git blog
log.info('Cloning hexo-starter to'
spawn('git', ['clone', '--recursive', GIT_REPO_URL, target]);
removeGitDir(target);
removeGitModules(target);
// 2. npm install --production
log.info('Install dependencies');
spawn(npmCommand, ['install', '--production']);

实际上吧，如果hexo的log打印出来GIT_REPO_URL就更清晰，非要藏起来等人挖掘。

参考

• hexo-starter项目
• hexo.js源码 | hexo-cli 项目
• hexo init 命令源码 | hexo-cli 项目

3. hexo server

这个不属于hexo-cli了。
hexo server命令源码

暂没兴趣，应该就是启了个nodejs HttpServer。待看

• 额外的逻辑是，如果没generate，先调一下 hexo g

但是偶尔出现的bug来源于hexo s，这里的逻辑还需要看一下。

4. hexo new

5. hexo generate

生成器（Generator）官方文档

这个好麻烦，看不动了。这么多generator和render。

放个链接 https://github.com/hexojs/hexo-generator-index ，貌似主要先看这个。

generator

generates static files

这一步最慢。
常用的有hexo-renderer-marked
hexo-renderer-pandoc

render 模板引擎

官方文档

https://hexo.io/zh-cn/api/rendering.html

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

生成静态文件。将我们的数据和界面相结合生成静态文件的过程。会遍历主题文件中的 source 文件夹（js、css、img 等静态资源），然后建立索引，然后根据索引生成 pubild 文件夹中，此时的 publid 文件是由 html、 js、css、img 建立的纯静态文件可以通过 index.html 作为入口访问你的博客。

其中 _layout.swig 是通用模板，里面引入了 head、footer 等公共组件，然后在其他的模板中会引入这个 _layout.swig 通用模板，比如 post.swig 模板

• .md解析成html
• .swig渲染为html

数据的填充

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

6. hexo deploy

deploy到底干了什么？执行了git push？

deploy配置

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git
  repo: git@github.com:xu-song/xu-song.github.io.git
  branch: master

部署主要是根据在 _config.yml 中配置的 git 仓库或者 coding 的地址，将 public 文件上传至 github 或者 coding 中。然后再根据上面的 github 提供的 pages 服务呈现出页面。当然你也可以直接将你生成的 public 文件上传至你自己的服务器上。

deploy.js核心源码：https://github.com/hexojs/hexo-deployer-git/blob/master/lib/deployer.js#L83

git('add', '-A');  // 对publc目录中执行add操作。
git('commit', '-m', message);
git('push', '-u', repo.url, 'HEAD:' + repo.branch, '--force');

即等价于以下几个命令(通常情况下)

$ rm -rf .deploy_git  # log.info('Clearing .deploy_git folder...');
$ cp -rf public .deploy_git # log.info('Copying files from public folder...');
$ cd .deploy_git

$ git add -A
$ git commit -m "Site updated: 2018-01-30 *:*:*" #某时间
$ git push -u origin HEAD:master --force

上面命令使用–force选项，强制push到远程主机，会使远程主机更新的版本被覆盖。所以不要在deploy之后的仓库做提交，要在dev仓库提交。

实例：

• Dev Repository Main project for all submodules
• Deployed Repository is deployed by Hexo from Dev Repository
• Demo Site hosts the Deployed Repository

参考

• hexo deploy官方文档
• hexo deploy.js源码
• http://cherryblog.site/hexo-4.html
• 深入理解 Hexo
• hexo是怎么工作的

  7. Hexo 的模板引擎

  这个render讲道理应该是在hexo g的时候调用的。 待看