簡介
官方文件
快速部署生成靜態網站，便於書寫blog或記錄檔案，這個需求始終沒有減少過。因此github上也有許多配套方案，便於建立這型別的靜態網站，例如hexo或Gatsby。透過這個靜態網站排名可以一窺當前stars排名靠前的各種方案。
上週Vue的作者尤大大，提出了一個新的解決方案VuePress。其基本思路借鏡了nuxt.js，但個人認為nuxt更適閤中大型應用，這邊不做過多的探討。而VuePress則是更輕量級的應用，考慮到可以在md檔案中，嵌入vue語法，因此靈活性相對更強。
核心訴求在解決兩個問題，並更專注於產出內容。
- SEO優化
- 頁面載入速度
特性
-
支援在md檔案中，嵌入vue的程式碼
-
支援PWA
-
整合GA分析
-
預設rwd佈局
-
簡單的UI元件
開始實作一個Demo
新建一個資料夾，並快速初始化
mkdir new_project
npm init -y
複製程式碼全域安裝VuePress
npm install -g vuepress
複製程式碼建立一個檔案資料夾，用來存放md文章
// vuepress官方預設的命名是採用docs，為了避免踩到額外的坑，統一先使用官方檔案的格式
mkdir docs
複製程式碼配置package.json，新增下述兩行
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
複製程式碼建立一個md檔案，用來支援首頁呈現，並用於預覽
echo '# Hello VuePress' > docs/README.md
複製程式碼啟動本地server端進行預覽
yarn run docs:dev
or
npm run docs:dev
複製程式碼先進行一次打包構建，讓專案資料夾呈現vuepress官方預設的結構
yarn run docs:build
or
npm run docs:build
複製程式碼結構
到這邊為止，應該會看到結構呈現如下圖：
用於存放元件(components)和設定檔(config.js)。
UI元件
現在看到的本地端server應該只有一個Hello VuePress的簡單頁面，所以需要新增一些元件，來豐富頁面。
引入元件
// cd進入.vuepress資料夾
// 建立一個config.js設定檔
// 準備引入元件
module.exports = {
}
複製程式碼標題(title)元件
module.exports = {
title: 'My VuePress'
}
// 將會出現在頁面的左上角，同時也是整個靜態website的標題
複製程式碼頂部導覽列nav (自帶簡易搜尋功能)
module.exports = {
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{ text: 'VuePress', link: 'https://vuepress.vuejs.org/' },
]
}
}
複製程式碼左側sidebar
sidebar: [
'/',
'/about/',
{
title: 'Group 1',
collapsable: false,
children: [
'/guide/'
]
}
]
// 除了側邊欄，也可以建立子側邊欄
複製程式碼使用Vue元件
除了基本md檔案，VuePress也提供在md檔案中，嵌入vue檔案。
// vuepress預設在.vuepress / components 下的.vue檔案，都會自動註冊到全域。
// 故可在任何md檔案中自由引用，僅須將components名稱，作為div名稱引入。
複製程式碼透過下圖來解釋，首先建立一個vue檔案，在components資料夾下方。
除了可以使用vue的語法，也能修改樣式。
最後再把寫好的vue檔案，引入到想對應的md檔案即可
部署github pages
在遠端建立一個repository，並clone到本地。 接著到config.js設定檔中新增base
// 在base進行設定後，會自動新增到下面子目錄中所有/開頭的url連結
// 需注意vuepress官方要求路徑名稱後方須新增 '/'
base: '/your repository name/'
複製程式碼基本上會長這樣：
base設定完畢，進行打包。
yarn run docs:build
or
npm run docs:build
複製程式碼接著把打包好dist內的資料，丟到剛剛clone下來的資料夾，再push上去。
回到遠端repository，進入settings。
拉到下方的GitHub Pages source選擇master分支，theme不用選，再save。 即會自動生成靜態網址，但是網址一開始點進去會是404，需要十幾秒的時間才會部署完成。