VuePress 建站速記
持續寫作已經有兩年多了，19年年初再次折騰建立自己的站點，主要基於以下原因
- 和其他網站比起來，簡書是比較清爽的，編輯器也非常好用，但推薦的文章層次太低，不符合程式設計師的氣質
- 自己建站，但不想關注除了文章內容以外的事情，即寫完 Markdown 檔案，提交到 github 上，文章會自動展現到頁面上——讓寫文章和寫程式碼保持一致的流程，方便管理
按照這個思路，我們可以把這個流程想的更具體點，例如我現在要寫一篇文章，步驟是這樣的：
-
開啟自己喜歡的編輯器（例如 Typora ），開啟本地存放文章的目錄（Typora 中敲
control + ⌘ + 3），新建一個 Markdown 檔案 - 開始寫作
-
寫完後，開啟終端，執行
git add->git commit->git push，將文章提交到 github -
遠端的 ECS 發現 github 上具體的 repo 下有更新，便自動執行
git pull進行同步，並將 Markdown 檔案渲染成靜態頁面，之後通過瀏覽器訪問你的站點，就可以看到這篇文章了
這種方法有一個非常好的地方，它將寫作的行為和寫程式碼的行為保持一致，都是在本地完成，然後通過 git 進行管理，且無需擔心備份、遷移等問題，這有效的減少了額外能量的消耗，能讓我更快的進入寫作狀態，於是就可以把這個事情長期做下去。
用 github 管理自己的文章已有一段時間，但一直沒有動手搭建遠端站點，直到無意中看到了 VuePress 這個開源的軟體，它可以很容易將 Markdown 渲染成 html 頁面，同時我被它的簡潔和專為技術站點打造所吸引，決定花點時間嘗試一下。
大概折騰了一天，就把自己想要的效果實現了，如果不踩坑，可能不需要這麼久。網上介紹 VuePress 的文章已經很詳細了，這裡就不重複了，有興趣的同學可以檢視文章最後的參考連結。
這裡我簡單講下作為一個不懂前端的同學，我有哪些疑惑、它們是如何解除的；以及自己踩了什麼坑、怎麼爬出來的。
在使用 VuePress 中，我最大的疑惑是如何成功新增一個 Markdown 外掛，它的步驟是什麼，怎麼知道引入的外掛是否生效。經過了一番嘗試後，總結為 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: {
// ...
}
}
這種錯很難發現，花了不少時間，希望寫出來，能幫犯同樣錯誤的同學節省時間。
原文：http://yaje.fun/tools/vuepress_website.html
參考：