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文檔風格的技術文檔/博客