# 免費網站部署/架設資源推薦與比較

###### tags: `免費` `部署` `Heroku` `Github Pages` `Netlify`

## 含後端伺服器、最多環境支援：[Heroku](https://www.heroku.com/)
- 優點：
- 除了靜態/前端，也支援建立多數程式語言寫的後端伺服器
- **免費部署全端/後端專案應用程式(APP)的首選**
- 缺點：
- 免費版有啟動總時間與休眠開啟較長等限制
- **等待時間有時較長，使用者需要預期心理(否則可能以為是網站故障)**
- 建議方案：
- 如果是*前後端分離*的網站，**前端部分建議設計載入/讀取畫面**([舉例](https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/249465/))來「防呆」

## 前端原生或簡易展示：[Github Pages](https://pages.github.com/)
- 優點：
- *直接使用Github上的儲存庫(Repo)，不需要在其他網站平台設定*
- **沒有啟動時間與速度限制**(純顯示靜態檔案)
- 缺點：
- Github Pages**每個專案預設只對應同一個網域**(格式：yourname.github.io)
- 除對應跟目錄的前端專案，其他若使用React、Vue之類的*框架，且有使用路由(route)功能，只能選用hash模式*
- 否則會因為*網域根目錄不是專案根目錄，只是主網域底下的內容*(URL格式：yourname.github.io/projectName)
- 因**沒有獨立網域，hash模式以外的路由會無法正常運作**，且讀不到打包之後的CSS、JS、圖片等靜態檔案，無法顯示頁面內容
- 如果需要個別專案都有獨立網域，需要額外網域來個別設定(往往需要付費購買網域名稱)
- 建議方案：
- **只使用免費方案的話，僅適合架設單一[個人網站](https://gitbook.tw/chapters/github/using-github-pages)使用**，其餘專案則成為Github Pages同一網域的一部分

## 單獨前端專案或FaaS：[Netlify](https://www.netlify.com/)
- 優點：
- 同Heroku個別部署的APP，**APP預設都有獨立網域**，沒有Github Pages初始僅單一網域的問題
- **也沒有啟動時間與速度限制**
- 另支援**函式即服務** (Function as a Service, FaaS)的**無伺服器**(serverless)部署
- 補充，*類似的免費前端部署平台：[Vercel](https://vercel.com/)*
- 缺點：
- *使用history模式的路由時，[需要額外設置導向(redirect)檔案](https://docs.netlify.com/routing/redirects/)，否則切換頁面會看到404錯誤*
- 建議方案：
- 需要單獨架設前端網站的首選，且部署方法與Github Pages類似，如自動隨Github指定分支更新