将Hugo博客部署到Vercel

经过一番折腾，我的 Hugo 博客正式从本地搬到了 Vercel。这次部署不仅通过 package.json 实现了 Pagefind 全文搜索，还利用 jijian 主题内置的“本地静态加密”方案实现了安全的文章访问控制。

为了方便以后查阅，也为了给有类似需求的朋友提供参考，特整理此文。

1. 为什么选择 Vercel？

相比于 GitHub Pages 或 Cloudflare Pages，Vercel 的优势在于其极速的构建流水线和灵活的配置。配合 jijian 主题的 本地静态加密 功能，您可以轻松实现“文章级别”的访问控制，不依赖任何第三方服务或边缘函数（Edge Functions）。

2. 部署前的项目结构调整

为了让 Vercel 能够顺利执行构建任务，我在根目录下补充了一个关键文件：

package.json：我们需要通过它来管理 Pagefind（搜索索引工具）。有了它，Vercel 才能在构建时自动安装正确的工具链。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


{
  "name": "hcllmsx-blog",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "build": "hugo --gc --minify && node themes/jijian/assets/js/encrypt.js && npx pagefind --site public --output-path public/pagefind"
  },
  "dependencies": {
    "pagefind": "^1.4.0"
  }
}

3. Vercel 导入与配置

在 Vercel 导入 GitHub 仓库时，关键配置如下：

基本信息

Application Preset: Hugo
Root Directory: ./

构建命令 (Build Command) 🚀

由于我们要通过 Node.js 运行加密脚本，最稳妥的方式是直接调用 package.json 中定义好的命令：

1

npm run build

环境变量 (Environment Variables) 🔑

在部署界面的 Environment Variables 栏目添加以下变量：

Key	Value	说明
`HUGO_VERSION`	`0.158.0`	Hugo 版本，建议与本地一致
`HUGO_BASEURL`	`https://your-domain.com/`	站点 URL

4. 本地静态加密

jijian 主题原生支持 本地静态加密。您只需要在文章的 Front Matter 中添加 mima（或 password）字段即可。

实现原理：

构建时处理：构建命令里的 node .../encrypt.js 会自动扫描含有密码的文章并进行加密处理。
本地解密：浏览器端使用 WebCrypto API 进行解密，无需依赖后端服务。

5. Pagefind 搜索适配

由于 Pagefind 是在静态文件生成后才运行的。我们在构建命令中加入了 npx pagefind。注意：要确保引用的是 /pagefind/pagefind-ui.js。