纯html静态页面github actions自动部署关键在于:push、checkout、upload-pages-artifact三步串联,且pages设置中发布源必须手动选为“github actions”,否则部署成功但页面不更新。

纯 HTML 静态页面完全能跑通 GitHub Actions 自动部署,关键不是写多复杂的脚本,而是把 push、checkout、upload-pages-artifact 这三步串对,且发布源必须设为 “GitHub Actions” —— 否则你改了十次 workflow,页面还是旧的。
GitHub Pages 发布源选错导致页面不更新
这是最常被忽略的一步:部署成功 ≠ 页面刷新。GitHub Pages 的 Settings → Pages 页面里有两个关键选项:
- “Source” 下拉菜单必须手动选成 GitHub Actions(不是
main分支或docs/文件夹) - 如果仓库是私有的,Pages 功能默认关闭,需升级到 GitHub Pro 或 Team 计划才能启用
- 首次设置后,链接格式固定为
https://.github.io/(项目站点)或https://.github.io(用户站点,仓库名必须是.github.io)
用 actions/upload-pages-artifact 跳过构建,直传 HTML 文件
没有打包步骤(比如没用 Vite/Next.js),就别硬加 npm run build。直接把根目录或 docs/ 目录上传即可,省资源、少出错。
- 工作流文件路径必须是
.github/workflows/deploy.yml,错一个字符(比如写成deploy.yaml)就不会触发 - 监听分支要和你实际 push 的一致:
on.push.branches: [main],若用master,得改成[master] - 核心上传步骤写法:
steps: - uses: actions/checkout@v4 - uses: actions/upload-pages-artifact@v3 with: path: '.' # 传整个仓库根目录(含 index.html) # 或写 'docs/' 如果 HTML 放在 docs/ 下 -
actions/upload-pages-artifact不需要配置GITHUB_TOKEN,它自动继承上下文权限
用 gh-pages 工具时,GITHUB_TOKEN 权限和提交作者必须显式设置
如果你用 npx gh-pages -d dist 这类命令,就得自己处理 Git 提交身份和远程地址,否则会报 remote: Permission to ... denied 或空提交。
- 必须重写 remote URL,否则
gh-pages默认走只读 HTTPS 地址:git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git - 必须指定提交作者,否则 GitHub Actions 会以匿名用户提交,导致 Pages 不识别:
npx gh-pages -d dist -u "github-actions-bot <support>"</support>
-
GITHUB_TOKEN是 GitHub 自带的 secret,无需手动创建,但必须通过env:注入到 step 中 - 注意
gh-pages会强制推送到gh-pages分支 —— 如果你只想用main分支发布,就别用它
真正卡住人的往往不是 workflow 写法,而是 Settings → Pages 里那个下拉框没点对,或者 .github/workflows/ 路径里多了一个空格。部署动作本身极轻量,问题大概率出在“人没看见的配置层”。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











