# 前言

多年前筆者初次接觸框架時，不對… 應該是開始寫網頁程式時，最大的疑惑莫過於那個在 localhost 執行的東西，該怎麼實際讓人家有辦法透過網只看到內容？

這篇文章來記錄一下，當我們將網頁應用程式開發完成之後，發佈程式的其中一種方式：將程式上版到 GitHub Page

# 什麼是 GitHub Pages？

GitHub Pages 是透過 GitHub 託管的公開網頁，只要將程式碼上傳到 GitHub ，到 GitHub 設定一下，就可以讓我們開發的程式藉由 GitHub Pages 展示出來。

我們可以使用這個機制放一些開源的專案、建立部落格，甚至將履歷放在上面。

上版的程式不一定要使用 Vue 開發，純粹的 index.html 、 app.js 、 style.css 也可以 (事實上等等的操作也是要放這些檔案而已)。

# 專案打包

在介紹打包做法之前，想補一下 package.json 中， scripts 的設定

這段的資料長這樣：

	"scripts": {
	"dev": "vite",
	"build": "vite build",
	"preview": "vite preview"
	},

這其實是在定義 node 專案中，執行 npm run [XXX] 的快捷指令。

所以事實上我們執行 npm run dev ，意思等同於直接在終端機輸入 vite 。

舉一反三一下：
npm run build 等同於 vite build 。
npm run preview 等同於 vite preview 。

知道原理之後，如果還有什麼特殊需求，就可以自己定義這個 script，例如這樣：

	"scripts": {
	"dev": "vite",
	"build": "vite build",
	"build-dev": "vite build --mode dev",
	"build-prod": "vite build --mode prod",
	"preview": "vite preview"
	},

# 專案打包

指令在剛剛出現過了，在終端機執行這個指令即可：

npm run build

執行完指令後，終端機應該會跑出類似這樣的東西：

	npm run build

	> [email protected] build
	> vite build

	vite v4.4.11 building for production...
	✓ 31 modules transformed.
	dist/index.html 0.45 kB │ gzip: 0.29 kB
	dist/assets/index-a42069a7.css 0.18 kB │ gzip: 0.15 kB
	dist/assets/index-71501830.js 79.15 kB │ gzip: 31.89 kB
	✓ built in 1.34s

於此同時，專案目錄中會出現一個 dist 資料夾存放著編譯完成的程式碼：

一般來說，如果這包程式執行起來有問題，並不會去修改 dist 資料夾的內容，而是修改 Vue 的程式後重新打包。

我們試著比較一下專案中原本的 HTML 跟 dist 內的 index.html

左邊是原本的檔案，右邊是打包過後的檔案，原本的 <script type="module" src="/src/main.js"></script> 不見了，取而代之的是 <head> 標籤引入 JS 與 CSS。