一、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的需求：
-
粘贴图片
Paste Image
paste-image
这个插件用来在md文档中粘贴图片，默认会在文档的同级目录下新建一个图片文件，并在md中插入一行相对路径的图片代码。迎合上述hexo的新图片插入方式，可以在vscode的user-settings里新增两条配置：
"pasteImage.path": "${currentFileNameWithoutExt}/",
"pasteImage.insertPattern": "{% asset_img ${imageFilePath} %}"
这样以来，粘贴的图片就会保存到md文档的同名文件夹下，文档中将插入hexo asset语法的代码。
-
预览
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) => (``)
)
return resolve(markdown)
})
},
...
}
这样以来，我们md中的{% assest xxx %}代码就会在解析预览时被替换成md的图片语法，并且同样采用相对路径，图片预览成功。
二、部署你的blog
hexo有很多部署、发布方式，我的需求主要是：
- 本地写文章
- 将变更同步到自己的vps上，并且无需登录vps刷新
- 同步到第三方远程仓库备份
1由vscode解决，2通过git hooks来实现自动化部署，3只需要在_config.yml中新增deploy的远程仓库即可。
利用git hooks实现自动化部署参见这篇文章-使用 Git Hook 自动部署 Hexo 到个人 VPS，主要思路就是：
- 在vps上创建一个空的git仓库；
- 在vps上新建一个文件夹存放我们blog的静态页面，即
hexo generate生成的public文件夹内容； - 利用
git hooks，在该仓库update完成时，自动把内容checkout到2中的网页文件夹； - 利用
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仓库中。
