[Hugo] Hugo部署到Vercel

部署到Vercel

因为我的博客是已经部署在 github page 上的，所以已经有了源码仓库和公开仓库。

一般来说白嫖博客在github page上部署结束就可以了，具体可以参考【Hugo】Hugo + Github 免费部署自己的博客。但是考虑到后续的管理，还是打算在Vercel上也部署。

Hugo官方的文档【Host on Vercel】其实已经比较详细了，按照他的步骤来就行，只不过是英文的看起来比较费劲。

准备

创建并登录 GitHub 账号
创建仓库并在本地初始化。（因为我已经有了就不细说）
使用Github授权登录Vercel

添加文件

在博客主文件夹添加 vercel.json 和 build.sh 文件，具体可参考Hugo官方文档。
这个 JSON 文件告诉 Vercel 如何构建你的站点（指定构建命令和输出目录）。

1// vercel.json
2{
3  "$schema": "https://openapi.vercel.sh/vercel.json",
4  "buildCommand": "chmod a+x build.sh && ./build.sh",
5  "outputDirectory": "public"
6}

这个 Bash 脚本在 Vercel 环境中安装 Hugo、Go、Node.js 和 Dart Sass，然后构建站点。复制整个脚本。要注意替换成你博客所用的hugo版本，可以在博客主文件夹打开命令行，运行 hugo version 查看

 1# build.sh
 2#!/usr/bin/env bash
 3
 4#------------------------------------------------------------------------------
 5# @file
 6# Builds a Hugo site hosted on Vercel.
 7#
 8# The Vercel build image automatically installs Node.js dependencies.
 9#------------------------------------------------------------------------------
10
11main() {
12
13  DART_SASS_VERSION=1.93.2
14  GO_VERSION=1.25.3
15  HUGO_VERSION=0.152.0 # 这里记得替换成自己的版本
16  NODE_VERSION=22.20.0
17
18  export TZ=Europe/Oslo
19
20  # Install Dart Sass
21  echo "Installing Dart Sass ${DART_SASS_VERSION}..."
22  curl -sLJO "https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz"
23  tar -C "${HOME}/.local" -xf "dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz"
24  rm "dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz"
25  export PATH="${HOME}/.local/dart-sass:${PATH}"
26
27  # Install Go
28  echo "Installing Go ${GO_VERSION}..."
29  curl -sLJO "https://go.dev/dl/go${GO_VERSION}.linux-amd64.tar.gz"
30  tar -C "${HOME}/.local" -xf "go${GO_VERSION}.linux-amd64.tar.gz"
31  rm "go${GO_VERSION}.linux-amd64.tar.gz"
32  export PATH="${HOME}/.local/go/bin:${PATH}"
33
34  # Install Hugo
35  echo "Installing Hugo ${HUGO_VERSION}..."
36  curl -sLJO "https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz"
37  mkdir "${HOME}/.local/hugo"
38  tar -C "${HOME}/.local/hugo" -xf "hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz"
39  rm "hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz"
40  export PATH="${HOME}/.local/hugo:${PATH}"
41
42  # Install Node.js
43  echo "Installing Node.js ${NODE_VERSION}..."
44  curl -sLJO "https://nodejs.org/dist/v${NODE_VERSION}/node-v${NODE_VERSION}-linux-x64.tar.xz"
45  tar -C "${HOME}/.local" -xf "node-v${NODE_VERSION}-linux-x64.tar.xz"
46  rm "node-v${NODE_VERSION}-linux-x64.tar.xz"
47  export PATH="${HOME}/.local/node-v${NODE_VERSION}-linux-x64/bin:${PATH}"
48
49  # Verify installations
50  echo "Verifying installations..."
51  echo Dart Sass: "$(sass --version)"
52  echo Go: "$(go version)"
53  echo Hugo: "$(hugo version)"
54  echo Node.js: "$(node --version)"
55
56  # Configure Git
57  echo "Configuring Git..."
58  git config core.quotepath false
59  if [ "$(git rev-parse --is-shallow-repository)" = "true" ]; then
60    git fetch --unshallow
61  fi
62
63  # Build the site
64  echo "Building the site"
65  hugo --gc --minify --baseURL "https://${VERCEL_PROJECT_PRODUCTION_URL}"
66
67}
68
69set -euo pipefail
70main "$@"

创建完后还要提交推送到仓库上

创建项目

打开Vercel，点击 Add New 添加项目 Project

安装Vercel应用，选择博客的主仓库（一般是私密的）

点击导入 Import

修改项目名和框架名后，点击部署 Deploy

等待成功后出现界面：

后续

页面没有文章

文章在发布时设置了 draft = true ，Hugo 默认不构建 draft=true 的文章 → public/ 目录中没有 .html 文件 → 页面为空！

但在 GitHub Pages 正常显示，但 Vercel 却不显示，这说明不是 draft 的问题。

查看之前部署在 github page 上的的工作流文件 .github/workflows/hugo_deploy.yaml

 1name: deploy
 2
 3# 代码提交到main分支时触发github action
 4on:
 5  push:
 6    branches:
 7      - main
 8
 9jobs:
10  deploy:
11    runs-on: ubuntu-latest
12    steps:
13        - name: Checkout
14          uses: actions/checkout@v4
15          with:
16              fetch-depth: 0
17
18        - name: Setup Hugo
19          uses: peaceiris/actions-hugo@v3
20          with:
21              hugo-version: 0.152.0
22              extended: true
23
24        - name: Build Web
25          run: hugo -D
26
27        - name: Deploy Web
28          uses: peaceiris/actions-gh-pages@v4
29          with:
30              PERSONAL_TOKEN: ${{ secrets.TOKEN }}
31              EXTERNAL_REPOSITORY: bobQAQ003/Kuka
32              PUBLISH_BRANCH: main
33              PUBLISH_DIR: ./public
34              commit_message: auto deploy

hugo -D 构建时会包含草稿，而部署在 Vercel上的网页生成不包含 draft ，可以修改成：

1  # Build the site
2  echo "Building the site"
3  hugo --gc --minify --baseURL "https://${VERCEL_PROJECT_PRODUCTION_URL}"
4  hugo --gc --minify --buildDrafts --baseURL "https://${VERCEL_PROJECT_PRODUCTION_URL}"

再推送到github上

既然是不编译的问题，那么也可以把每篇文章的draft = true 改为 false ，不修改 build.sh，这样应该也是可以。

修改域名

点击 Domains ，再点击 Edit

因为没有申请域名，所以修改的时候不能随便修改，保留.vercel.app 前缀找个合适的保存就行。后续申请了域名再仔细考虑这个，现在进行修改只是为了方便记住。