利用vscode插件与git hook提升hexo编写部署体验

一、vscode编写markdown

markdown是用hexo写博客的可选文本格式之一,通常我们用hexo new xxx来创建一篇新的post。md编辑器有很多,预览我们hexo项目中的md文章的方法也有很多,我的方案是编辑与预览都在vscode中完成。

这里要先提一下在hexo3.0版本中编写md文件时新的图片插入方式:只要在_config.yml中添加post_asset_folder: true,就会在生成新post时创建一个同名文件夹;在md中输入{% asset_img xxx %},就可以插入这个文件夹中的图片。(这种方式较之以前把图片放在source/images,md中用[图片上传失败...(image-1418e4-1531131142965)]的方式更整洁,图片随文章分类)

vscode有很多md的插件,这里推荐两个插件,并针对hexo做一些配置调整,以满足插入图片与预览md的需求:

  1. 粘贴图片Paste Image
    paste-image

    这个插件用来在md文档中粘贴图片,默认会在文档的同级目录下新建一个图片文件,并在md中插入一行相对路径的图片代码。迎合上述hexo的新图片插入方式,可以在vscode的user-settings里新增两条配置:
"pasteImage.path": "${currentFileNameWithoutExt}/",
"pasteImage.insertPattern": "{% asset_img ${imageFilePath} %}"

这样以来,粘贴的图片就会保存到md文档的同名文件夹下,文档中将插入hexo asset语法的代码。

  1. 预览Markdown Preview Enhanced
    Markdown Preview Enhanced

    这个是下载量最高的vscode md预览插件,支持很多功能,并支持扩展md解析语法。现在就要利用这个功能来解决一个问题:vscode内无法预览{% asset_img xxx %}代码的图片。ctrl+shift+P输入Markdown Preview Enhanced: Extend Parser调出插件的parse.js文件,修改其中的onWillParseMarkdown方法:
module.exports = {
  onWillParseMarkdown: function(markdown) {
    return new Promise((resolve, reject)=> {
      markdown = markdown.replace(
        /\{%\s*asset_img\s*(.*)\s*%\}/g,
        (whole, content) => (`![](${content})`)
      )
      return resolve(markdown)
    })
  },
  ...
}

这样以来,我们md中的{% assest xxx %}代码就会在解析预览时被替换成md的图片语法,并且同样采用相对路径,图片预览成功。

二、部署你的blog

hexo有很多部署、发布方式,我的需求主要是:

  1. 本地写文章
  2. 将变更同步到自己的vps上,并且无需登录vps刷新
  3. 同步到第三方远程仓库备份

1由vscode解决,2通过git hooks来实现自动化部署,3只需要在_config.yml中新增deploy的远程仓库即可。

利用git hooks实现自动化部署参见这篇文章-使用 Git Hook 自动部署 Hexo 到个人 VPS,主要思路就是:

  1. 在vps上创建一个空的git仓库;
  2. 在vps上新建一个文件夹存放我们blog的静态页面,即hexo generate生成的public文件夹内容;
  3. 利用git hooks,在该仓库update完成时,自动把内容checkout到2中的网页文件夹;
  4. 利用nginx或其他http server,将http请求定向到网页文件夹。

最后我的_config.yml中的deploy有两个git repo:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: 
    server: xxx@xxx:xxx.git
    backup: yyy@yyy:yyy.git

这样以来,每次我写完blog,只需要执行hexo generate --deploy,就会生成新的静态页面,自动部署到vps上,并同步到备份git仓库中。

推荐阅读更多精彩内容