VuePress 密码加密文章

前言

事情的起因是，我需要一个存放未分类整理知识点，以及收藏转载文章的私人知识库，和 iMaeGoo’s Blog 区别开来。

我尝试过简书、语雀、Evernote、OneNote、有道云笔记，对它们的 markdown 支持、导出能力、搜索能力、容量、安全性都有体会。

最后我决定建一个私人 Git 仓库，用 markdown 来记笔记。然后通过 CI/CD 自动构建到一个叫 iMaeGoo’s Diary 的 VuePress 网站。写笔记 Notepad + Git 就能搞定，还能自由选择多种多样的 markdown 编辑器，手机端也可以通过在线 IDE 更新内容，VuePress 的搜索非常好用，安全性也完全在自己的掌控范围之内。

反正是知识库嘛，我配置了完全公开，方便自己随时随地查看，但由于是未经整理的知识库，也不建议访客去看啦。

问题就来了，有些笔记包含了敏感信息，怎么在公开的知识库中保护这类信息？

在寻找 VuePress 加密时，我发现了 vuepress-plugin-encrypt 这个好用的插件，使用了 aes-128-ctr 来加密内容，你可以直接查看它的英文官方文档。

效果

开始使用

1. 在 VuePress 的项目中安装这个插件

   command

   yarn add -D @oak-tree-house/vuepress-plugin-encrypt

2. 修改配置文件启用插件

   .vuepress/config.js

   module.exports = {
     plugins: [
       ['@oak-tree-house/encrypt']
     ]
   }

3. 修改 package.json 增加加解密的命令

   package.json

   {
     "scripts": {
       "decrypt": "encrypt decrypt --source-dir <YOUR_SOURCE_DIR> --key-file keys.json --temp .temp-encrypt",
       "encrypt": "encrypt encrypt --source-dir <YOUR_SOURCE_DIR> --key-file keys.json --temp .temp-encrypt"
     }
   }

   * 此处基于官方 doc 有改动，命令参数 encrypt 和 decrypt 需要放在最前，否则会遇到错误 error: unknown option '--source-dir'
4. 把临时目录添加到 .gitignore 列表

   .gitignore

   /keys.json
   /.temp-encrypt

   * 如果你的是安全的私有 Git 仓库，想一起提交密码文件，可以不 ignore /keys.json
5. 新建密码文件 keys.json

   keys.json

   {
     "user": "imaegoo",
     "keys": {
       "key": "mypassword"
     }
   }

6. 尝试写一段需要加密的内容

   markdown

   ## test
   ::: encrypt key=key owners=imaegoo
   my password is helloworld
   :::

7. 运行 yarn encrypt，你将会发现上一步的内容被自动替换成密文

   markdown

   ## test
   ::: encrypt encrypted key=key owners=imaegoo
   ZpDkUuyB2+O7/Ga9InossDwIYJVn3I6VbdlNLxiJaU/gCDxnC1kQcgbzC9RqVCZ3ru6fpf3B5wnjKKS
   R1/miaLoxP4WrCnlYTiL0AeAeLPW0bN+3KqBg2n+fTCqubEFfRZnbKUGvsuZai0vRSW4OYmirew**
   :::

8. 大功告成，运行 VuePress 开发模式，测试一下吧！
   
   

配置

最新的完整配置参见官方文档

.vuepress/config.js

module.exports = {
  plugins: [
    ['@oak-tree-house/encrypt', {
      contentTitle: 'Encrypted Content',
      unencryptedText: 'The content is shown below. It should be encrypted when published.',
      encryptedText: 'This part of content is encrypted. To view it, you need to enter the correct key in the input field below.',
      decryptedText: 'The encrypted content is successfully decrypted and shown below.',
      decryptButtonText: 'Decrypt',
      decryptFailText: 'Failed to decrypt!',
      unencryptedIcon: undefined,
      encryptedIcon: undefined,
      decryptedIcon: undefined
    }]
  ]
}

本文部分内容来自 https://szp15.com/2020/02/04/plugin-encrypt-doc/，采用 MIT License