用 VuePress 製作說明文件頁面 – 6:部署

用 VuePress 製作說明文件頁面 – 6:部署
用 VuePress 製作說明文件頁面 – 6:部署

本篇要解決的問題

一路走完前面 5 篇,我們用 VuePress 建立的說明文件頁面差不多完成了,接下來就是讓這個頁面放到一個可以對外的地方,讓使用者來觀看。

說明文件在「部署」這邊寫了部署到蠻多地方的範例:英文 | 簡中

本篇會用 August 自己的方式部署到 GitHub Pages 上。

在往下看之前,第一篇〈安裝〉、第二篇〈config.js 基本設定〉一定要看,因為 config.js 上的設定就是照著寫的,package.json 裡的 script 也是寫 servebuild


部署之前必備

在準備部署之前,有些東西是一定要有的。

GitHub 帳號

因為會部署到 GitHub Pages 上,所以要有一個 GitHub 的帳號。

之前有寫過一篇,其中有一段就是申請 GitHub 帳號的流程,這邊就不重複寫:

Publii + Github pages 建立Github帳號

VuePress 檔案

如果還沒有自己寫好一個 VuePress 用的檔案,可以從本系列的 Demo 原始檔上下載一份來練習:

letswrite-vuepress-document

如果自己有一份 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 裡
檔案都放在 docs 裡

把資料夾推到 GitHub 專案上

嗯……這一步,真的要寫起來會很長很長,就請大家自行 Google 怎麼把資料夾推上 GitHub 的專案囉~

為了讓這段看上去沒那麼不負責任,就放可愛貓的圖片來充版面好了 XD~

Photo by Michael Sum on Unsplash
Photo by Michael Sum on Unsplash

開啟 GitHub Pages 功能

在 GitHub 專案頁面上點擊「Settings」:

點擊 Settings
點擊 Settings

頁面裡左側會有一個選單,選擇「Pages」:

點擊 Pages
點擊 Pages

點擊後,右側會出現 GitHub Pages 的內容,也會看到一個在「Source」底下的按鈕,預設是「None」:

Source 下的 None 按鈕
Source 下的 None 按鈕

我們點 None 後改為 master,接著會出現要抓哪個資料夾的檔案來產生頁面:

設定要抓哪個路徑下的檔案產生頁面
設定要抓哪個路徑下的檔案產生頁面

預設是整個專案的根目錄,但還記得嗎?我們把靜態檔都放在「docs」裡了,因此這邊我們改選「/docs」:

路徑改為 /docs
路徑改為 /docs

改完後按下「Save」,頁面上就會顯示我們靜態頁面的對外網址:

GitHub Pages 對外網址
GitHub Pages 對外網址

我們點擊網址,就會看到我們用 VuePress 建的說明文件頁面,這個網址就可以分享給你的朋友們,說是你獨自製作出來的,嚇嚇他們。


原始碼、Demo

本篇開始,原始碼跟 Demo 都會放在 GitHub 上,歡迎取用。

Demo 會隨著系列文更新,所以看到的程式碼會逐漸豐富。

取用之前可以先對本篇點個讚或分享~

原始碼:https://github.com/letswritetw/letswrite-vuepress-document

Demo:https://letswritetw.github.io/letswrite-vuepress-document/


用 VuePress 製作說明文件頁面系列

  1. 安裝
  2. config.js 基本設定
  3. 導覽列
  4. 佈景主題、外掛
  5. 改樣式、加元件
  6. 部署
Summary
用 VuePress 製作說明文件頁面 – 6:部署
Article Name
用 VuePress 製作說明文件頁面 – 6:部署
Description
本篇大綱:本篇要解決的問題。部署之前必備、GitHub 帳號、VuePress 檔案。生成靜態檔。把資料夾推到 GitHub 專案上。開啟 GitHub Pages 功能。原始碼、Demo。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest

0 Comments
Inline Feedbacks
看所有留言