你是否曾經為配置伺服器和繁瑣的網域名稱備案流程而頭疼不已？是否渴望找到一種簡單、高效的途徑，讓你的前端計畫即刻上線？本文將為你揭秘 3 種無需伺服器和網域名稱並且完全免費的前端計畫快速部署方式 —— Vercel 、 Github Pages 和 Netlify ，讓你的計畫在 5 分鐘內快速上線，與世界共享你的精彩！
Vercel
Vercel 是一個雲服務平台，專為前端開發和部署Web應用程式而設計，提供快速的部署服務、全球CDN加速、自動HTTPS和網域名稱管理等功能，支持靜態生成、伺服器渲染和無伺服器函式。
使用 Vercel 部署前端網站的基本步驟如下：
首先，在 Vecel 官網（ https://vercel.com/ ）註冊帳號並登入：
登入成功後，可以選擇「Import Project」來匯入已有計畫，或者選擇「New Project」來建立一個新計畫。
如果選擇匯入現有計畫，Vercel 會提示連線到程式碼倉庫（如GitHub、GitLab或Bitbucket）。只需按照提示操作，授權 Vercel存取倉庫，並匯入倉庫即可。
這裏以一個部落格網站為例，匯入倉庫後，需要配置構建命令和指定輸出目錄：
配置構建命令
：對於大多數前端計畫，通常使用
npm install
來安裝依賴，然後使用
npm run build
來執行構建過程。
指定輸出目錄 ：通常輸出目錄為 dist，可以根據自己計畫進行配置。
完成以上設定後，Vercel 會為建立一個新計畫，並開始部署過程。部署過程中，Vercel會自動安裝依賴、執行構建命令，並將構建結果上傳到其伺服器。
部署完成後，會收到一封確認信件，並且可以在Vercel的控制台中檢視計畫的狀態。可以透過 Vercel 提供的 URL 存取部署好的網站。
在 Vercel 的控制台中，可以管理計畫，包括檢視日誌、配置環境變量、設定 HTTPS 等，還可以將自訂網域名稱繫結到 Vercel 計畫。
Github Page
Github Pages 是一個直接從 GitHub 上的倉庫托管靜態站點的服務，適用於個人、組織和計畫站點，支持多種靜態站點生成器，但配置過程相對復雜，且限制在每月100GB的軟頻寬和1GB的儲存限制內。
使用 Github Page 部署前端網站的基本步驟如下：
登入Github帳號，在頂部選單欄點選「+」，選擇「New repository」新建倉庫，輸入計畫的資訊，點選 「Create repository」 建立倉庫，新建完成之後，將需要部署的計畫程式碼上傳至該倉庫：
在倉庫的 Setting 頁面，找到「Pages」部份，這裏就是 Github Pages 的配置頁面。Github pages 目前支持兩種部署方式：
部署分支 ：適用於部署靜態網站，當指定分支有新的送出推播時，GitHub 會自動觸發構建和部署過程。
Github Actions ：適用於部署復雜的前端計畫，這是 GitHub 提供的一種持續整合（CI）和持續部署（CD）工具。透過編寫 YAML 工作流檔，可以定義復雜的構建、測試和部署流程。
這裏我部署的是一個 VuePress 計畫，所以選擇 Github Actions。
首先，部署需要用的計畫 Token，以便能獲得計畫的操作許可權，可以透過 https://github.com/settings/tokens 生成：
在計畫的
Setting - Secrets and variables - Actions中添加上一步生成的秘鑰，名稱是 ACCESS_TOKEN。
進入計畫的的
Actions選項，然後新建一個workflow，預設名稱是main.yml，在該檔中添加如下程式碼（參考）：
# name 可以自訂
name: Deploy GitHub Pages
# 觸發條件：在 push 到 master 分支後
on:
push:
branches:
- main
# 任務
jobs:
build-and-deploy:
# 伺服器環境：最新版 Ubuntu
runs-on: ubuntu-latest
steps:
# 拉取程式碼
- name: Checkout
uses: actions/checkout@v2
with:
persist-credentials:false
# 生成靜態檔
- name: Build
run: npm install && npm run docs:build
# 部署到 GitHub Pages
- name: Deploy
uses: JamesIves/github-pages-deploy-action@releases/v3
with:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN}} # 剛才生成的 secret
BRANCH: gh-pages # 部署到 gh-pages 分支，因為 main 分支存放的一般是源碼，而 gh-pages 分支則用來存放生成的靜態檔
FOLDER: docs/.vuepress/dist # vuepress 生成的靜態檔存放的地方
保存之後，就會自動執行。稍等就可以檢視部署結果。如果是綠色，說明自動部署成功，如果是紅色，說明部署失敗。每次推播程式碼時，Actions 就會自動打包並部署到 gh-pages 分支，我們可以直接用 使用者名稱.github.io/計畫名 的方式存取。
Netlify
Netlify 是一個現代化的靜態站點部署平台，提供自動構建、部署、CDN加速和表單處理等功能，適合部署靜態網站、單頁面套用和 Jamstack 套用，擁有簡單易用的界面和強大的功能。
使用 Netlify 部署前端網站的基本步驟如下：
存取 Netlify 官網（ https://www.netlify.com/ ） ，註冊帳號並登入。首次登陸需要填寫一些簡單資訊：
填寫完成之後，就可以透過 GIthub、Gitlab 等方式選擇計畫進行部署：
這裏我們來部署 Github 上的計畫，需要進行 Github 授權，授權後就可以存取到 Github 的所有倉庫。
選擇需要部署的計畫，然後進行一些部署配置，這裏類似於 Vercel 的部署配置：
填寫完成之後就可以進行部署了，頁面會顯示即時部署日誌：
部署完成之後，就可以在存取網站了，也可以在控制台中進行日誌管理，網域名稱管理等：
小結
在探索前端計畫部署的過程中，我們不難發現 Vercel和 Netlify 提供了非常簡單的部署流程，使計畫上線變得輕而易舉。盡管 Github Pages 的部署過程稍顯復雜，但其強大的功能性和靈活性也為開發者提供了更多可能性。因此，在選擇部署方式時，可以根據計畫需求和個人偏好，選擇最適合你的那一款！
