Skip to content

Commit be77b44

Browse files
chingsoleilchingsoleil
committed
Add multiple website deployment workflows
1 parent 78cae2c commit be77b44

9 files changed

Lines changed: 465 additions & 0 deletions

‎.github/workflows/deploy-any-folder.yml‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
name: Deploy Any Folder to GitHub Pages
2+
3+
on:
4+
workflow_dispatch:
5+
inputs:
6+
folder_path:
7+
description: '要部署的資料夾路徑 (例如: ex02/mockup, ex01/web, docs)'
8+
required: true
9+
default: 'ex02/mockup'
10+
type: string
11+
12+
permissions:
13+
contents: read
14+
pages: write
15+
id-token: write
16+
17+
concurrency:
18+
group: "pages"
19+
cancel-in-progress: false
20+
21+
jobs:
22+
deploy:
23+
environment:
24+
name: github-pages
25+
url: ${{ steps.deployment.outputs.page_url }}
26+
runs-on: ubuntu-latest
27+
steps:
28+
- name: Checkout
29+
uses: actions/checkout@v4
30+
31+
- name: Setup Pages
32+
uses: actions/configure-pages@v4
33+
34+
- name: Upload artifact
35+
uses: actions/upload-pages-artifact@v3
36+
with:
37+
path: './${{ github.event.inputs.folder_path }}'
38+
39+
- name: Deploy to GitHub Pages
40+
id: deployment
41+
uses: actions/deploy-pages@v4

‎.github/workflows/deploy-both-websites.yml‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
name: Deploy Both Websites to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [ main, master ]
6+
paths:
7+
- 'ex01/web/**'
8+
- 'ex02/mockup/**'
9+
workflow_dispatch:
10+
11+
permissions:
12+
contents: read
13+
pages: write
14+
id-token: write
15+
16+
concurrency:
17+
group: "pages-both"
18+
cancel-in-progress: false
19+
20+
jobs:
21+
deploy:
22+
environment:
23+
name: github-pages
24+
url: ${{ steps.deployment.outputs.page_url }}
25+
runs-on: ubuntu-latest
26+
steps:
27+
- name: Checkout
28+
uses: actions/checkout@v4
29+
30+
- name: Setup Pages
31+
uses: actions/configure-pages@v4
32+
33+
- name: Create combined website structure
34+
run: |
35+
# 建立根目錄的 index.html 作為導航頁面
36+
mkdir -p public
37+
echo '<!DOCTYPE html>
38+
<html lang="zh-TW">
39+
<head>
40+
<meta charset="UTF-8">
41+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
42+
<title>學習專案網站</title>
43+
<style>
44+
body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
45+
.website-link { display: block; margin: 20px 0; padding: 20px; background: #f5f5f5; border-radius: 8px; text-decoration: none; color: #333; }
46+
.website-link:hover { background: #e0e0e0; }
47+
h1 { color: #2c3e50; }
48+
h2 { color: #34495e; }
49+
</style>
50+
</head>
51+
<body>
52+
<h1>🎓 學習專案網站</h1>
53+
<p>歡迎來到我的學習專案展示網站！</p>
54+
55+
<a href="./ex01-web/" class="website-link">
56+
<h2>📚 EX01 - 網站專案</h2>
57+
<p>點擊進入 EX01 網站專案</p>
58+
</a>
59+
60+
<a href="./ex02-mockup/" class="website-link">
61+
<h2>🍽️ EX02 - 餐廳點餐系統</h2>
62+
<p>點擊進入餐廳點餐系統 Mockup</p>
63+
</a>
64+
</body>
65+
</html>' > public/index.html
66+
67+
# 複製 ex01/web 到 ex01-web 子目錄
68+
mkdir -p public/ex01-web
69+
cp -r ex01/web/* public/ex01-web/
70+
71+
# 複製 ex02/mockup 到 ex02-mockup 子目錄
72+
mkdir -p public/ex02-mockup
73+
cp -r ex02/mockup/* public/ex02-mockup/
74+
75+
- name: Upload artifact
76+
uses: actions/upload-pages-artifact@v3
77+
with:
78+
path: './public'
79+
80+
- name: Deploy to GitHub Pages
81+
id: deployment
82+
uses: actions/deploy-pages@v4

‎.github/workflows/deploy-ex01-web.yml‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
name: Deploy EX01 Web to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [ main, master ]
6+
paths:
7+
- 'ex01/web/**'
8+
workflow_dispatch:
9+
10+
permissions:
11+
contents: read
12+
pages: write
13+
id-token: write
14+
15+
concurrency:
16+
group: "pages-ex01"
17+
cancel-in-progress: false
18+
19+
jobs:
20+
deploy:
21+
environment:
22+
name: github-pages
23+
url: ${{ steps.deployment.outputs.page_url }}
24+
runs-on: ubuntu-latest
25+
steps:
26+
- name: Checkout
27+
uses: actions/checkout@v4
28+
29+
- name: Setup Pages
30+
uses: actions/configure-pages@v4
31+
32+
- name: Create ex01-web directory structure
33+
run: |
34+
mkdir -p ex01-web
35+
cp -r ex01/web/* ex01-web/
36+
37+
- name: Upload artifact
38+
uses: actions/upload-pages-artifact@v3
39+
with:
40+
path: './ex01-web'
41+
42+
- name: Deploy to GitHub Pages
43+
id: deployment
44+
uses: actions/deploy-pages@v4

‎.github/workflows/deploy-ex02-mockup.yml‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
name: Deploy EX02 Mockup to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [ main, master ]
6+
paths:
7+
- 'ex02/mockup/**'
8+
workflow_dispatch:
9+
10+
permissions:
11+
contents: read
12+
pages: write
13+
id-token: write
14+
15+
concurrency:
16+
group: "pages-ex02"
17+
cancel-in-progress: false
18+
19+
jobs:
20+
deploy:
21+
environment:
22+
name: github-pages
23+
url: ${{ steps.deployment.outputs.page_url }}
24+
runs-on: ubuntu-latest
25+
steps:
26+
- name: Checkout
27+
uses: actions/checkout@v4
28+
29+
- name: Setup Pages
30+
uses: actions/configure-pages@v4
31+
32+
- name: Create ex02-mockup directory structure
33+
run: |
34+
mkdir -p ex02-mockup
35+
cp -r ex02/mockup/* ex02-mockup/
36+
37+
- name: Upload artifact
38+
uses: actions/upload-pages-artifact@v3
39+
with:
40+
path: './ex02-mockup'
41+
42+
- name: Deploy to GitHub Pages
43+
id: deployment
44+
uses: actions/deploy-pages@v4

‎.github/workflows/deploy-mockup.yml‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
name: Deploy Mockup to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [ main, master ]
6+
paths:
7+
- 'ex02/mockup/**'
8+
workflow_dispatch:
9+
10+
permissions:
11+
contents: read
12+
pages: write
13+
id-token: write
14+
15+
concurrency:
16+
group: "pages"
17+
cancel-in-progress: false
18+
19+
jobs:
20+
deploy:
21+
environment:
22+
name: github-pages
23+
url: ${{ steps.deployment.outputs.page_url }}
24+
runs-on: ubuntu-latest
25+
steps:
26+
- name: Checkout
27+
uses: actions/checkout@v4
28+
29+
- name: Setup Pages
30+
uses: actions/configure-pages@v4
31+
32+
- name: Upload artifact
33+
uses: actions/upload-pages-artifact@v3
34+
with:
35+
path: './ex02/mockup'
36+
37+
- name: Deploy to GitHub Pages
38+
id: deployment
39+
uses: actions/deploy-pages@v4

‎docs/ex02.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
- 製作靜態範例頁面：網頁清單、內容描述
2626
- 製作規格：使用tailwind+cdn、極簡互動操作
2727
- 以手機為主要操作介面
28+
- 嘗試申請github education benefits
2829

2930
# 下次工作
3031
- 檢討操作流程並修正

‎docs/github-pages-deployment.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# GitHub Pages 部署說明
2+
3+
## 概述
4+
5+
本專案已設定自動部署 `ex02/mockup` 資料夾到 GitHub Pages，作為靜態網站展示。
6+
7+
## 部署流程
8+
9+
### 1. 自動部署（推薦）
10+
11+
當您推送程式碼到 `main` 或 `master` 分支時，GitHub Actions 會自動：
12+
13+
1. 檢查 `ex02/mockup` 資料夾的變更
14+
2. 將該資料夾內容上傳為 GitHub Pages 的靜態檔案
15+
3. 自動部署到 GitHub Pages
16+
17+
### 2. 手動觸發部署
18+
19+
您也可以在 GitHub 的 Actions 頁面手動觸發部署。
20+
21+
## 設定步驟
22+
23+
### 步驟 1：啟用 GitHub Pages
24+
25+
1. 前往您的 GitHub 專案頁面
26+
2. 點擊 **Settings** 標籤
27+
3. 在左側選單中點擊 **Pages**
28+
4. 在 **Source** 部分選擇 **GitHub Actions**
29+
30+
### 步驟 2：推送程式碼
31+
32+
```bash
33+
git add .
34+
git commit -m "Add GitHub Pages deployment workflow"
35+
git push origin main
36+
```
37+
38+
### 步驟 3：檢查部署狀態
39+
40+
1. 前往 **Actions** 標籤查看部署進度
41+
2. 部署完成後，您的網站將在以下網址可用：
42+
`https://[您的GitHub用戶名].github.io/learning-project/`
43+
44+
## 檔案結構
45+
46+
```
47+
learning-project/
48+
├── .github/
49+
│ └── workflows/
50+
│ └── deploy-mockup.yml # 部署工作流程
51+
├── ex02/
52+
│ └── mockup/ # 要部署的靜態網站
53+
│ ├── index.html # 首頁
54+
│ ├── menu.html # 菜單頁面
55+
│ ├── cart.html # 購物車頁面
56+
│ └── ... # 其他頁面
57+
└── docs/
58+
└── github-pages-deployment.md # 本說明文件
59+
```
60+
61+
## 自訂網址
62+
63+
如果您想要自訂網址，可以：
64+
65+
1. 購買網域
66+
2. 在 GitHub Pages 設定中新增自訂網域
67+
3. 設定 DNS 記錄
68+
69+
## 疑難排解
70+
71+
### 部署失敗
72+
73+
1. 檢查 Actions 頁面的錯誤訊息
74+
2. 確認 `.github/workflows/deploy-mockup.yml` 檔案格式正確
75+
3. 確認 GitHub Pages 已啟用
76+
77+
### 網站無法顯示
78+
79+
1. 等待幾分鐘讓部署完成
80+
2. 檢查 Actions 頁面的部署狀態
81+
3. 確認 GitHub Pages 設定正確
82+
83+
## 更新網站
84+
85+
每次修改 `ex02/mockup` 資料夾中的檔案並推送到 GitHub 後，網站會自動更新。

0 commit comments

Comments
 (0)