一、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语法的代码。

2. 预览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仓库中。