通過(guò) Github workflows CI/CD 自動(dòng)化部署 Github Pages hugo 免費(fèi)博客

文章博客地址：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 是一種持續(xù)集成和持續(xù)交付 (CI/CD) 平臺(tái)，可用于自動(dòng)執(zhí)行生成、測(cè)試和部署管道。 您可以創(chuàng)建工作流程來(lái)構(gòu)建和測(cè)試存儲(chǔ)庫(kù)的每個(gè)拉取請(qǐng)求，或?qū)⒑喜⒌睦≌?qǐng)求部署到生產(chǎn)環(huán)境

流程及原理介紹

• 本文主要介紹使用GitHub Actions 來(lái)實(shí)現(xiàn)自動(dòng)化部署博客網(wǎng)站 ,靜態(tài)網(wǎng)站生成使用的是Hugo,部署使用的是Github pages,并且使用自定義域名。
  

1. 本地寫hugo-blog 博客,hugo-blog 是一個(gè)hugo的博客模板,使用hugo new site hugo-blog命令創(chuàng)建,可以在里面寫markdown文件
2. 寫好后推送到github hugo-blog 倉(cāng)庫(kù),觸發(fā)github actions ci/cd,執(zhí)行hugo命令生成靜態(tài)網(wǎng)站,并且推送到github-pages 倉(cāng)庫(kù)
3. github-pages 倉(cāng)庫(kù)接收到推送后,會(huì)自動(dòng)部署到github pages,公網(wǎng)可以通過(guò) github pages 域名 訪問(wèn),也可以通過(guò)CNAME配置自定義域名訪問(wèn)

Github Pages 介紹

• Github Pages 是一個(gè)靜態(tài)網(wǎng)站托管服務(wù),可以通過(guò)github pages 托管靜態(tài)網(wǎng)站,并且可以通過(guò)自定義域名訪問(wèn)
• 創(chuàng)建github pages 倉(cāng)庫(kù),倉(cāng)庫(kù)名必須是username.github.io格式,username是你的github用戶名,倉(cāng)庫(kù)名必須是這個(gè),否則無(wú)法部署成功 訪問(wèn)地址就是 https://username.github.io
• 自定義域名訪問(wèn),例如www.abc.com,在域名服務(wù)商添加CNAME記錄,指向username.github.io, 然后在github pages 倉(cāng)庫(kù)設(shè)置中添加自定義域名, 這樣通過(guò)www.abc.com 就能訪問(wèn)github pages
• 下面的 Actions 部分會(huì)介紹如何自動(dòng)化部署到github pages,并且配置自定義域名

Hugo 介紹

• Hugo 是一個(gè)靜態(tài)網(wǎng)站生成器,可以通過(guò)markdown文件生成靜態(tài)網(wǎng)站,官網(wǎng):https://gohugo.io/
• 寫好markdown文件后,執(zhí)行hugo命令,在public目錄生成靜態(tài)網(wǎng)站,然后 將public目錄推送到github pages 倉(cāng)庫(kù)
• github actions工作流 就是通過(guò)hugo命令生成靜態(tài)網(wǎng)站,并且推送到github pages 倉(cāng)庫(kù)

使用 Github Actions 自動(dòng)化部署

創(chuàng)建 Github Actions

在github 倉(cāng)庫(kù)中(hugo-blog)創(chuàng)建.github/workflows目錄,并且在目錄中創(chuàng)建deploy.yml文件,文件名可以自定義,但是后綴必須是yml,例如deploy.yml,這樣就創(chuàng)建了一個(gè)github actions,并且會(huì)自動(dòng)執(zhí)行,下面介紹我的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配置文件用于自動(dòng)部署Hugo博客到我的 GitHub Pages。以下是每個(gè)步驟的功能和解釋：

步驟1：Checkout

此步驟使用 actions/checkout 插件來(lái)檢出 GitHub 倉(cāng)庫(kù),具體使用文檔地址是 checkout
submodules: true 參數(shù)用于同時(shí)檢出子模塊，fetch-depth: 0 用于完整地檢出所有歷史記錄。

步驟2：Setup Hugo

此步驟使用 peaceiris/actions-hugo 插件來(lái)安裝最新版本的 Hugo。

- name: Setup Hugo
  uses: peaceiris/actions-hugo@v2
  with:
    hugo-version: "latest"

步驟3：Build Web

此步驟在運(yùn)行時(shí)調(diào)用 Hugo 構(gòu)建靜態(tài)網(wǎng)站，并在 public 目錄中生成靜態(tài)html文件

- name: Build Web
  run: hugo

步驟4：Deploy Web

此步驟使用 peaceiris/actions-gh-pages 插件將靜態(tài)網(wǎng)站部署到 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 }}

參數(shù)的含義：

• PERSONAL_TOKEN: GitHub Personal Access Tokens 用于訪問(wèn) GitHub 倉(cāng)庫(kù),需要 到[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-Aw7AxQxq-1685421847201)(null)] ，添加權(quán)限 并將Token存儲(chǔ)在倉(cāng)庫(kù)的 Secrets 中以供 Workflow 使用
• EXTERNAL_REPOSITORY: 部署到的 GitHub Pages 倉(cāng)庫(kù),webws/webws.github.io 是我的github pages 倉(cāng)庫(kù),需要修改為你的github pages 倉(cāng)庫(kù)
• PUBLISH_BRANCH: 要在其上部署站點(diǎn)的分支名稱（通常為master）。
• PUBLISH_DIR: hugo 靜態(tài)html文件目錄。（在此例中，Hugo 輸出位于 ./public 目錄中）。
• commit_message: 提交更改時(shí)使用的提交消息，從上游分支獲取。
• cname: 自定義域名,CNAME記錄,我自己的是 blog.taoluyuan.com,需要修改為你的自定義域名,如果沒有,可以刪除這個(gè)參數(shù),使用默認(rèn)的github pages域名也訪問(wèn) webws.github.io

設(shè)置 Secrets 變量,對(duì)應(yīng) yml 文件中的 PERSONAL_TOKEN 和 DOMAIN ,具體設(shè)置 在 倉(cāng)庫(kù)中(hugo-blog) 的 Settings -> secrets and variables->actions 中,hugo-blog 要換成你自己的倉(cāng)庫(kù)名文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-469183.html

• BLOG_TOKEN: GitHub Personal Access Token。
• DOMAIN: 你的自定義域名。

觸發(fā) Github Actions

• 在github 倉(cāng)庫(kù)中(hugo-blog)創(chuàng)建.md文件,并且提交到github,這樣就會(huì)觸發(fā)github actions,自動(dòng)部署到github pages 倉(cāng)庫(kù),并且可以通過(guò)自定義域名訪問(wèn)了
• 可以通過(guò) 倉(cāng)庫(kù)中 Actions 標(biāo)簽查看部署狀態(tài)

訪問(wèn) Github Pages

1. 通過(guò)github pages域名訪問(wèn), https://webws.github.io，因?yàn)槲以O(shè)置了自定義域名,所以這個(gè)域名會(huì)自動(dòng)跳轉(zhuǎn)到 https://blog.taoluyuan.com
2. 通過(guò)自定義域名訪問(wèn), https://blog.taoluyuan.com

到了這里，關(guān)于通過(guò) Github workflows CI/CD 自動(dòng)化部署 Github Pages hugo 免費(fèi)博客的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！