CI/CD是什么？使用GitHub Actions快速体验
文章目录
- 什么是 CI/CD？
- 通过GitHub Actions实现静态HTML页面推送代码后自动部署到GitHub Pages
- 步骤 1：创建仓库并克隆到本地
- 步骤 2：创建最简单的 HTML 文件
- 步骤 3：创建 GitHub Actions 工作流文件
- 步骤 4：推送代码到 GitHub
- 步骤 5：启用 GitHub Pages
- 步骤 6：查看部署结果
- 验证自动部署
什么是 CI/CD？
CI/CD 是 持续集成（Continuous Integration） 和 持续交付/持续部署（Continuous Delivery/Continuous Deployment） 的缩写。它是一套自动化的软件开发与交付流程，旨在将代码从提交到最终部署的各个环节串联起来，替代传统繁琐的人工操作，从而实现快速、频繁且可靠的软件发布。
具体来说，它包含三个核心环节：
- 持续集成 (CI)：开发人员频繁地将代码变更合并到共享的代码仓库中。每次合并都会触发自动化的构建和测试流程，以便尽早发现集成错误，保证代码库的质量和稳定性。
- 持续交付 (CD)：在 CI 阶段验证通过的代码，会被自动化地打包并交付到类生产环境中进行进一步测试。代码始终保持在“可部署”状态，但在推送到生产环境之前通常需要手动批准。
- 持续部署：这是更高级别的自动化。在通过所有自动化测试后，代码变更无需人工干预，直接自动部署到生产环境并交付给最终用户。
通过GitHub Actions实现静态HTML页面推送代码后自动部署到GitHub Pages
最终效果：访问https://你的用户名.github.io/website-with-CI-CD/
整体项目结构
website-with-CI-CD/ ├── .github/ │ └── workflows/ │ └── deploy.yml# GitHub Actions 工作流文件├── index.html# 网站首页步骤 1：创建仓库并克隆到本地
在 GitHub 上新建一个公开仓库，命名为 website-with-CI-CD。
将仓库克隆到本地电脑：
gitclone https://github.com/你的用户名/website-with-CI-CD.gitcdwebsite-with-CI-CD步骤 2：创建最简单的 HTML 文件
在项目根目录创建 index.html，内容如下：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>我的自动部署网站</title></head><body><h1>🚀 部署成功！</h1><p>这个页面通过 GitHub Actions 自动部署。</p><p>当前时间：<spanid="time"></span></p><script>document.getElementById('time').textContent=newDate().toLocaleString();</script></body></html>步骤 3：创建 GitHub Actions 工作流文件
创建目录和文件：
mkdir-p.github/workflows#目录名固定，GitHub规定touch.github/workflows/deploy.yml#文件后缀为.yml或.yaml，文件名自定义，通常是描述当前工作流的用途复制下面的内容到 .github/workflows/deploy.yml：
name:部署到 GitHub Pages#定义工作流workflow的名称on:#定义触发该工作流的条件push:branches:["main"]# 当推送到 main 分支时触发jobs:#定义工作流中包含的作业jobdeploy:#一个名为deploy的job，一个工作流可以包含多个jobruns-on:ubuntu-latest# 指定运行环境为最新版的 Ubuntu 虚拟机permissions:#为job授予特定权限contents:read#允许读取仓库代码内容pages:write#允许将构建好的文件写入 GitHub Pages 的存储区id-token:write#允许生成 OIDC 令牌，用于安全地向 GitHub Pages 验证身份steps:-name:检出代码uses:actions/checkout@v4#调用GitHub 官方提供的插件actions/checkout@v4，将仓库里的代码完整克隆到虚拟机的当前目录下-name:配置 Pagesuses:actions/configure-pages@v4#自动检测项目类型，并为后续的部署配置好必要的环境变量和基础设置-name:上传构建产物uses:actions/upload-pages-artifact@v3#打包并上传需要部署的文件with:#向插件传递参数path:'.'#将当前目录（. 代表当前目录）下的所有文件打包成一个 Artifact（构建产物）并上传。-name:部署到 GitHub Pagesuses:actions/deploy-pages@v4#执行最终的发布动作步骤 4：推送代码到 GitHub
gitadd.gitcommit-m"添加首页和自动部署工作流"gitpush origin main步骤 5：启用 GitHub Pages
推送完成后：
- GitHub 进入你的仓库website-with-CI-CD→Settings→Pages
- 在Build and deployment部分：
Source 选择GitHub Actions（不要选 Deploy from a branch） - 稍等片刻，Actions 工作流会自动运行
步骤 6：查看部署结果
- 点击仓库上方的Actions标签页，可以看到工作流正在运行
- 绿色对勾表示部署成功
3. 访问https://你的用户名.github.io/website-with-CI-CD/即可看到页面
验证自动部署
修改 index.html 中的内容，例如把 “部署成功” 改成 “部署成功！第二次更新”，然后：
gitadd.gitcommit-m"更新页面内容"gitpush origin main等待 Actions 运行完毕，浏览器刷新https://你的用户名.github.io/website-with-CI-CD/页面即可看到新内容。