GitHub Pages 的原理與功能
在這篇文章中，我探討了使用 GitHub Pages 作為靜態網站的托管服務，特別強調了其設置簡單且便捷的特點，同時列出了使用此服務時的一些限制。我還介紹了如何將個人網域綁定至 GitHub Pages 並利用 npm 套件快速部署靜態網站。此外，我詳細說明了如何透過配置文件快速部署到 GitHub Pages，並提供了相關配置的具體示例。
GitHub Pages 是在 GitHub 裡面，可以解析靜態網頁/文件並渲染成頁面的網頁托管服務
在 GitHub 的專案內新建一個分支名稱為 gh-pages 時，GitHub 便會預設將此分支內的檔案以靜態網頁的方式呈現，因此可以利用此類特性來製造一個簡單的網站。
所以最簡單的 GitHub Pages 應該是這樣，新建一個項目裡面放 index.html 檔案，在 setting 左邊 Code and automation 找到 pages，設定 GitHub Pages 的分支後即產生一個網址給你，若是分支內的檔案符合 GitHub Pages 的限制即可看到渲染成功後的網頁。
1. GitHub Pages 的限制
使用 gh-pages 時會有以下的限制
- 僅能呈現靜態頁面的內容（即 HTML 網頁）
- 無法提供動態網頁
- 例如利用 PHP、JSP 等等網頁程式所撰寫的檔案
- 不支援如 .htaccess 之類的密碼驗證功能，即不能針對 gh-pages 的頁面設定密碼保護
- 所有的 gh-pages 內的頁面都是公開的，表示所有的人都可存取到相關的頁面
- gh-pages上的檔案庫大小限制為 1GB
- 每個月的頻寬限制為 100GB
- 每小時最多能提交 10 個版本的檔案
2. GitHub Pages 綁定個人網域
- 在該專案的根目錄放一個檔名為
CNAME的檔案，內容只要放你想要客制化的那個網址 - 網域後台設定一組 CNAME 指到
https://BoisonChang.github.io/my-app-cicd原始網址
3. 使用套件快速部署到 GitHub Pages
- 建置專案
npx create-react-app my-app-cicdcd my-app-cicdnpm run startgit initgit add .git commit -m “first commit“- 在 GitHub 上開設 repo 取名 my-app-cicd
git remote add origin <https://github.com/BoisonChang/my-app-cicd.git>git push -u origin main
- 安裝套件
npm install --save gh-page
- 設定 package.json 檔案內容
- 加上 “name”: “OOXX“
- 加上 “homepage” : “https://myusername.github.io/name“
- scripts 中加上 "predeploy": "npm run build"
- scripts 中加上 "deploy": "gh-pages -d build"
{
"name": "my-app-cicd",
"homepage": "https://BoisonChang.github.io/my-app-cicd",
// ...
}
...
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
...
}
npm run deploy- 若是成功，可在 homepage 設定之 URL 打開網頁
參考資料善用 gh-pages分支功能 無料架設靜態網站使用 GitHub 免費製作個人網站使用 GitHub Pages 打造簡易短網址系統使用 GitHub Pages 展示你的 Single Page Applicationgithub pages与travis ci运作原理