一、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倉庫中。