Deploy Hugo to Vercel
因為一直不想花錢買 godaddy 的 tls，所以一直是 http 的網站，最近發現 vercel 有提供免費的 tls(let’s encrypt)，所以就把 blog 部署過去
概念
使用 github action 進行部署行為，每次 push master 時觸發部署
這裡假設你已經有一個 hugo 的專案，並且已經可以在本機端 build 成靜態網頁
1. 設定 vercel project
登入你的 vercel，綁定你的 hugo 專案
2. 取得 vercel 設定
- 安裝 vercel
npm i -g vercel
- 部署
vercel
執行後會在目錄產生.vercel資料夾，裡面包含VERCEL_PROJECT_ID與VERCEL_ORG_ID，對應到 deploy-production.yml 的設定如下
{
"projectId": "VERCEL_PROJECT_ID",
"orgId": "VERCEL_ORG_ID"
}
在 vercel 的 個人設定->token 取得 VERCEL_TOKEN
3. 設定 github repo
把上一部拿到的設定都寫入 github repo 的 secret
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 跑一次
5. 部署
非常簡單，只要 push 到 master 就會觸發 github action，然後就會自動部署到 vercel
git push origin master
github CI、vercel CI 會回報錯誤，依照錯誤修正
6. 設定 dns
最終要的是他的 tls，vercel 依照介面設定即可
如果你曾經在別的地方註冊過 DNS，記得把它改寫成 vercel 提供的 A 與 CNAME，不然指錯地方就尷尬了