语雀自动部署hexo GithubPages博客 - 《blog》

背景
实现
图片大小问题

tags: [技术博文]

背景

相信很多人被hexo+github pages实现的blog的发布问题烦恼，在编写完文章之后，需要我们打开终端，执行 hexo 命令来发布文章。更让人头疼的是若是想插入个表格或者是图片的话，那可费了老劲了，利用 markdown 写表格的效率着实不高，而且引入图片的话更是麻烦，需要手动引入图片到博客项目，而且很难控制图片的大小。。。除去这些不说，hexo写的文章还比较容易丢失，一旦不小心把 hexo 删了，想要恢复就很麻烦了，但是使用语雀自动部署博文就不用担心这个问题，大不了重新同步一遍嘛，哈哈哈！

但是不久前接触到了语雀，并看到开发者文档里有一些非常好用的api，更有webhook的功能，便有了利用语雀来部署hexo搭建的blog的想法。大体思路就是，当我们发布更新文章时会出发webhook,然后我们在自己搭建的服务里监听这个post请求，一旦监听到这个请求说明有文章的变动了，这时，再根据开发者文档上的api拉取当前的文章信息，根据这些信息生成md文件，然后执行’hexo clean && hexo d -g’来更新我们的博文到github pages。

有了想法，当然撸起袖子加油干了，在测试完webhook后，接下来就是写代码请求文章信息然后创建文件了，但是懒惰的我看到已经有人实现了，就直接借用人家的写好的用好了。yuque-hexo

废话少说，下面写下我的实现方式。

实现

首先，在你的云服务器上安装hexo-cli , npm install hexo-cli -g

然后创建一个hexo项目， hexo init blog 创建完项目之后，根据自己的喜好配置下项目的主题，及你要部署的github pages地址（建议写ssh地址），之后将你的云主机的ssh公钥配置到github上，实现免密发布文章，具体配置方法不再赘述。
注：在将云主机公钥配置到github上后，初次发布文章需要运行以下命令

$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com

在hexo配置文件_config.yml里配置部署仓库地址

接下来，在项目根目录下创建package.json及deploy.js文件, 根据我的package.json和deploy.js来编写刚才创建的两个文件的内容。package.json文件需要注意将login写为你的login，repo改为你的仓库的id(注意不能是仓库名，需要id)。deploy.js内容可以和我的完全一样，也可以自己修改下端口（注意主机的防火墙规则开启这个端口哦）。

package.json

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.8.0"
  },
  "scripts": {
    "deploy": "npm run remove && npm run sync && hexo clean && hexo d -g",
    "sync": "DEBUG=yuque-hexo.* yuque-hexo sync",
    "clean:yuque": "DEBUG=yuque-hexo.* yuque-hexo clean",
    "reset": "npm run clean:yuque && npm run sync",
    "remove": "rm -rf source/_posts/"
  },
  "yuqueConfig": {
    "baseUrl": "https://www.yuque.com/api/v2",
    "login": "xxxx",
    "repo": "grgc1v",
    "mdNameFormat": "title",
    "postPath": "source/_posts/"
  },
  "dependencies": {
    "hexo": "^3.7.0",
    "hexo-deployer-git": "^1.0.0",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-marked": "^0.3.2",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-server": "^0.3.1",
    "koa": "^2.6.2",
    "koa-bodyparser": "^3.2.0",
    "koa-router": "^7.4.0",
    "yuque-hexo": "^1.3.1"
  }
}

deploy.js

const koa = require('koa');
const bodyParser = require('koa-bodyparser');
const Router = require('koa-router');
const app = new koa();
const router = new Router();
const process = require('child_process');
// route
router.post('/', function(ctx) {
  process.spawn(/^win/.test(process.platform) ? 'npm.cmd' : 'npm', ['run',  'deploy']);
  ctx.body = 'update success';
});
app.use(bodyParser());
app
  .use(router.routes())
  .use(router.allowedMethods());
app.listen(3001, function() {
  console.log('[server] deploy server starting at 3001');
});

最后，在项目根目录下执行npm install安装依赖项。通过deploy.js监听的端口及你的云主机的ip来来确定服务地址，在语雀的知识库设置中设置webhook地址。

还需要注意的一点是需要在高级设置中将你的仓库设置为公开权限。

完成这些之后基本大功告成了。

接下来我们测试下。

在云主机的项目根目录实现我们的deploy.js, pm2 start deploy, 没安装pm2可以执行以下命令安装

npm install pm2 -g

之后去你的仓库下新建个文章发布下检测下是否同步更新的你的github pages吧！
如果测试后发现没有实现自动部署，可以执行以下命令，查看错误原因：

npm run deploy

下面附上我的【配置】

图片大小问题

在语雀插入的图片，更新到我们的 blog 后，会发现显示的图片大小和插入时不一样，这是因为 blog 里的图片是按照原始大小显示的，观察图片路径，会发现其中包含了图片的当前大小以及原始大小信息，类似这个

https://cdn.nlark.com/yuque/0/2019/png/242991/1554799009812-0da6e023-b092-4172-a55d-bd247c79a133.png#align=left&display=inline&height=217&name=image.png&originHeight=678&originWidth=678&size=18409&status=done&width=217

然后我们可以自己写 js，使用正则把大小信息取出来，并设置到图片上，具体 js 代码如下：

var images = document.querySelectorAll('img');
images.forEach(function(image) {
  var src = image.getAttribute('src');
  var regex = /width=([0-9]+)|height=([0-9]+)/g;
  var size = src.match(regex);
  if (Object.prototype.toString.call(size) === '[object Array]' && size.length) {
    size.forEach(item => {
      var arr = item.split('=');
      image.setAttribute(arr[0], arr[1]);
    })
  }
})

将这段代码贴到页面最后的 script 标签里，会发现照片大小和我们所期望的一样了。