本篇大綱
- 本篇要解決的問題
- 部署之前必備
GitHub 帳號
VuePress 檔案 - 生成靜態檔
- 把資料夾推到 GitHub 專案上
- 開啟 GitHub Pages 功能
- 原始碼、Demo
- 用 VuePress 製作說明文件頁面系列
本篇要解決的問題
一路走完前面 5 篇，我們用 VuePress 建立的說明文件頁面差不多完成了，接下來就是讓這個頁面放到一個可以對外的地方，讓使用者來觀看。
說明文件在「部署」這邊寫了部署到蠻多地方的範例：英文 | 簡中。
本篇會用 Augustus 自己的方式部署到 GitHub Pages 上。
在往下看之前，第一篇〈安裝〉、第二篇〈config.js 基本設定〉一定要看，因為 config.js 上的設定就是照著寫的，package.json 裡的 script 也是寫 serve、build。
部署之前必備
在準備部署之前，有些東西是一定要有的。
GitHub 帳號
因為會部署到 GitHub Pages 上，所以要有一個 GitHub 的帳號。
之前有寫過一篇，其中有一段就是申請 GitHub 帳號的流程，這邊就不重複寫：
Publii + Github pages 建立Github帳號
VuePress 檔案
如果還沒有自己寫好一個 VuePress 用的檔案，可以從本系列的 Demo 原始檔上下載一份來練習：
如果自己有一份 VuePress 檔案了，建議在 .vuepress/config.js 這個檔案，加一行：
dest: 'docs'
指定 build 出的靜態檔放在「docs」這個資料夾中。
生成靜態檔
我們在 VuePress 上都是用 Markdown 來寫作，存的檔名也都是 *.md，瀏覽器無法讀取 Markdown 來產生網頁，我們必需把這些檔案轉成 *.html 才能讓瀏覽器讀出。
讓 VuePress 把所有檔案生成一份靜態檔很容易，打開終端機進到資料夾，輸入：
vuepress build
如果 package.json 裡有寫到：
"scripts": {
"build": "vuepress build"
}
那也可以改輸入：
yarn build
按下 Enter 後，VuePress 就會開始成生靜態檔案。
因為我們在 .vuepress/config.js 有寫：
dest: 'docs'
檔案最後都會放到「docs」這個資料夾中，像這樣：
檔案都放在 docs 裡
把資料夾推到 GitHub 專案上
嗯……這一步，真的要寫起來會很長很長，就請大家自行 Google 怎麼把資料夾推上 GitHub 的專案囉~
開啟 GitHub Pages 功能
在 GitHub 專案頁面上點擊「Settings」：
點擊 Settings
頁面裡左側會有一個選單，選擇「Pages」：
點擊 Pages
點擊後，右側會出現 GitHub Pages 的內容，也會看到一個在「Source」底下的按鈕，預設是「None」：
Source 下的 None 按鈕
我們點 None 後改為 master，接著會出現要抓哪個資料夾的檔案來產生頁面：
設定要抓哪個路徑下的檔案產生頁面
預設是整個專案的根目錄，但還記得嗎？我們把靜態檔都放在「docs」裡了，因此這邊我們改選「/docs」：
路徑改為 /docs
改完後按下「Save」，頁面上就會顯示我們靜態頁面的對外網址：
GitHub Pages 對外網址
我們點擊網址，就會看到我們用 VuePress 建的說明文件頁面，這個網址就可以分享給你的朋友們，說是你獨自製作出來的，嚇嚇他們。
原始碼、Demo
本篇開始，原始碼跟 Demo 都會放在 GitHub 上，歡迎取用。
Demo 會隨著系列文更新，所以看到的程式碼會逐漸豐富。
取用之前可以先對本篇點個讚或分享~
原始碼：https://github.com/letswritetw/letswrite-vuepress-document
Demo：https://letswritetw.github.io/letswrite-vuepress-document/