VuePress 建站速记

持续写做已经有两年多了，19年年初再次折腾创建本身的站点，主要基于如下缘由

1. 和其余网站比起来，简书是比较清爽的，编辑器也很是好用，但推荐的文章层次过低，不符合程序员的气质（今天把文章同步到掘金，才发如今掘金写文章也很棒）
2. 本身建站，但不想关注除了文章内容之外的事情，即写完 Markdown 文件，提交到 github 上，文章会自动展示到页面上——让写文章和写代码保持一致的流程，方便管理

按照这个思路，咱们能够把这个流程想的更具体点，例如我如今要写一篇文章，步骤是这样的：

1. 打开本身喜欢的编辑器（例如 Typora ），打开本地存放文章的目录（Typora 中敲 control + ⌘ + 3），新建一个 Markdown 文件
2. 开始写做
3. 写完后，打开终端，执行 git add -> git commit -> git push ，将文章提交到 github
4. 远端的 ECS 发现 github 上具体的 repo 下有更新，便自动执行 git pull 进行同步，并将 Markdown 文件渲染成静态页面，以后经过浏览器访问你的站点，就能够看到这篇文章了

这种方法有一个很是好的地方，它将写做的行为和写代码的行为保持一致，都是在本地完成，而后经过 git 进行管理，且无需担忧备份、迁移等问题，这有效的减小了额外能量的消耗，能让我更快的进入写做状态，因而就能够把这个事情长期作下去。

用 github 管理本身的文章已有一段时间，但一直没有动手搭建远程站点，直到无心中看到了 VuePress 这个开源的软件，它能够很容易将 Markdown 渲染成 html 页面，同时我被它的简洁和专为技术站点打造所吸引，决定花点时间尝试一下。

大概折腾了一天，就把本身想要的效果实现了，若是不踩坑，可能不须要这么久。网上介绍 VuePress 的文章已经很详细了，这里就不重复了，有兴趣的同窗能够查看文章最后的参考连接。

这里我简单讲下做为一个不懂前端的同窗，我有哪些疑惑、它们是如何解除的；以及本身踩了什么坑、怎么爬出来的。

在使用 VuePress 中，我最大的疑惑是如何成功添加一个 Markdown 插件，它的步骤是什么，怎么知道引入的插件是否生效。通过了一番尝试后，总结为 3 个步骤（意味着你脑海中的额外的想法都是多余的）：

1. 安装插件
2. 将插件添加到配置中
3. 从新构建：yarn docs:build

拿数学公式插件 markdown-it-katex 做为例子，首先经过如下命令安装该插件

$ yarn add markdown-it-katex
复制代码

修改 .vuepress/config.js 下的配置，添加一行 md.use(require("markdown-it-katex"))，以下：

module.exports = {
  markdown: {
    config: md => {
      md.set({html: true})
      md.use(require("markdown-it-katex"))
    }
  }
}
复制代码

构建后，通常的插件安装到此就完成了，对于 markdown-it-katex 来讲，你还须要修改 head 项，依旧是 .vuepress/config.js 文件，在 head 中添加以下两行：

module.exports = {
  head: [
    // ...
    ['link', { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css' }],
    ['link', { rel: "stylesheet", href: "https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css" }]
  ]
  // ...
}
复制代码

大功告成，如今 VuePress 能够识别出你文章中的数学公式了，以下所示：

最后，说下本身的采坑经历，我在修改完以上配置后，发现文章中的数学公式仍是不能正常显示，因而各类 google、global 安装等，最后发现是本身写错了配置：把配置中的 markdown 对象写到 themeConfig 中了，以下

// ...
  themeConfig: {
    markdown: {
      // ...
    }
  }
复制代码

这种错很难发现，花了很多时间，但愿写出来，能帮犯一样错误的同窗节省时间。

原文：yaje.fun/tools/vuepr…

参考：

• VuePress官网文档
• 如何使用 VuePress 编写静态博客
• VuePress 快速踩坑
• VuePress 手摸手教你搭建一个类Vue文档风格的技术文档/博客