通過 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 倉庫,具體使用文檔地址是 checkout
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
