使用Github快速部署高性能Hugo靜態網站(二)

上一篇Hugo架設靜態網站教學 - 基本安裝及設定(一)Hugo的基本介紹,安裝及如何快速部署一個Hugo靜態網頁,已經成功在local環境中套用Hugo Theme,距離上一篇內容也經過了半年之久,希望各位同學還記得上一篇的作法,接下來就是紀錄如何使用Github Action自動建置Hugo網站並部署到Github Pages,實現自動化部署的目標,讓我們可以專注在文章的撰寫

建立步驟

建立 GitHub repository(作為靜態網頁用)

詳細內容請參考官方文件 GitHub Pages

1.需要為Public
2.名稱為{username}.github.io形式

需要另外在github準備另一個專案,這邊命名為Hugo-main(產生網頁用),開始建立第一個workflows,在專案底下建立路徑為.github/workflows/main.yml

首先為這個gitflows取個名稱,這邊就命名deploy-to-github

name: deploy-to-github

接下來為要觸發的時機與分之設定

on:
  push:
    branches:
      - master  # 當main分支有push操作時

開始寫第一個Job

接下來建立第一個 Job，我這裡將這個 Job 命名為 deploy，並再 runs-on 選項設定這個 Job 要跑在 ubuntu-20.04版本上

jobs:
  deploy:
    runs-on: ubuntu-20.04
    steps:

這個步驟要把Repo checkout下來,這邊使用官方的action actions/checkout@v2,如Hugo是使用Submodule方式pull,記得要加入submodules: true,來把Theme加入

steps:
  - uses: actions/checkout@v2
    with:
      submodules: true  # 找尋Hugo主題(true OR recursive)
      fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

接下來安裝Ｈugo部分也使用官方的action

  - name: Setup Hugo
    uses: peaceiris/actions-hugo@v2
    with:
      hugo-version: '0.92.2' # hugo 版本
      # extended: true  # 如果是使用extended版本的務必取消註解。
  - name: Build
    run: hugo --gc --minify --cleanDestinationDir

接下來這一步重要的地方,將前面步驟Hugo Build的靜態頁面發佈到Github Pages上面,一樣也使用官方的action操作

- name: Deploy
  uses: peaceiris/actions-gh-pages@v3
  with:
    external_repository: username/username.github.io
    deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }} 設定推送的 Token，直接設為 ${{ secrets.GITHUB_TOKEN }} 就可以了，GITHUB_TOKEN 會由 actions 去處理。
    PUBLISH_BRANCH: master  # 推送到 gh-pages 分支
    PUBLISH_DIR: ./public     # hugo 生成的目錄
    commit_message: ${{ github.event.head_commit.message }}
    cname: josh-ku.com #設定 Github Pages Custom Domain 使用。
    force_orphan: true #在目標分支，只保留最後一個提交，預設為 false。

上步驟的deploy key於github頁面中添加,請到Settings/Secrets新增一組 Secrets，我這邊叫做 ACTIONS_DEPLOY_KEY
提供完整的workflow設定檔

name: deploy-to-github

on:
  push:
    branches:
      - master  # 當main分支有push操作時

jobs:
  deploy:
    runs-on: ubuntu-20.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true  # 找尋Hugo主題(true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.92.2' # hugo 版本
          # extended: true  # 如果是使用extended版本的務必取消註解。
      - name: Build
        run: hugo --gc --minify --cleanDestinationDir

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          external_repository: username/username.github.io
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }} #設定推送的 Token，直接設為 ${{ secrets.GITHUB_TOKEN }} 就可以了，GITHUB_TOKEN 會由 actions 去處理。
          PUBLISH_BRANCH: master  # 推送到 gh-pages 分支
          PUBLISH_DIR: ./public     # hugo 生成的目錄
          commit_message: ${{ github.event.head_commit.message }}
          cname: josh-ku.com
          force_orphan: true #在目標分支，只保留最後一個提交，預設為 false。

開始部署

此時執行推版就大功告成了!,靜態頁面會自動發佈到username.github.io專案中

綁定網域(以cloudflare為例)

將你購買的網域在cloudflare上面設定
設定 CloudFlare DNS (網域名稱伺服器) 你會看到 CloudFlare 要你去 GoDaddy 帳戶變更名稱伺服器，目的是將 GoDaddy 的 Domain name (你剛才購買的網域) 指定連結到 CloudFlare ，下方紅色框框處 (名稱伺服器) 要填在 GoDaddy 的「網域名稱伺服器中。」

在 Github 建立 CNAME 在該 Repository 下點擊「Setting」(我的話就是 joshku01.github.io)，往下拉直到看到「Github Pages」區塊，在 Custom domain 填上自己的網域名稱。(我就會填上 josh-ku.com) 如果成功建立，此時回到 {username}.github.io > Code ，會發現多出了一個名為「CNAME」檔案。

結語

利用 Github Actions 將以往要手動打git指令的動作改為自動，雖然節省的時間不多，但可以減少手動執行時出錯的機會，畢竟只要是人都會有出錯的時候，也讓自己可以專注於寫作上面，希望大家都可以很順利的建立出自己的網站，如果有任何建構上的問題也可以在下方留言詢問喔，前提是我要有看到。

參考資料

https://docs.github.com/en/actions https://docs.github.com/zh/actions/quickstart

Hugo搭配Github Actions實現自動化部屬(二)

使用Github快速部署高性能Hugo靜態網站(二)

建立步驟

結語

參考資料

Josh Ku