乐趣区

关于devops:通过-Github-workflows-CICD-自动化部署-Github-Pages-hugo-免费博客

jiezi

通过 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: deploy

on:
  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
退出移动版