通过 Github workflows CI/CD 自动化部署 Github Pages hugo 收费博客
文章博客地址：https://blog.taoluyuan.com/posts/github-workflows/
Github Workflows 介绍
GitHub Actions 介绍
- GitHub 文档：https://docs.github.com/zh/actions/learn-github-actions/understanding-github-actions
官网介绍:
GitHub Actions是一种继续集成和继续交付 (CI/CD) 平台，可用于主动执行生成、测试和部署管道。 您能够创立工作流程来构建和测试存储库的每个拉取申请，或将合并的拉取申请部署到生产环境流程及原理介绍
- 本文次要介绍应用GitHub Actions 来实现自动化部署博客网站 ,动态网站生成应用的是Hugo,部署应用的是Github pages,并且应用自定义域名。
- 本地写hugo-blog 博客,hugo-blog 是一个hugo的博客模板,应用
hugo new site hugo-blog命令创立,能够在外面写markdown文件 - 写好后推送到github hugo-blog 仓库,触发github actions ci/cd,执行hugo命令生成动态网站,并且推送到github-pages 仓库
github-pages 仓库接管到推送后,会主动部署到github pages,公网能够通过 github pages 域名 拜访,也能够通过CNAME配置自定义域名拜访
Github Pages 介绍
- Github Pages 是一个动态网站托管服务,能够通过github pages 托管动态网站,并且能够通过自定义域名拜访
- 创立github pages 仓库,仓库名必须是
username.github.io格局,username是你的github用户名,仓库名必须是这个,否则无奈部署胜利 拜访地址就是 https://username.github.io - 自定义域名拜访,例如
www.abc.com,在域名服务商增加CNAME记录,指向username.github.io, 而后在github pages 仓库设置中增加自定义域名, 这样通过www.abc.com 就能拜访github pages 上面的 Actions 局部会介绍如何自动化部署到github pages,并且配置自定义域名
Hugo 介绍
- Hugo 是一个动态网站生成器,能够通过markdown文件生成动态网站,官网:https://gohugo.io/
- 写好markdown文件后,执行hugo命令,在public目录生成动态网站,而后 将public目录推送到github pages 仓库
github actions工作流 就是通过hugo命令生成动态网站,并且推送到github pages 仓库
应用 Github Actions 自动化部署
创立 Github Actions
在github 仓库中(hugo-blog)创立.github/workflows目录,并且在目录中创立deploy.yml文件,文件名能够自定义,然而后缀必须是yml,例如deploy.yml,这样就创立了一个github actions,并且会主动执行,上面介绍我的deploy.yml文件
name: deployon: push: workflow_dispatch:jobs: build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v2 with: submodules: true fetch-depth: 0 - name: Setup Hugo uses: peaceiris/actions-hugo@v2 with: hugo-version: "latest" - name: Build Web run: hugo - name: Deploy Web uses: peaceiris/actions-gh-pages@v3 with: PERSONAL_TOKEN: ${{ secrets.BLOG_TOKEN }} EXTERNAL_REPOSITORY: webws/webws.github.io PUBLISH_BRANCH: master PUBLISH_DIR: ./public commit_message: ${{ github.event.head_commit.message }} cname: ${{ secrets.DOMAIN }}
下面 GitHub Actions配置文件用于主动部署Hugo博客到我的 GitHub Pages。以下是每个步骤的性能和解释：
步骤1：Checkout
此步骤应用 actions/checkout 插件来检出 GitHub 仓库,具体应用文档地址是 [外链图片转存失败,源站可能有防盗链机制,倡议将图片保留下来间接上传(img-8llNKDNw-1685421845358)(null)]submodules: true 参数用于同时检出子模块，fetch-depth: 0 用于残缺地检出所有历史记录。
步骤2：Setup Hugo
此步骤应用 peaceiris/actions-hugo 插件来装置最新版本的 Hugo。
- name: Setup Hugo uses: peaceiris/actions-hugo@v2 with: hugo-version: "latest"步骤3：Build Web
此步骤在运行时调用 Hugo 构建动态网站，并在 public 目录中生成动态html文件
- name: Build Web run: hugo步骤4：Deploy Web
此步骤应用 peaceiris/actions-gh-pages 插件将动态网站部署到 GitHub Pages 上。
- name: Deploy Web uses: peaceiris/actions-gh-pages@v3 with: PERSONAL_TOKEN: ${{ secrets.BLOG_TOKEN }} EXTERNAL_REPOSITORY: webws/webws.github.io PUBLISH_BRANCH: master PUBLISH_DIR: ./public commit_message: ${{ github.event.head_commit.message }} cname: ${{ secrets.DOMAIN }}参数的含意：
PERSONAL_TOKEN: GitHub Personal Access Tokens 用于拜访 GitHub 仓库,须要 到[外链图片转存失败,源站可能有防盗链机制,倡议将图片保留下来间接上传(img-Aw7AxQxq-1685421847201)(null)] ，增加权限 并将Token存储在仓库的 Secrets 中以供 Workflow 应用EXTERNAL_REPOSITORY: 部署到的 GitHub Pages 仓库,webws/webws.github.io 是我的github pages 仓库,须要批改为你的github pages 仓库PUBLISH_BRANCH: 要在其上部署站点的分支名称（通常为master）。PUBLISH_DIR: hugo 动态html文件目录。（在此例中，Hugo 输入位于./public目录中）。commit_message: 提交更改时应用的提交音讯，从上游分支获取。cname: 自定义域名,CNAME记录,我本人的是 blog.taoluyuan.com,须要批改为你的自定义域名,如果没有,能够删除这个参数,应用默认的github pages域名也拜访 webws.github.io
设置 Secrets 变量,对应 yml 文件中的 PERSONAL_TOKEN 和 DOMAIN ,具体设置 在 仓库中(hugo-blog) 的 Settings -> secrets and variables->actions 中,hugo-blog 要换成你本人的仓库名
BLOG_TOKEN: GitHub Personal Access Token。DOMAIN: 你的自定义域名。
触发 Github Actions
- 在github 仓库中(hugo-blog)创立.md文件,并且提交到github,这样就会触发github actions,主动部署到github pages 仓库,并且能够通过自定义域名拜访了
能够通过 仓库中 Actions 标签查看部署状态
拜访 Github Pages
- 通过github pages域名拜访, https://webws.github.io，因为我设置了自定义域名,所以这个域名会主动跳转到 https://blog.taoluyuan.com
- 通过自定义域名拜访, https://blog.taoluyuan.com