Deploy Hugo to Vercel

因為一直不想花錢買 godaddy 的 tls,所以一直是 http 的網站,最近發現 vercel 有提供免費的 tls(let’s encrypt),所以就把 blog 部署過去

概念

使用 github action 進行部署行為,每次 push master 時觸發部署

這裡假設你已經有一個 hugo 的專案,並且已經可以在本機端 build 成靜態網頁

1. 設定 vercel project

登入你的 vercel,綁定你的 hugo 專案

dashboard 右上角選擇 new project
找到你的 hugo 專案進行綁定

2. 取得 vercel 設定

  • 安裝 vercel
npm i -g vercel
  • 部署
vercel

執行後會在目錄產生.vercel資料夾,裡面包含VERCEL_PROJECT_IDVERCEL_ORG_ID,對應到 deploy-production.yml 的設定如下

{
  "projectId": "VERCEL_PROJECT_ID",
  "orgId": "VERCEL_ORG_ID"
}

在 vercel 的 個人設定->token 取得 VERCEL_TOKEN

輸入完 metadata 點擊 create 即建立

3. 設定 github repo

把上一部拿到的設定都寫入 github repo 的 secret

Settings->Secrets and variables->Actions

4. 設定 github action

在專案中建立.github/workflows/deploy-production.yml如下

name: deploy-production

on:
  push:
    branches: [ main ]

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

    steps:

    - name: Checkout
      uses: actions/checkout@v2
      with:
        submodules: recursive

    - name: Start Deployment
      uses: bobheadxi/[email protected]
      id: deployment
      with:
        step: start
        token: ${{ secrets.GITHUB_TOKEN }}
        env: Production

    - name: Install Hugo
      uses: peaceiris/actions-hugo@v2
      with:
        hugo-version: '0.111.3'
        extended: true

    - name: Build
      run: hugo --gc --minify --config=config.toml

    - name: Deploy to Vercel
      uses: amondnet/vercel-action@v20
      id: vercel-action
      with:
        vercel-token: ${{ secrets.VERCEL_TOKEN }}
        vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
        github-comment: false
        vercel-args: '--prod'
        working-directory: .

    - name: Update Deployment Status
      uses: bobheadxi/[email protected]
      if: always()
      with:
        step: finish
        token: ${{ secrets.GITHUB_TOKEN }}
        status: ${{ job.status }}
        deployment_id: ${{ steps.deployment.outputs.deployment_id }}
        env_url: ${{ steps.vercel-action.outputs.preview-url }}

記得要把 vercel 執行的 hugo build 拔掉,因為 github action 已經跑過了,不該再被 vercel CI 跑一次

Project settings->General::build command 設為空值

5. 部署

非常簡單,只要 push 到 master 就會觸發 github action,然後就會自動部署到 vercel

git push origin master

github CI、vercel CI 會回報錯誤,依照錯誤修正

6. 設定 dns

最終要的是他的 tls,vercel 依照介面設定即可

Project settings->Domains

如果你曾經在別的地方註冊過 DNS,記得把它改寫成 vercel 提供的 A 與 CNAME,不然指錯地方就尷尬了

references

cmd + /