HTML自动部署实战指南｜前端CI/CD教程

本文深入浅出地梳理了HTML静态站点自动部署的实战路径，聚焦“git push→自动上线”这一核心目标，重点推荐零成本、免运维的GitHub Actions+GitHub Pages方案，并详解其关键配置要点；同时对比分析了SSH直传（推荐ssh-action替代rsync）和Docker部署的适用场景与典型陷阱，强调路径、权限、环境一致性等易被忽视却决定成败的细节，帮助前端开发者5分钟快速跑通首条CI/CD流水线，真正实现高效、稳定、可复现的无人值守发布。

HTML 静态站点的自动部署，核心不是“写代码”，而是把 git push 和“文件上线”这两个动作串成一条无人值守的流水线。只要路径选对、配置写准，5 分钟就能跑通第一版。

GitHub Actions 是最轻量的起点

如果你只有几个 HTML/CSS/JS 文件，没用框架、没打包步骤，GitHub Actions + GitHub Pages 是零成本首选。它不依赖服务器运维，也不需要 Docker 或 SSH 权限。

• 工作流文件必须放在 .github/workflows/deploy.yml，路径错一个字符就不会触发
• 默认只监听 push 到 main 分支，如果用 master 或其他分支，得手动改 on.push.branches
• 不用写构建命令（比如 npm run build），直接跳过构建步骤，用 actions/upload-pages-artifact 把根目录或 docs/ 目录传上去就行
• 部署成功后，链接在仓库 Settings → Pages 里，发布源必须选 “GitHub Actions”，否则页面还是旧的

要部署到自己的服务器，ssh-action 比 rsync 更稳

很多教程教用 rsync 命令推文件，但 CI 环境里常缺依赖、权限混乱，容易卡在 “command not found” 或 “permission denied”。appleboy/ssh-action 封装了连接和执行逻辑，出错提示也更明确。

• host、username、key 全部走 secrets，别硬编码进 YAML
• 传输前建议加清理步骤，比如 rm -rf /var/www/html/*，避免旧文件残留导致 404 或样式错乱
• 如果目标是 Nginx，默认文档根目录是 /usr/share/nginx/html，不是 /var/www/html —— 这个路径差异会导致部署成功但页面空白
• 传输完记得 reload 服务：sudo nginx -s reload 或 sudo systemctl reload nginx，否则修改不会生效

Docker 不是必需项，但适合多环境或带后端的场景

纯 HTML 站点用 Docker 属于“杀鸡用牛刀”，除非你同时跑 API、需要固定运行时版本、或者要和测试环境完全一致。一旦引入 Docker，就得维护 Dockerfile、镜像仓库、服务器上的 docker-compose.yml，复杂度指数上升。

• Dockerfile 只需三行：基于 nginx:alpine、复制 HTML 文件到 /usr/share/nginx/html、暴露 80 端口
• 镜像推送到 Docker Hub 后，服务器上不能只靠 docker pull，得配合 docker stop + docker rm + docker run 才算完整更新
• 用 docker-compose up -d 更稳妥，但要求服务器装了 docker-compose，有些云主机默认没装

真正容易被忽略的点是：所有自动化都建立在“路径确定、权限可控、网络可达”的前提下。比如 GitHub Actions 默认用 Ubuntu runner，而你的本地开发机是 macOS —— 路径分隔符、换行符、甚至 sed 命令语法都可能不兼容。别急着抄模板，先在本地用相同系统跑一遍等效命令，再挪到 YAML 里。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。