Skip to content

Commit 4c4d6ad

Browse files
committed
ci: setup github pages deployment with storybook
1 parent b7bbe90 commit 4c4d6ad

File tree

2 files changed

+147
-50
lines changed

2 files changed

+147
-50
lines changed
Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
workflow_dispatch:
8+
9+
permissions:
10+
contents: read
11+
pages: write
12+
id-token: write
13+
14+
concurrency:
15+
group: "pages"
16+
cancel-in-progress: false
17+
18+
jobs:
19+
build-and-deploy:
20+
runs-on: ubuntu-latest
21+
22+
steps:
23+
- name: Checkout
24+
uses: actions/checkout@v4
25+
with:
26+
fetch-depth: 0
27+
28+
- name: Setup Node.js
29+
uses: actions/setup-node@v4
30+
with:
31+
node-version: '22'
32+
cache: 'npm'
33+
34+
- name: Install dependencies
35+
run: npm ci
36+
37+
- name: Build main app
38+
run: npm run build:production
39+
env:
40+
NODE_ENV: production
41+
PUBLIC_URL: /pro-react-admin
42+
43+
- name: Build Storybook
44+
run: npm run build-storybook
45+
env:
46+
NODE_ENV: production
47+
48+
- name: Organize build output
49+
run: |
50+
mkdir -p ./dist-combined
51+
# 主应用放在根目录
52+
cp -r ./dist/* ./dist-combined/
53+
# Storybook 放在 /storybook 子目录
54+
mkdir -p ./dist-combined/storybook
55+
cp -r ./storybook-static/* ./dist-combined/storybook/
56+
# 创建根目录的 index.html(如果需要导航页)
57+
echo '<!DOCTYPE html>
58+
<html lang="zh-CN">
59+
<head>
60+
<meta charset="UTF-8">
61+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
62+
<title>Pro React Admin</title>
63+
<style>
64+
body {
65+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
66+
display: flex;
67+
flex-direction: column;
68+
align-items: center;
69+
justify-content: center;
70+
min-height: 100vh;
71+
margin: 0;
72+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
73+
color: white;
74+
}
75+
.container {
76+
text-align: center;
77+
padding: 2rem;
78+
}
79+
h1 { font-size: 3rem; margin-bottom: 1rem; }
80+
p { font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.9; }
81+
.links {
82+
display: flex;
83+
gap: 1.5rem;
84+
justify-content: center;
85+
flex-wrap: wrap;
86+
}
87+
a {
88+
display: inline-block;
89+
padding: 1rem 2rem;
90+
background: rgba(255, 255, 255, 0.2);
91+
backdrop-filter: blur(10px);
92+
border: 2px solid rgba(255, 255, 255, 0.3);
93+
border-radius: 12px;
94+
color: white;
95+
text-decoration: none;
96+
font-weight: 600;
97+
font-size: 1.1rem;
98+
transition: all 0.3s ease;
99+
}
100+
a:hover {
101+
background: rgba(255, 255, 255, 0.3);
102+
border-color: rgba(255, 255, 255, 0.5);
103+
transform: translateY(-2px);
104+
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
105+
}
106+
.icon { margin-right: 0.5rem; }
107+
</style>
108+
</head>
109+
<body>
110+
<div class="container">
111+
<h1>🚀 Pro React Admin</h1>
112+
<p>基于 React 19 的高性能企业级中后台解决方案</p>
113+
<div class="links">
114+
<a href="./index.html">
115+
<span class="icon">📱</span>
116+
主应用
117+
</a>
118+
<a href="./storybook/index.html">
119+
<span class="icon">📚</span>
120+
Storybook 组件库
121+
</a>
122+
<a href="https://github.com/wkylin/pro-react-admin" target="_blank">
123+
<span class="icon">💻</span>
124+
GitHub 仓库
125+
</a>
126+
</div>
127+
</div>
128+
</body>
129+
</html>' > ./dist-combined/portal.html
130+
131+
- name: Setup Pages
132+
uses: actions/configure-pages@v4
133+
134+
- name: Upload artifact
135+
uses: actions/upload-pages-artifact@v3
136+
with:
137+
path: './dist-combined'
138+
139+
- name: Deploy to GitHub Pages
140+
id: deployment
141+
uses: actions/deploy-pages@v4
142+
143+
- name: Output deployment URL
144+
run: |
145+
echo "🚀 Deployment successful!"
146+
echo "📱 Main App: https://wkylin.github.io/pro-react-admin/"
147+
echo "📚 Storybook: https://wkylin.github.io/pro-react-admin/storybook/"

.github/workflows/deploy-storybook.yml

Lines changed: 0 additions & 50 deletions
This file was deleted.

0 commit comments

Comments
 (0)