Skip to content

Commit 503a9ca

Browse files
cgbin24cgbin24
committed
添加GitHub Pages自动部署功能
1 parent 6067574 commit 503a9ca

File tree

3 files changed

+245
-1
lines changed

3 files changed

+245
-1
lines changed

‎.github/workflows/build-and-release.yml‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,13 @@ on:
1414
permissions:
1515
contents: write
1616
packages: write
17+
pages: write # 添加Pages权限
18+
id-token: write # 用于Pages部署验证
19+
20+
# 环境变量设置
21+
env:
22+
# 指定GitHub Pages的部署环境
23+
GITHUB_PAGES_ENV: github-pages
1724

1825
jobs:
1926
build:
@@ -61,6 +68,151 @@ jobs:
6168
dist/crx/
6269
retention-days: 5
6370

71+
# 构建和部署GitHub Pages
72+
deploy-pages:
73+
needs: build
74+
runs-on: ubuntu-latest
75+
# 确保在主分支推送或手动触发时运行，但不在标签推送时运行
76+
if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/master') || github.event_name == 'workflow_dispatch'
77+
78+
# 使用GitHub Pages环境
79+
environment:
80+
name: github-pages
81+
url: ${{ steps.deployment.outputs.page_url }}
82+
83+
steps:
84+
- name: 检出代码
85+
uses: actions/checkout@v3
86+
87+
- name: 设置Node.js环境
88+
uses: actions/setup-node@v3
89+
with:
90+
node-version: '18'
91+
cache: 'npm'
92+
93+
- name: 安装依赖
94+
run: npm install
95+
96+
- name: 下载构建产物
97+
uses: actions/download-artifact@v4
98+
with:
99+
name: built-extension
100+
path: temp-artifacts
101+
102+
- name: 设置Pages
103+
uses: actions/configure-pages@v4
104+
105+
- name: 构建演示网站
106+
run: |
107+
# 创建pages目录
108+
mkdir -p pages
109+
110+
# 复制最新的扩展文件到演示站点
111+
cp -r temp-artifacts/release/* pages/
112+
113+
# 创建demo页面
114+
cat > pages/index.html << EOF
115+
<!DOCTYPE html>
116+
<html lang="zh-CN">
117+
<head>
118+
<meta charset="UTF-8">
119+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
120+
<title>Pro Color 浏览器扩展演示</title>
121+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
122+
<style>
123+
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; padding-top: 2rem; }
124+
.hero { background-color: #f8f9fa; padding: 3rem 0; margin-bottom: 2rem; }
125+
.download-btn { margin-top: 1rem; }
126+
.feature-icon { font-size: 2rem; margin-bottom: 1rem; color: #0d6efd; }
127+
.footer { margin-top: 3rem; padding: 2rem 0; background-color: #f8f9fa; }
128+
.version-badge { background-color: #0d6efd; color: white; padding: 0.25rem 0.5rem; border-radius: 0.25rem; }
129+
</style>
130+
</head>
131+
<body>
132+
<div class="container">
133+
<div class="hero text-center">
134+
<h1>Pro Color 浏览器扩展</h1>
135+
<p class="lead">一个专业的浏览器颜色主题管理扩展</p>
136+
<div class="download-btn">
137+
<a href="pro-color-latest.zip" class="btn btn-primary btn-lg">下载ZIP包</a>
138+
<a href="pro-color-latest.crx" class="btn btn-secondary btn-lg">下载CRX包</a>
139+
</div>
140+
</div>
141+
142+
<div class="row">
143+
<div class="col-md-4 text-center">
144+
<div class="feature-icon">🎨</div>
145+
<h3>丰富的主题</h3>
146+
<p>提供多种精心设计的颜色主题，满足不同用户的审美需求</p>
147+
</div>
148+
<div class="col-md-4 text-center">
149+
<div class="feature-icon">⚡</div>
150+
<h3>快速切换</h3>
151+
<p>一键切换不同的颜色主题，提升浏览体验</p>
152+
</div>
153+
<div class="col-md-4 text-center">
154+
<div class="feature-icon">🔧</div>
155+
<h3>自定义选项</h3>
156+
<p>允许用户定制自己的颜色方案</p>
157+
</div>
158+
</div>
159+
160+
<div class="row mt-5">
161+
<div class="col-md-12">
162+
<h2>使用说明</h2>
163+
<ol>
164+
<li>下载扩展包（CRX或ZIP文件）</li>
165+
<li>在Chrome浏览器中打开扩展管理页面 (chrome://extensions/)</li>
166+
<li>启用开发者模式</li>
167+
<li>将下载的扩展文件拖放到浏览器窗口中安装</li>
168+
<li>点击工具栏中的扩展图标，选择您喜欢的颜色主题</li>
169+
</ol>
170+
</div>
171+
</div>
172+
173+
<div class="footer text-center">
174+
<p>Pro Color 浏览器扩展 · <span class="version-badge">最新版本</span></p>
175+
<p><a href="https://github.com/cgbin24/pro_color" target="_blank">GitHub 项目</a></p>
176+
</div>
177+
</div>
178+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
179+
</body>
180+
</html>
181+
EOF
182+
183+
# 创建重定向到最新版本文件的链接
184+
VERSION=$(cat temp-artifacts/release/version-info.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[", ]//g')
185+
cp temp-artifacts/release/pro-color-v${VERSION}.zip pages/pro-color-latest.zip
186+
cp temp-artifacts/release/pro-color-v${VERSION}.crx pages/pro-color-latest.crx
187+
188+
# 复制版本信息
189+
cp temp-artifacts/release/version-info.json pages/version.json
190+
191+
# 创建README文件用于GitHub Pages
192+
cat > pages/README.md << EOF
193+
# Pro Color 浏览器扩展
194+
195+
这是Pro Color浏览器扩展的演示网站。您可以在这里下载最新版本的扩展，并了解其使用方法。
196+
197+
## 链接
198+
199+
- [主页](https://cgbin24.github.io/pro_color/)
200+
- [GitHub仓库](https://github.com/cgbin24/pro_color)
201+
202+
## 最新版本
203+
204+
当前版本: v${VERSION}
205+
EOF
206+
207+
- name: 上传GitHub Pages构建产物
208+
uses: actions/upload-pages-artifact@v3
209+
with:
210+
path: 'pages'
211+
212+
- name: 部署到GitHub Pages
213+
id: deployment
214+
uses: actions/deploy-pages@v4
215+
64216
# 只在标签推送时进行发布
65217
release:
66218
needs: build

‎README.md‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,4 +164,19 @@ CRX文件构建需要RSA私钥进行签名。首次运行 `npm run build:crx`
164164
- 安装后，在任何网页右侧会出现一个悬浮按钮
165165
- 点击按钮可以切换主题颜色
166166
- 设置会自动保存，下次访问同一网站时自动应用
167-
- 进入扩展的设置页可以管理所有网站配置
167+
- 进入扩展的设置页可以管理所有网站配置
168+
169+
## 演示站点
170+
171+
Pro Color 浏览器扩展提供了在线演示站点，您可以通过以下链接访问：
172+
173+
```
174+
https://cgbin24.github.io/pro_color/
175+
```
176+
177+
在演示站点上，您可以：
178+
- 了解扩展的主要功能
179+
- 查看使用说明
180+
- 下载最新版本的扩展包（ZIP和CRX格式）
181+
182+
演示站点由 GitHub Pages 提供支持，每次推送到主分支后自动更新。更多关于演示站点的信息，请参阅 [GitHub Pages 部署说明](docs/github-pages.md)。

‎docs/github-pages.md‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
# GitHub Pages 部署说明
2+
3+
Pro Color 浏览器扩展使用 GitHub Pages 提供在线演示网站，展示扩展的功能和使用方法。
4+
5+
## 自动部署流程
6+
7+
每当代码推送到 `main` 或 `master` 分支时，GitHub Actions 工作流程会自动执行以下步骤：
8+
9+
1. 构建浏览器扩展
10+
2. 创建演示网站
11+
3. 部署到 GitHub Pages
12+
13+
## 访问演示网站
14+
15+
演示网站可通过以下地址访问：
16+
17+
```
18+
https://cgbin24.github.io/pro_color/
19+
```
20+
21+
## 网站内容
22+
23+
演示网站包含以下内容：
24+
25+
- 扩展功能简介
26+
- 使用说明
27+
- 最新版本下载链接（ZIP和CRX格式）
28+
- 版本信息
29+
30+
## 文件结构
31+
32+
GitHub Pages 部署的文件结构如下：
33+
34+
```
35+
/
36+
├── index.html # 主页面
37+
├── pro-color-latest.zip # 最新版本的ZIP包
38+
├── pro-color-latest.crx # 最新版本的CRX包
39+
├── version.json # 版本信息
40+
└── README.md # 仓库说明
41+
```
42+
43+
## 手动触发部署
44+
45+
除了自动部署外，还可以通过 GitHub Actions 页面手动触发工作流程部署：
46+
47+
1. 打开仓库的 Actions 页面
48+
2. 选择 "Build and Release" 工作流
49+
3. 点击 "Run workflow" 按钮
50+
4. 选择要部署的分支
51+
5. 点击 "Run workflow" 确认
52+
53+
## 本地测试
54+
55+
如需在本地测试演示网站，可执行以下命令：
56+
57+
```bash
58+
# 克隆仓库
59+
git clone https://github.com/cgbin24/pro_color.git
60+
cd pro_color
61+
62+
# 安装依赖
63+
npm install
64+
65+
# 构建扩展
66+
npm run build:extension
67+
68+
# 在本地启动测试服务器
69+
cd dist/source
70+
npx http-server
71+
```
72+
73+
然后在浏览器中访问 `http://localhost:8080` 查看效果。
74+
75+
## 自定义演示网站
76+
77+
如需修改演示网站的内容或样式，请编辑 `.github/workflows/build-and-release.yml` 文件中的 `构建演示网站` 步骤。

0 commit comments

Comments
 (0)