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

/

本篇要解決的問題

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

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

本篇會用 Augustus 自己的方式部署到 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~


開啟 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

隨選筆記文

Front-End

SpeechSynthesisUtterance 讓瀏覽器說話

Bot Telegram

Telegram Bot 學習筆記 – 2:用 Google Apps Script 接收 / 推播訊息

Bot Telegram

在網頁上嵌入Telegram 頻道廣播訊息

API

Instagram Embedding 抓 iframe 高度及 3 種大小圖片

Front-End WordPress

用原生 JavaScript 寫一組社群分享按鈕(FB、LINE、Twitter)

API

如何用 Postman Mock Server 快速建立 API Server

Vue

用 VuePress 製作說明文件頁面 – 3:導覽列

Front-End

用純 CSS 寫的網頁預覽效果

Firebase Google

Firebase Cloud Functions 基本使用筆記

Analytics Google

GA:啟用 Web + APP 報表

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言

Let's Write

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.